ng-simple-google-maps v1.0.2
ngGoogleMaps
Simplest Angular directive for Google Maps offering following features:
- Road maps
- Markers with customizable icons and event handlers
- InfoWindow
- Directions and waypoints
Installation
Via npm
$ npm install ng-simple-google-maps --save
Via bower
$ bower install ng-simple-google-maps --save
Getting started
Include the module's script file in your HTML page
<script defer src="https://maps.googleapis.com/maps/api/js?key=[YOUR_GOOGLE_MAPS_API_KEY]"></script>
<script src="bower_components/ng-simple-google-maps/dist/ng-google-maps.min.js"></script>
Inject the module as a dependency into your main Angular module as below:
angular.module('myApp', ['ngGoogleMaps']);
Directive
Now you can use the the Google Maps directive to display the basic google map in you web page as following:
HTML Example
<ng-google-maps id="maps"></ng-google-maps>
CSS Example
#maps {
width: 100%;
height: 400px;
}
Attributes
Attribute | Description | Required |
---|---|---|
options | Options for initializing the map with desired zoom factor, center coordinates etc. | Optional |
markers | An array of markers. Every marker object must specify position in terms of latitude and longitude | Optional |
route | An array of position coordinates with first object as the source and last as the destination with any other intervening positions as waypoints | Optional |
info | InfoWindow tooltip options | Optional |
resize | Boolean for resizing map on any event | Optional |
Examples
- Options
You can pass the options from from your controller as following:
angular.module('myApp', ['ngGoogleMaps'])
.controller('MapController', ['$scope', function($scope) {
$scope.mapOptions = {
center: {position: {lat: 43.9124, lng: 75.7873}},
zoom: 8
};
}]);
<ng-google-maps id="maps" options="mapOptions"></ng-google-maps>
- Markers
Pass an array of marker objects from your controller as shown below:
angular.module('myApp', ['ngGoogleMaps'])
.controller('MapController', ['$scope', function($scope) {
$scope.mapMarkers = [{
title: 'Paris',
position: {lat: 45.5124, lng: -74.7864}
}, {
title: 'Milan',
position: {lat: 49.5124, lng: -76.2864}
}];
}]);
<ng-google-maps id="maps" markers="mapMarkers"></ng-google-maps>
Note: The directive dynamically computes the bounds of all the markers to support autofit initialization.
Marker icon: You can use custom marker icons and images to denote different markers on the map using icon property. Marker events: You can define actions of event handlers for markers for click and mouseover events.
$scope.mapMarkers = [{
title: 'Los Angeles, CA',
position: {lat: 34.0522, lng: 118.2437},
icon: './resources/icons/map/city.png',
click: function() {
// Do something here
},
mouseover: function() {
// Do something here
}
}];
- Route
The route attribute allows you to display dirctions and waypoints in road map between two distinct locatiions. You can pass this information from your controller as shown below:
angular.module('myApp', ['ngGoogleMaps'])
.controller('MapController', ['$scope', function($scope) {
$scope.mapRoute = [{
position: {lat: 45.5124, lng: -74.7864} // Source
}, {
position: {lat: 47.5124, lng: -75.2864} // Waypoint
}, {
position: {lat: 49.5124, lng: -78.2864} // Destination
}];
}]);
<ng-google-maps id="maps" route="mapRoute"></ng-google-maps>
Note: The route array must contain at least two locations, i.e., source and destination and any number of waypoint locations in between.
- InfoWindow
The info attribute enables you to display InfoWindow toooltip in the map at a desired event. You can pass the InfoWindow object from your controller as shown below:
angular.module('myApp', ['ngGoogleMaps'])
.controller('MapController', ['$scope', function($scope) {
$scope.infoWindowOptions = {
content: '<div><h3>Info</h3><p>Location</p></div>'
};
}]);
<ng-google-maps id="maps" info="infoWindowOptions"></ng-google-maps>
You can also position the InfoWindow around a marker by using the marker property as shown below:
$scope.infoWindowOptions = {
content: '<div><h3>Info</h3><p>Location</p></div>',
marker: {
position: {lat: 22.6705, lng: 77.6424}, // Required
title: 'Marker Title (optional)',
/* Other optional properties for a marker */
}
};
In case you want to display the InfoWindow around a marker that is already present in the map using the markers attribute, then you can pass the index of the marker in the array in your controller using the index property as following:
angular.module('myApp', ['ngGoogleMaps'])
.controller('MapController', ['$scope', function($scope) {
$scope.mapMarkers = [{
title: 'Paris',
position: {lat: 45.5124, lng: -74.7864}
}, {
title: 'Milan',
position: {lat: 49.5124, lng: -76.2864}
}];
$scope.infoWindowOptions = {
content: '<div><h3>Paris</h3><p>Viva la France</p></div>',
index: 0
};
}]);
<ng-google-maps id="maps" markers="mapMarkers" info="infoWindowOptions"></ng-google-maps>
- Map resize
The map resizes to fit into a resized container or div dynamically when the value of resize attribute is set to true.
<ng-google-maps id="maps" resize="true"></ng-google-maps>