I have a need to dynamically create and display markers on a Google Map. Statically declaring a single or an array of markers seems pretty easy, but updating an array of markers so they are displayed and removed over time seems more tricky using the available AngularJS libraries for Google Maps.
The two libraries I have looked at are:
- Angular Google Maps (part of the AngularUI suite of components)
- ngmap
Both offer AngularJS directives to insert a Google Maps into an existing page. Let’s take a quick look at each approach.
Angular Google Maps
With Angular Google Maps, use the provided directives to insert the map and an array of markers:
[code]
<ui-gmap-google-map center=’map.center’ zoom=’map.zoom’>
<ui-gmap-markers models="markers" coords="’self’" modelsbyref="false"/>
</ui-gmap-google-map>
[/code]
In my Controller I’ve added a map object to $scope with values for center and zoom:
[code]
$scope.map = {center: {latitude: 37.7699298, longitude: -122.4469157}, zoom: 12};
[/code]
… and to add the initial array of markers (random markers in SF):
[code]
var marker1 = {id: 1, latitude: 37.7699298, longitude: -122.40};
var marker2 = {id: 2, latitude: 37.7699298, longitude: -122.45};
var marker3 = {id: 3, latitude: 37.7699298, longitude: -122.46};
$scope.markers = [];
$scope.markers[0] = marker1;
$scope.markers[1] = marker2;
$scope.markers[2] = marker3;
[/code]
Since the markers array in $scope is reference by the ui-gmap-markers element, setting the markers array to [] deletes the markers from the map, and adding them back re-adds them back to the map. The property ‘coords’ is the name of the property on the object passed to models that contains the objects with the latitude/longitude properties for each marker. modelsByRef=”false” seems to add support for watching changes to the model.
ngMap
The ngMap approach is very similar. To add the map to a page with a repeating list of markers:
[code]
<map style="height:100%" center="37.7699298, -122.4469157" zoom="11">
<marker ng-repeat="pos in positions" position="{{pos.lat}}, {{pos.lng}}"></marker>
</map>
[/code]
To create the markers, create an array of markers with lat and lng properties, similarly to Angular Google Maps:
[code]
var marker1 = {lat: 37.769, lng: -122.44};
$scope.positions = [];
$scope.positions[0] = marker1;
//etc
[/code]
Summary
Since my app needs to dynamically add and remove markers for display to the Google Map, this was my primary requirement for selecting one of the libraries. I struggled to get this working initially with Angular Google Maps, but seemed to work straight out of the box with ngMap. Most of my struggles though may have been related to my misunderstanding of how $scope works in AngularJS (which I’m still learning), so maybe at some point I should go back and re-evaluate both of these again once I have a better understanding of AngularJS.
I put together a sample app that uses both of the libraries, which you can find on GitHub here: https://github.com/kevinhooke/AngularJSGoogleMapsExamples
Also, my final usage for ngMap you can see in action in my app, SpotViz, which is available here: http://www.spotviz.info/ . It allow Amateur Radio operators to playback an animated display of received station locations over time from log files from a digital mode application called WSJT-X.
