I was helping a colleague with her WordPress-based website this afternoon and in the process, I learned something new myself – how to add Google Maps to the site.
At first I thought that I would have to download a plugin. The map was to be placed in the sidebar, below the contact information. Once I discovered the Text Widget (within Appearance – Widgets).
- Drag the widget into your sidebar
- Go to Google Maps and type in the address of the place you want to map
- Once your location has been mapped, click on the Link option found on the top right of the map area.
- If you are happy with the view of your map, simply copy the code in “Paste HTML to embed in website” from the Link pop-up. If you want to customize the look of your map prior to embedding it on your website, click on “Customize and preview embedded map”. Here, you can customize the size. The code will change as you make changes. In my case, the map was 290px by 290px. As this is not particularly large, I did not want the white address bubble to display by default. To remove this, you have to comb through all the jibberish and look for
iwloc=A&and replace it with
iwloc=near&. Further down in the code, you should also find
iwloc=A". This also needs to be replaced with
iwloc=near". One last thing I added to the code was
target="_blank"to the View Larger Map
- Once you are happy with how your map will be displayed, copy the code and paste it into the text widget
Save, and presto, the map displays as expected in the sidebar!