The Simplest AngularJS Google Maps V3 Directive
Demo
Documentation
Road Trip By StreetView
Maps Can Talk |
Custom Marker
If you like this, you also may like these:
There is already one for this. However, I found myself taking a totally different approach than the existing one, such as:
Everything in tag and attributes.
Thus, users don’t even need knowledge of JavaScript.
Expose all original Google Maps V3 API to the user.
No hiding, no wrapping or whatsoever.
By doing so, programmers don’t need to learn how to use this module.
You only need to know Google Maps V3 API.
There is a blog that introduces this module. The title of it is ‘Google Map As The Simplest Way’
For Bower users,
$ bower install ngmap
Include ng-map.min.js
:
<script src="/bower_components/ngmap/build/scripts/ng-map.min.js"></script>
Include Google Maps:
<script src="http://maps.google.com/maps/api/js"></script>
Name your AngularJS app ngMap, or add it as a dependency
var myApp = angular.module('myApp', ['ngMap']);
To get the map instance use the NgMap.getMap()
function
app.controller('MyController', function(NgMap) {
NgMap.getMap().then(function(map) {
console.log(map.getCenter());
console.log('markers', map.markers);
console.log('shapes', map.shapes);
});
});
For npm users,
$ npm install ngmap
For Meteor users: https://atmospherejs.com/wormy/angularjs-google-maps
Simply wrap the map tag with map-lazy-load="https://maps.google.com/maps/api/js"
.
<div map-lazy-load="https://maps.google.com/maps/api/js">
<ng-map center="41,-87" zoom="3"></ng-map>
</div>
If you need to pass in an API key to the javascript, you can set a scope
variable in your controller (e.g. $scope.googleMapsUrl="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE";
).
This can be set from a constant value in your app to standardise the API key to pass to google for multiple controllers.
<div map-lazy-load="https://maps.google.com/maps/api/js"
map-lazy-load-params="{{googleMapsUrl}}">
<ng-map center="41,-87" zoom="3"></ng-map>
</div>
The usual reason why this happens is that the size of the map is changed after the map has been initialized. If you for some reason change the size of the div, you need to trigger the “resize” event and possible recenter the map.
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
Ref.
Map
, Rectangle
, or Circle
`map.getBounds().contains(marker.getPosition());`
You can check this out: https://developers.google.com/maps/documentation/javascript/distancematrix.
As you see, DistanceMatrix does not require map nor directive.
Another way to do this, is to use directions directive. As you see it here: https://rawgit.com/allenhwkim/angularjs-google-maps/master/testapp/directions2.html, you have access to DirectionsRenderer by using map.directionsRenderers[id]
https://developers.google.com/maps/documentation/javascript/reference?hl=en#DirectionsRenderer
You use getDirections()
or directions
, then calculate the distance from there. e.g.,
Distance:
{{ map.directionsRenderers[0].directions.routes[0].legs[0].distance }}