Hero Google Map
The first step in inserting a Google map in a web page is to go to the Google Maps website and type in the required address to get an approximate location.
Control (right) click the point which is to be the center of the map or the marker.
Select "What's here?" from the popup and then copy (command c) the values for latitude and longitude from the window at the top left of the map.
These coordinates will be pasted (command v) into the box of that name in the widget settings.
Map
The map is inserted into a full width, fixed height responsive container which has options for adding a top and/or bottom border as a separator.
It has options for map type and initial zoom level and checking a box will show a marker at the point set by the values for Latitude and Longitude.
The marker can be the default balloon style marker or a pushpin with a choice of colors. The marker can have a bounce animation if needed.
Info Window
The optional info window has a heading, a text block and a maximum width setting. The text can run to several lines by using the HTML line break <br> to create returns. There is a choice of web safe fonts and controls to adjust the heading size, text size and the font color.
Map API Key
All websites and web applications created on or after June 22 2016 will require a Google Maps API Key. Existing ones will continue to work without a key, but the new limits will be applied to everyone.
A map key is free for those websites which do not exceed 125,000 daily map loads.
Although existing maps will continue to work, a key will be required for any new sites.
This widget has a checkbox and a field for inserting the key.
When the box is left unchecked, the map can be tested locally. Before publishing to the server, the box should be checked and the map key entered.
NOTE: A map with an API Key will not work locally.