CUSTOM CREATED google maps embedding

Question

I have a problem using <iframe> to embed my map (protocols must match). One suggested workaround is to replace https with http BUT THIS DOES NOTHING, as google forces it over SSL anyway. Also, leaving out both http and https, like so: //www.google.com does nothing. Another solution is to hard-code the map coordinates, zoom and whatnot into javascript, omitting the <iframe> altogether. However, that is not what I need.

I need my custom map, with its clickable pins, default view (position and zoom) and base map settings. Is there a way in javascript to reference to this map, or even to build a map from scratch, but without registering for API_KEY with Google?

Answer 1

You need to use https and provide an API_KEY for the Google Maps' Embed API. Also you have to hard code the coordinates, zoom etc, unless you insert the values with server side code (use PHP or Python to insert values programmatically)

If you do not want to provide an API_KEY and have a reference to the map object, you have to use Google Map's Javascript API.

Here is a demo of showing a simple Google Map: https://developers.google.com/maps/documentation/javascript/examples/map-simple

If you want more customizations, you can check out this styled Google Map demo: https://developers.google.com/maps/documentation/javascript/examples/maptype-styled-simple