Google Maps Styling
HTML
<script src="//maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>
CSS
#map{width:100%;height:500px;}
JavaScript
function setMapAddress(address) {
var geocoder = new google.maps.Geocoder();
geocoder.geocode( { address : address }, function( results, status ) {
if( status == google.maps.GeocoderStatus.OK ) {
var location = results[0].geometry.location;
var styles = [
// Grayscale map, render in white
{'stylers': [{'saturation': -100}, {'visibility': 'off'}]},
// Fill land geometries in white
{
'featureType': 'landscape',
'elementType': 'geometry',
'stylers': [{'visibility': 'on'}, {'color': '#f5f5f5'}, {'lightness': 20}]
},
// Fill water geometries in soft white
{
'featureType': 'water',
'elementType': 'geometry',
'stylers': [{'visibility': 'on'}, {'lightness': 50}, {'color': '#D6C2A2'}]
},
// Outline administrative geometries in grey (states, countries)
{
'featureType': 'administrative',
'elementType': 'geometry.stroke',
'stylers': [{'visibility': 'on'}, {'color': '#555555'}]
}
];
var options = {
mapTypeControlOptions: {
mapTypeIds: ['Styled']
},
center: location,
zoom: 16,
disableDefaultUI: true,
streetViewControl: true,
mapTypeId: 'Styled'
};
var div = document.getElementById('map');
var map = new google.maps.Map(div, options);
var styledMapType = new google.maps.StyledMapType(styles, { name: 'Styled' });
map.mapTypes.set('Styled', styledMapType);
var iconBase = 'http://petermisur.co.nz/wp-content/uploads/2016/02/mapicon-sml.png';
var marker = new google.maps.Marker({
map: map,
draggable: false,
flat: true,
position: results[0].geometry.location,
icon: iconBase,
title: "Shakespeare Orthopaedic Institute"
});
// Marker
var contentString = '<div><h4>Shakespeare Orthopaedic Institute</h4><p>Level 1</br>209 Shakespeare Road</br>Milford, Auckland 0620</p><p><a href="https://maps.google.com/?q='+...