Google Maps for Angular.js

Simple to use Angular.js directive to work with Google Maps inside your applications.

This website is outdated. It refers to the legacy branch. The website for the new master branch is in the works. You can preview it by cloning the gh-pages-new2 branch. Thanks!

Google offers a very nice API to work with maps inside your web pages. However, it requires quite a bit of Javascript code to make it work and sooner or later the code becomes a big mess.

Google also offers a very nice MVC framework called Angular.js that is a real pleasure to work with. Since Angular.js doesn't ship with Google Maps support built-in, I decided to make a directive for it which you can include in your projects. It allows you to work with Google Maps with a really simple <google-map> element.

Already using it?

If you find any bug in the product, or would like a feature implemented, use the issue tracker over at the GitHub repository.

Using Leaflet instead?

Another good directive, very similar to this one, has been developed by tombatossals called Angular Leaflet Directive. Check it out!


Before using angular-google-maps you must include the main Angular.js library, the Google Maps library and the angular-google-maps.js script:

<script src=""></script>
<script src="//"></script>
<script src="/path/to/angular-google-maps.js"></script>
<script src="/path/to/your-angular-controller.js"></script>

You will need to make your application's module depend on the google-maps module:

var app = angular.module("myApp", ["google-maps"]);

Next, inside your controller, you'll need to define some properties required for the directive to work:

angular.extend($scope, {
	center: {
		latitude: 0, // initial map center latitude
		longitude: 0, // initial map center longitude
	markers: [], // an array of markers,
	zoom: 8, // the zoom level

Now, include the <google-map> element in your template:

<google-map center="center" draggable="true" zoom="zoom" markers="markers" mark-click="true" style="height: 400px"></google-map>

Please note You will need to set a proper height on the <google-map> element and set its display CSS property to block for it to render properly.

If you use the map in an element which is hidden at the moment of initialization, the map will need to be refreshed when it becomes visible. Use the refresh for this:

<google-map center="center" zoom="zoom" markers="markers" refresh="!isMapElementHidden" style="height: 400px"></google-map>

The value of the refresh attribute is an expression used to trigger a map refresh when it returns true.

An example page is provided in the GitHub repository for you to experiment.


Here is the list of all attributes supported by the <google-map> element:

Attribute Required Description
center yes A javascript object having latitude and longitude properties representing the center of the map
Breaking change! Previous versions used lat and lng properties! Check your stuff!
zoom yes Map zoom level
draggable If set to true, the user will be able to drag the map. When the map is dragged, the center scope property will be updated with the new center position.
markers An array of objects having latitude and longitude properties. When this array is not empty, a marker will be added to the map for each of them.
mark-click If set to true, a marker will be added to the map upon click. If the user clicks again, the marker will be moved to the new position. The latitude and longitude scope properties will also be updated.
refresh Expression which, when true, will trigger a map refresh
fit If set to true, map viewport will be adjusted to fit all markers.

Try it

The coordinates and zoom level are adjusted automatically as you wiggle the map around:

{{ latitude }}, {{ longitude }}

Add new markers on the map by entering their coordinates in the fields below:

Latitude Longitude
{{ marker.latitude }} {{ marker.longitude }}
Fork me on GitHub