Embedding a Custom Google Map in WordPress

It is easy to embed into your WordPress page a custom, interactive map that you have created in Google’s My Maps.  For a detailed guide on how to create a map in Google’s My Maps, download this Google Maps handout.  On the Google My Maps site (http://maps.google.com), sign in, create and annotate your map.  

When you are ready to output your Google Map to embed it into your WordPress page, click the Link hyperlink at the upper right of the Google My Maps screen. A small pop up window will appear offering a choice of code snippets for copying.  Skip this and instead click on the Customize link at the bottom of the popup screen.  

1. On the next screen,  choose the desired map size or set your own custom size.  

2. Preview your map, set  the zoom level and drag your map within the Preview box to set the view as you wish it to display the map on your WordPress page.  The resulting map will be interactive. The user will be able to move the map and click on the symbols to open your annotations.  Real-time features such as Traffic and Weather do not appear to be able to be embedded, so try this first with a fairly straightforward map.  

3. When you have completed your customization, select and copy the code shown below the custom map in the window labeled “Copy and paste this HTML to embed in your website.”  

4. In WordPress, in your article’s Edit Post window, click on the HTML tab to highlight it and bring forward the window that shows HTML code.  Paste the copied code into your WordPress HTML window where you wish the map to appear.  

View Larger Map
Preview your post. If your map does not appear and you see only the code itself, return to the edit window. If you have accidently pasted the code into the Visual mode screen, select and delete the code. Then click the HTML tab again, make sure the HTML view, with HTML code is shown, and paste the copied code again. To see another example of a Google Map embedded in two different ways (standard and this custom version), see my blog at http://sites.lafayette.edu/faccipop/.

Leave a Reply

Your email address will not be published. Required fields are marked *