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
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
Hi Matt,
JSFiddle is not working or the same code when you are trying does not work?
Hmm that’s weird, when I browsed to http://jsfiddle.net/ramandv/xSPAA/ yesterday it wasn’t working, but it’s working now – sorry for the confusion.
The fiddle works in Firefox, not chrome.
In the angular-ui new version, it has been split into sub-projects. That was causing the issue. Just fixed it.
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
You can write handler for any google map events. Just prefix “map-” to the google map event name.
The example does not work for me in Chrome. Any ideas how to fix it?
There was some issue in loading the angularjs file. Fixed it now. It should work now.
How can you get MouseEvent passed for map-click-events?
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()’}”
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/
Thanks for the fixing the bug. Updated the code.
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
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?
jsfiddle sorry
In Jsfiddle, Google maps library needs to be included as external resource.
“http://maps.googleapis.com/maps/api/js?sensor=false&.js”
Pingback: Google Maps does not fill with angularjs | CodersDiscuss.com