ngvmaps v0.0.2
ngvMaps
AngularJS directive for working with Google Maps
Table of contents
Installation
Include the Google Maps JavaScript library
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY" async defer></script>
Download the latest version of ngvMaps
:
npm install ngvmaps
Inject ngvMaps
into your application:
(function() {
angular.module('app', [
'ngvMaps'
]);
})();
Include the following basic styles in your stylesheet:
map {
display: block;
height: 500px; /* You can change this value but a Google Map must have a height */
width: 100%;
}
Usage
Basic Map
The ngvMaps
directive provides a custom HTML element to instantiate a Google Map. The most basic usage requires a center
attribute as a LatLng object and a zoom
attribute as a number from 1–20.
<ngv-map center="{lat: 51.5013673, lng: -0.144084}" zoom="15"></ngv-map>
Markers
Markers can be added using either the marker
or markers
attribute for either a single marker or multiple markers respectively.
Single Marker
If no value is specified for the marker
attribute, a marker will be added to the center
of the map.
<ngv-map center="map.center" zoom="map.zoom" marker></ngv-map>
A LatLng
object can also be specified in the marker
attribute to customize the position of the marker.
<ngv-map center="map.center" zoom="map.zoom" marker="{lat: 51.503331, lng: -0.149813}"></ngv-map>
Multiple Markers
To create multiple markers on the map, pass an array of LatLng
objects to the markers attribute.
// Inside your controller
this.markers = [
{lat: 51.503331, lng: -0.149813},
{lat: 51.496701, lng: -0.144027}
];
<ngv-map center="map.center" zoom="map.zoom" markers="map.markers"></ngv-map>
Marker Image
A path to a marker image can be passed via the marker-image
attribute — note that the marker-image
must be passed as a string.
<ngv-map center="map.center" zoom="map.zoom" marker marker-image="'/img/icon.png'"></ngv-map>
You could also pass an array
to specify the height and width of the icon — this is particularly useful if you want to make the icon retina-friendly by making the image half the size of the image file.
<ngv-map center="map.center" zoom="map.zoom" marker marker-image="['/img/icon.png', 60, 40]"></ngv-map>
Advanced Options
Map Options
Map options can be passed to the map object via the options
attribute — any option from the 'Google MapOptions object specification' can be specified.
// Inside your controller
this.mapOptions = {
mapTypeControl: false
};
<ngv-map center="map.center" zoom="map.zoom" markers="map.markers" options="map.mapOptions"></ngv-map>
Bounds
If an array of markers
is specified, the bounds
attribute can be used instead of specifying a center
and zoom
. This will automatically center and zoom the map to display all of the markers specified — see the fitBounds()
method in Google Maps JavaScript API V3 Reference for more information.
<ngv-map markers="map.markers" bounds></ngv-map>
You can also pass a max-zoom level from 1–20 when using bounds
to limit the maximum zoom when bounds are calculated.
<ngv-map markers="map.markers" bounds="15"></ngv-map>