Interactive Info Map
A fully responsive map doesn't perform well on responsive pages. This one has a responsive width with a maximum width setting and a fixed. The height can be changed when the map is displayed on an iPhone to make it fit the viewing area better.
The map is created by entering the coordinates and selecting the zoom level and map type. A marker or pushpin can be inserted at the center point. These are available in different colors and can be animated if required.
The optional info window opens on page load and can be dismissed by the visitor. It has a heading and a text box. Text is entered using <br> to create line breaks.
The info window has a maximum width setting.
The map itself can have a border and there is a control for adjusting its vertical spacing in relation to the items above and below it.
Google maps require an API key which is specific to the website's domain. Use the tab below to find out how to get an API key.
The map must be tested locally before adding the API key. When the page is ready for final publishing, check the box and enter the key.