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
Google Map Developer APIjQuery 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
Google Map ThemesAngularJS 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>