Try it!

Feel free to play with example below

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.min.js"></script>
<script src="/path/to/your-angular-controller.js"></script>

Installation with Bower

You can also install angular-dg-maps with Bower:

bower install angular-dg-maps

Than you will be able to include it from your bower_components directory 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"]);

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 latitude="markerLat" longitude="markerLon"></dg-marker>
    </dg-map>

Or using ng-repeat directive:

<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 Map API

You can also use more simple Static 2GIS Map API

Include the <dg-static-map> element in your template:

<dg-static-map
            latitude="{{ staticLat }}"
            longitude="{{ staticLon }}"
            zoom="{{ staticZoom }}"
            width="500"
            height="500"
            ></dg-static-map>

You can also bind attribute values to current scope properties and add some markers, as it's done on this page:

<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>

Important Do not forget to set width and height attributes!