angular-dg-maps's Introduction

Angular 2GIS Maps

Angular-dg-maps is a set of directives that enables seamless integration of 2GIS Maps API into your AngularJS app.

Check out docs here: http://burivuhster.github.io/angular-dg-maps

Pull-requests are welcome!

Usage

Installation

Before using angular-dg-maps you must include the main Angular.js library, the 2GIS library and the angular-dg-maps.js script:

<script type="text/javascript" src="http://maps.api.2gis.ru/1.0"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script src="/path/to/angular-dg-maps.js"></script>
<script src="/path/to/your-angular-controller.js"></script>

Another way is to use Bower:

bower install angular-dg-maps

Than you will be able to include angular-dg-maps like this:

<script type="text/javascript" src="http://maps.api.2gis.ru/1.0"></script>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-dg-maps/build/angular-dg-maps.min.js"></script>
<script src="/path/to/your-angular-controller.js"></script>

Dependency

You will need to make your application's module depend on the dg-maps module:

var app = angular.module("myApp", ["dg-maps"]);

Controller

Next, inside your controller, you'll need to define some properties required for the directive to work:

angular.extend($scope, {
    lat: 55.028936234826, // initial map center latitude
    lon: 82.927810142519, // initial map center longitude
    zoom: 15 // the zoom level
});

Map

Now, include the <dg-map> element in your template:

<dg-map 
        latitude="lat" 
        longitude="lon" 
        zoom="zoom" 
        style="height: 500px; width: 500px;"></dg-map>

Markers

You can put markers on your map by adding <dg-marker> elements as children of <dg-map> element:

<dg-map latitude="lat" longitude="lon" zoom="zoom" style="height: 500px; width: 500px;">
    <dg-marker 
        ng-repeat="marker in markers" 
        latitude="marker.latitude" 
        longitude="marker.longitude" 
        hint="marker.hint"></dg-marker>
</dg-map>

Static Maps API

You can also use Static 2GIS Maps API in your angular application. To insert static map into your page simply include the dg-static-map element in your template:

<dg-static-map
        latitude="55.058883"
        longitude="82.911182"
        zoom="15"
        width="500"
        height="500"></dg-static-map>

Please note, all attributes above are required.

Static map markers

Use dg-static-marker elements to add markers on your static map:

<dg-static-map
        latitude="staticLat"
        longitude="staticLon"
        zoom="staticZoom"
        width="500"
        height="500">
        <dg-static-marker latitude="55.7368" longitude="37.64272"></dg-static-marker>
        <dg-static-marker latitude="55.7361" longitude="37.632618" hint="10"></dg-static-marker>
</dg-static-map>

angular-dg-maps's People

Contributors

Stargazers

Watchers

angular-dg-maps's Issues

API version changed

Current 2GIS api is http://maps.api.2gis.ru/2.0/loader.js?pkg=full. Guess it won't work, here is migration guides

DG.Map is not a constructor

Hello!

I'm using this(https://github.com/DaftMonk/generator-angular-fullstack) yeoman generator.

Include "//maps.api.2gis.ru/1.0" script into "index.html" (using https)
Append dependency 'dg-maps' on module

var app = angular.module("myApp", ["dg-maps"]);

In controller init lat, lon, zoom and markers

$scope.markers = [
    {
        lat: 55.028936234826,
        lon: 82.927810142519,
        hint: 'marker1'
    }
];

angular.extend($scope, {
    lat: 55.028936234826,
    lon: 82.927810142519,
    zoom: 15 
});

In template

<dg-map latitude="lat" longitude="lon" zoom="zoom" style="height: 500px; width: 500px;">
    <dg-marker ng-repeat="marker in markers" latitude="marker.latitude" longitude="marker.longitude" hint="marker.hint"></dg-marker>
</dg-map>

and i have error "DG.Map is not a constructor"

Recommend Projects

burivuhster / angular-dg-maps Goto Github PK