Google Maps

This section will guide you through how to setup a basic google map and add overlay colors to it,For more advance options please refer the google map developer API for Web

jQuery users

Setting up a map

Step one

Add the following google map api js, this is without private key. Where to add this? please refer the JS third party plugin include rules

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>

Step Two

Create an Empty div with an ID

example :

<div id="myMap"></div>

Step Three

Initialize Google Map.Where to add this? please refer the JS third party plugin include rules

example :

 // When the window has finished loading create our google map below
 google.maps.event.addDomListener(window, 'load', init);

var map;
var zoomLevel = 11;

 function init() {
     // Basic options for a simple Google Map
     // For more options see: https://developers.google.com/maps/documentation/javascript/reference#MapOptions
     var mapOptions = {
         // How zoomed in you want the map to start at (always required)
         zoom: zoomLevel,
         disableDefaultUI: true,
         // The latitude and longitude to center the map (always required)
         center: new google.maps.LatLng(40.6700, -73.9400), // New York
     };

     // Get the HTML DOM element that will contain your map 
     // We are using a div with id="map" seen below in the 
     var mapElement = document.getElementById('myMap');

     // Create the Google Map using out element and options defined above
     map = new google.maps.Map(mapElement, mapOptions);
 }

Map themes

Google Maps comes with styling option that you can change, add the following styles attribute to mapOptions in the JS you created before

example :

styles: [{
   featureType: 'water',
   elementType: 'all',
   stylers: [{
       hue: '#e9ebed'
   }, {
       saturation: -78
   }, {
       lightness: 67
   }, {
       visibility: 'simplified'
   }]
}, {
   featureType: 'landscape',
   elementType: 'all',
   stylers: [{
       hue: '#ffffff'
   }, {
       saturation: -100
   }, {
       lightness: 100
   }, {
       visibility: 'simplified'
   }]
}, {
   featureType: 'road',
   elementType: 'geometry',
   stylers: [{
       hue: '#bbc0c4'
   }, {
       saturation: -93
   }, {
       lightness: 31
   }, {
       visibility: 'simplified'
   }]
}, {
   featureType: 'poi',
   elementType: 'all',
   stylers: [{
       hue: '#ffffff'
   }, {
       saturation: -100
   }, {
       lightness: 100
   }, {
       visibility: 'off'
   }]
}, {
   featureType: 'road.local',
   elementType: 'geometry',
   stylers: [{
       hue: '#e9ebed'
   }, {
       saturation: -90
   }, {
       lightness: -8
   }, {
       visibility: 'simplified'
   }]
}, {
   featureType: 'transit',
   elementType: 'all',
   stylers: [{
       hue: '#e9ebed'
   }, {
       saturation: 10
   }, {
       lightness: 69
   }, {
       visibility: 'on'
   }]
}, {
   featureType: 'administrative.locality',
   elementType: 'all',
   stylers: [{
       hue: '#2c2e33'
   }, {
       saturation: 7
   }, {
       lightness: 19
   }, {
       visibility: 'on'
   }]
}, {
   featureType: 'road',
   elementType: 'labels',
   stylers: [{
       hue: '#bbc0c4'
   }, {
       saturation: -93
   }, {
       lightness: 31
   }, {
       visibility: 'on'
   }]
}, {
   featureType: 'road.arterial',
   elementType: 'labels',
   stylers: [{
       hue: '#bbc0c4'
   }, {
       saturation: -93
   }, {
       lightness: -2
   }, {
       visibility: 'simplified'
   }]
}]

For more google map Themes, try the following link

AngularJS users

Pages uses Google Map loader script by Gavin Foley to only load the Google Maps API on-demand.

Step One

Include the google-map ocLazyLoad module in your dependency list of router config. Please refer to AngularJS guide for more

Step two

Add google-maps to your module's list of dependencies.

Add google map options to scope

 google.maps.visualRefresh = true;

 $scope.markers = [{
     latitude: 45,
     longitude: -74
 }, {
     latitude: 38,
     longitude: -88
 }];

 $scope.markerLat = null;
 $scope.markerLng = null;

 $scope.addMarker = function() {
     $scope.markers.push({
         latitude: parseFloat($scope.markerLat),
         longitude: parseFloat($scope.markerLng)
     });

     $scope.markerLat = null;
     $scope.markerLng = null;
 };

 // default location
 $scope.center = {
     latitude: 40.6700,
     longitude: -73.9400
 };

 $scope.latitude = null;
 $scope.longitude = null;

 $scope.zoom = 11;

 $scope.styles = [{
         featureType: 'water',
         elementType: 'all',
         stylers: [{
             hue: '#e9ebed'
         }, {
             saturation: -78
         }, {
             lightness: 67
         }, {
             visibility: 'simplified'
         }]
     },
     ...
 ]

Step three

Add following markup to your page. You can apply the directive google-map either as a class, element or attribute. The following example follows the class name approach

<div class="google-map full-width full-height" center="center" zoom="zoom" markers="markers" latitude="clickedLatitudeProperty" longitude="clickedLongitudeProperty" mark-click="false" draggable="true" fit="true" styles="styles" disabledefaultui="true">
</div>