Google Maps with a Simple Marker & Address Geocoding


October 27, 2014



Embedding Google Maps via iFrame is pretty simple. You search for an address on and then get the iFrame-Code to add it to your site. Unfortunately there is no possibility to personalise the map or to hand over the location values dynamically as an address. If you want to have more freedom in terms of appearance and using the same code for different pages with different locations you have to use some JavaScript and the Google Maps API to render the map.


The map is rendered inside <div id=”map” class=”map”></div>.


The Google Script has to be implemented before the render function is defined.

The JavaScript below renders the map based on the values “street”, “postal-code”, and “city”. You can hand over more detailed address-values like “state” or “country” in the same way. We were using Advanced Custom Fields to generate the required fields in WordPress and to hand them over in the front-end.

The variable “zoom” defines the start zoom of the map, “mapTypeID” the style and “image” is the custom map-pin. You can personalise your map even more by having a look into the official documentation of Google.


It is important to define length and height of the map-container to view the map inside the dom.


INTERNETKULTUR | © 2021 | Imprint