Google Maps

There are many ways to display a Google Map. Traditionally you would use an iframe, which is still an option; however, we decided to go ahead and build in the Google Maps API to easily embed an interactive Google map using the [[map]] shortcode.

[map address=”Los Angeles, CA” width=”100%” height=”350px” zoom=”12″ static=”false” enablescrollwheel=”true” draggable=”true” disablecontrols=”false”]

[divider]

API Requirements

Appearance > Theme Options > General
Appearance > Theme Options > General

When using the built in Google Maps shortcode, you must first define an API key within Theme Options. This is because starting from June 2016, Google requires an API key to embed their maps on a site using their API scripts. If your site was already using the Google API prior then you should be fine.

The API key is free up to a certain amount of request per month. In most cases, you should not hit this limit.

[clear]

[divider]

Displaying

The map itself can be displayed as an image or interactive map and with the interactive map, you can disable the controls, zoom and scroll features.

[one_half]

Interactive Version

[map address=”Los Angeles, CA” width=”100%” height=”250px” zoom=”12″ static=”false” enablescrollwheel=”true” draggable=”true” disablecontrols=”false”]

[/one_half]

[one_half last]

Static Version (image)

[map address=”Tampa, FL” width=”600px” height=”250px” zoom=”12″ static=”true”]

[/one_half]

[clear]

Map Styles

[one_half]

Roadmap

[map address=”Tampa, FL” width=”100%” height=”250px” zoom=”12″ static=”false” style=”roadmap”]

[/one_half]

[one_half last]

Satellite

[map address=”Tampa, FL” width=”100%” height=”250px” zoom=”12″ static=”false” style=”satellite”]

[/one_half]

[clear]

[one_half]

Hybrid

[map address=”Tampa, FL” width=”100%” height=”250px” zoom=”12″ static=”false” style=”hybrid”]

[/one_half]

[one_half last]

Terrain

[map address=”Tampa, FL” width=”100%” height=”250px” zoom=”12″ static=”false” style=”terrain”]

[/one_half]

[clear]