nlaplante/angular-google-maps — Google Maps for Angular.js

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?

Usage

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="http://maps.googleapis.com/maps/api/js?sensor=false&language=en"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></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.

API

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:

Coordinates:

Latitude:

Longitude:

Find me

Clicked marker position:

{{ latitude }}, {{ longitude }}

Zoom level:

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

Latitude	Longitude
{{ marker.latitude }}	{{ marker.longitude }}