Google Map integration tips && get started

Get google map API keys:
https://developers.google.com/maps/documentation/javascript/get-api-key

* need to set up billing and add direction services and map services

Google add custom marker:
https://codepen.io/Khrystyna/pen/Mbyjjo
http://www.abzz.co/v4/js/markerlabel/src/


Google Map remove direction marker:

directionsDisplay = new google.maps.DirectionsRenderer({suppressMarkers: true});

https://stackoverflow.com/questions/2932416/removing-directions-markers-from-the-google-maps-api-v3

Google Map make customized base map styles:
(The following is a sample JSON styler for whitewater basemap)
https://stackoverflow.com/questions/22568727/google-map-api-style-for-whitewater-from-google-map-engine
sample code:

// Styles a map in white water mode.

var map = new google.maps.Map(document.getElementById('map'),

{

center: VGH_ED,

zoom: 12,

styles: [

{ "stylers" :

[

{ "visibility" : "on" },

{ "saturation" : -13 },

{ "lightness" : -17 },

{ "hue" : "#ff6e00" }

]

},

{ "featureType" : "water",

"stylers" : [ { "visibility" : "on" },

{ "lightness" : 100 }

]

},

{ "featureType" : "poi",

"stylers" : [ { "lightness" : 39 },

{ "saturation" : -43 },

{ "visibility" : "on" }

]

},

{ "elementType" : "geometry",

"featureType" : "roads",

"stylers" : [ { "visibility" : "on" },

{ "lightness" : 30 }

]

},

{ "elementType" : "labels",

"stylers" : [ { "lightness" : 35 } ]

}

]

}

);

https://developers.google.com/maps/documentation/javascript/styling

The

Google Map, google is undefined:
"The new way of including GMaps on your page <script src="https://maps.googleapis.com/maps/api/js" async defer></script> will cause issues, as its loading will be deferred so as not to be a blocking resource. This has the awkward possibility that other scripts will be included before GMaps is initialized. Therefore, the above solution is the correct one. Thanks for this"

<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 

https://stackoverflow.com/questions/6660955/google-is-not-defined-when-using-google-maps-v3-in-firefox-remotely

Google Map API default standard passes
 initMap() as call back in script, do not do that, causing function load problems: make initMap() self invoking on bottom of code instead