Embed Google Map – How to WordPress

Adding a Google Map to your WordPress site is relatively easy. You will often see then in a Contact Form page or in a footer of a website. This post will provide instructions on how to:

1. Add a simple Google Map with your location to your Website – if you have a Google Business listing, you will easily find your business. If not you can drop a Pin to provide the location.

2. Create a Google map with multiple locations that can be embedded into your website

Google is great as it looks after Directions and allows user to save places to their own maps account.

Simple Instructions to add your Business Location within Google Maps to your Website

  1. Open Google Maps
  2. Search for a place, in this example, it is Galway City but you can get much more specific. If your business is listed in Google My Business, your business will appear when searched.
    To add a Pin to a Map you just have to Long-press on the screen to drop a pin. The address or location will pop up at the bottom of the screen.Tap on the location to open either share it, save it, or add a label to it.
  3. Click on the Share Button. A pop up map will appear.
  4. Select the Embed a Map Tab and copy the HTML – see the pink highlight box in image below. You can also change the size of the map in the drop down.

Simple Google Map Embed5. Back in WordPress, go to the Page or Post or Widget area where you want the Google map to be displayed.

6. Click on the Text Tab (red circle in image) and paste in the html where you want the Map to appear. The dimensions of the map can be changed here also. Width can be changed to 100% for instance (see red rectangle) – important to do this to ensure map is responsive (appears properly on mobile phone screens)

WordPress Text Tab within Visual Editor to paste Embed Code 7. When you click on the Visual Tab, your Google Map will be displayed.

Instructions to add multiple locations to Google Map embedded to your Website

I deliver training for New Frontiers in IT Sligo, LyIT, IT Tralee, GMIT, DKIT and WIT ArcLabs. Here are the instructions to embed a map with those locations featured.

  1. Open Google maps. Sign In.
  2. Within Menu Tab, click on Your Places
  3. Click on the MAPs TAB in the pop up that appears
  4. Select Create Map
  5. Add a Title to the Map by clicking on Untitled Map. You can also add a description
  6. You can also rename the ‘Untitled Layer’ to something appropriate
  7. In the Map Search Bar, search for your first location. When you find it select add to Map.
  8. Add more locations. In image below it shows how the 2nd location was added. ArcLabs, WIT was added first and then GMIT iHubs.

Google Maps Multiple Locations

9. Add more locations and Save map. You can preview all the locations. We can now move to Embed this Google Map on a website. Click on PREVIEW icon (pink square in image below)

Google Maps Multiple Locations Steps to Embed

10. Click on the Share button first and change Permissions to Public (step 1 in image above)

11. Click on the Three Dots Menu to find the Embed Option. Copy the HTML Code provided (step 2 in image above)

Bonus – Plugin to Display a Pdf

WonderPlugin PDF Embed plugin available from the Plugin Directory allows you to display a multi page pdf on your WordPress site – just like the one below. The summary instructions are to: Upload the Pdf to the Media Library, copy the link created for the file, add the Wonderplugin shortcode and replace the link with one from your domain.  It will look like this.

WonderPlugin PDF

By using % for the width attribute, the PDF viewer is responsive. The Pdf document can be Downloaded and/or Printed by accessing the Menu on top right denoted with the double arrow icon >>

Here is the output:

 

As alway I hope you enjoyed this post. Comments and social shares welcome.

regards

donncha (@donnchadhh)

About

Startup Web Training.com details my web creation training and design solutions. Feel free to contact me to discuss your requirements.

Tagged with: , , , ,