How to Add a Custom Google Map to Layers Widgets
The Contact Details & Maps widget provides a basic interface for adding a Google Map, but this may not provide enough cusotmization for you. You can Customize the widget map, or you can set one up yourself in your Google Maps and use the embed code in a Content Widget to display your map within any content layout or on its own in full width.
Create Your Map
This requires a Google login. If you want to share an anonymous map, enter the address, then zoom and position the map as you wish, then skip to Embed Map section below.
- Go to http://maps.google.com
- Click the menu bar icon at top left and choose Your Places
- Click on the Maps tab
- If you need to create a new map, click Create Map at the bottom of the sidebar
- Create your map. See Google’s documentation for help.
- When finished, make sure the zoom and position are how you want it, then click the Preview link in your map control box.
Embed Your Map
If you are just viewing an address or marker on the main Google Maps site, zoom and position your map as you want it to appear:
- Click the marker for the place you want to center on the map and then click the Share icon in the location details that popup on the left.
- If your location does not have a marker, click the menu icon at top-left of the map control box and choose Share or embed map
- The share link will popup in a modal window. Click the Embed Map tab.
- Copy the embed code and continue with Add to Widget
- Previewing will open the map in “live” view. Click the Share link and choose Embed on my site
- You may be prompted to share the map. Click Change Permissions then click the Change link under Who has access…and choose Public.
- The Embed on my site option will popup a window displaying your embed code. Copy that code.
Add To Widget
- Edit your Layers Page and add a Content Widget
- Delete the default second and third columns by expanding them and clicking the red trash can icon
- Expand the remaining column and click the Columns option on the toolbar and choose 12 of 12 to make it full width. You can use these map codes in any width widget column – this is just for the take of the tutorial
- Choose your Layout etc from the design bar on the right.
- In the column’s Excerpt area, click the Code View button </>
- Paste your embed code
- Locate the width and height settings in the code. In the below example, the width is 640 and the height is 4801<iframe src="https://www.google.com/maps/d/embed?mid=1XJ2aePONMjfTyzGVG4IgndD5RVE&hl=en" width="640" height="480"></iframe>
- Change the width to 100% and the height to your desired value in pixels. Example:1<iframe src="https://www.google.com/maps/d/embed?mid=1XJ2aePONMjfTyzGVG4IgndD5RVE&hl=en" width="100%" height="400"></iframe>
- Click the code view button </> again to switch back to visual view. Your map should now be embedded in the column and you may proceed to customize the widget further if needed.
Need to put a contact form next to your map? Simply change the map column to 6/12 (or whatever width you like) and add a second column. Click the code button in the editor to paste your contact form shortcode in the new column.
For help with Advanced options like removing padding and margins, see How to Use the Advanced Design Bar Option for Custom Classes, Margins and Padding
Did you know?
Our friends at Jetpack are doing some incredible work to improve the WordPress experience. Check out Jetpack and improve your site's security, speed and reliability.