0.0.2 • Published 6 years ago

ngvmaps v0.0.2

Weekly downloads
-
License
MIT
Repository
github
Last release
6 years ago

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>
0.0.2

8 years ago

0.0.1

8 years ago