Using Google maps with AngularJS and Angular UI

You can use AngularUI to integrate Google Maps in your angularjs app. The following code snippet shows a simple example of Google maps with Angular UI.

To hookup the events with map elements such as marker, polyline, you need to create html div elements with existing Google maps objects. It is a bit confusing part, but it helps to keep your controller free from adding listener codes.

//Add the requried module 'angular-ui' as a dependency
angular.module('maptesting', ['ui']);

function MapCtrl($scope) {
    var ll = new google.maps.LatLng(13.0810, 80.2740);
    $scope.mapOptions = {
        center: ll,
        zoom: 15,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    //Markers should be added after map is loaded
    $scope.onMapIdle = function() {
        if ($scope.myMarkers === undefined){
            var marker = new google.maps.Marker({
                map: $scope.myMap,
                position: ll
            });
            $scope.myMarkers = [marker, ];
        }
    };

    $scope.markerClicked = function(m) {
        window.alert("clicked");
    };

}‚Äč

<div ng-app='maptesting'>
    <div ng-controller="MapCtrl">
        <div id="map_canvas" ui-map="myMap" 
      style="height:300px;width:400px;border:2px solid #777777;margin:3px; border:1px solid" 
      ui-options="mapOptions" 
      ui-event="{'map-idle' : 'onMapIdle()'}"
      >
        </div>

        <!--In addition to creating the markers on the map, 
       div elements with existing google.maps.Marker object 
        should be created to hook up with events -->
        <div ng-repeat="marker in myMarkers" ui-map-marker="myMarkers[$index]"
                      ui-event="{'map-click': 'markerClicked(marker)'}">
        </div>
    </div>
</div>

JS Fiddle

http://jsfiddle.net/ramandv/xSPAA/

This entry was posted in AngularJS, Javascript. Bookmark the permalink.

18 Responses to Using Google maps with AngularJS and Angular UI

  1. Matt Jensen says:

    Hi there

    Thanks for this – any idea why it doesn’t work anymore though (as per the JSFiddle, the map comes out blank for me when I use this code too)?

    Cheers
    Matt

  2. Lance says:

    Hey,

    Thanks for the example. It works for me. One question I have is what other events can I listen for? For example, I have the map in a hidden div, so it needs to be resized, and I’d like to try to call resize on it in an event handler, like how you set the marker with the onMapIdle event.

    ui-event=”{‘mapDrawComplete’ : ‘myResizeFunction()’}”

    Best,

    LS

  3. ramandv says:

    You can write handler for any google map events. Just prefix “map-” to the google map event name.

  4. The example does not work for me in Chrome. Any ideas how to fix it?

  5. Johan Nordberg says:

    How can you get MouseEvent passed for map-click-events?

    • ramandv says:

      Following events can be handled.

      Source

      var mapEvents = ‘bounds_changed center_changed click dblclick drag dragend ‘ +
      ‘dragstart heading_changed idle maptypeid_changed mousemove mouseout ‘ +
      ‘mouseover projection_changed resize rightclick tilesloaded tilt_changed ‘ +
      ‘zoom_changed’;

      To handle mouseover event, use it like the following

      ui-event=”{‘map-mouseover’: ‘callback()’}”

  6. scoreit_developers says:

    Hi,

    There is a small bug in your code. Whenever map is updated ( zoomed, draged ) a new marekr is placed on the old one. It causes “click” problems after couple of zooms or drags ( simply click is not working, because new placed marker is probably behind the old one). Take a look at marker shadow, while zooming and dragign, it gets darker and darker ( multiple makers).

    Fixed: http://jsfiddle.net/sdQXD/2/

  7. Ram Avinash says:

    Can i have a help from you.
    I need a location search bar on top of the map, and based on the location the map should go to the corresponding location.
    A big Cheers if you could achieve it

  8. mauro says:

    hi,
    when i try to use this code not on plunker, this code give me an error:
    error google in not defined
    precisly at the fifth row of the js file, any idea why?

  9. Pingback: Google Maps does not fill with angularjs | CodersDiscuss.com

Leave a Reply

Your email address will not be published. Required fields are marked *