Adding Google Maps to your Website

After trying a few different WordPress plugins for Google Maps, we’ve decided that the Inline Google Maps Plugin for WordPress from Avi Alkalay is the best one to use.

It is useful for:

• Task A: you want to add a simple map to your site with a specific location at the centre of the map
• Task B: you want to add a map with several markers on it, each with a separate description
• Task C: you want to add a map with many markers on it, each with a separate description

Avi provides some pretty good instructions on his plugin page. So what we’ll do here is try and provide a simplified walk through.

Activation

To activate this plugin you need to first register a Google Maps API key with Google. These are free and very quick to get from here: Google Maps API Key – just make sure you register with your domain name (e.g om4.com.au).

Copy your API key.

Now activate the Inline Google Maps plugin using Dashboard, Plugins.

Then navigate to Dashboard, Settings, Inline Google Maps and paste your API key in the settings page and save your changes.

Task A – Add a Simple Map

If you know how to create a link using the visual editor, you’ll find this a snap. If you don’t … well, it isn’t hard anyway.

First of all, head off to Google Maps and find the location you want to appear at the centre of your map. Double click the spot on the map so it centers the map on that point.

Now click the Link button at the top right of the map and you will see 2 separate fields that contain links to the map point. Select the first one (the one under the label “Paste link in email or IM”) and copy the full link to your clipboard (Ctl C or Cmd C).

Now go to your WordPress Dashboard. Open up a page or post for editing, and make sure you are using the Visual Editor. Now there are two steps:

• Select the text you want to use as the name of the link and click the Link icon (the chain) in the toolbar
• Paste the link from your clipboard into the Link URL field, and in the Title field type googlemap – now press Insert

Save your post or page and click View this Page to see your map.

Task B – Add a Map with Markers

This is more complicated.

You must use the HTML editor this time, not the Visual Editor.

Once you get more experienced, you can shortcut this a bit, but for your first map you should do the following.

Using a spreadsheet or table in a word processor, go and collect the latitude/longitude for a) the centre point of the map you want to display; and b) each marker on the map.

To find the Latitude / Longitude (or LatLong or ll for short) for a point on a Googe Maps page, right click the area and click the What’s Here item. When the green arrow shows up in the correct point, click the green arrow and the LatLong will be displayed. Copy the LatLong to the clipboard.

Important: when you use the LatLong, remember to remove the space between the latitude and the longitude.

So this is what you copy from Google Maps: -31.960683, 115.808601
And this is what you use in your actual map: -31.960683,115.808601 (space has gone)

Now paste the LatLong into your spreadsheet, and repeat until you’ve collected all the LatLong pairs you want to use. Check you LatLong pairs by copying, going to maps.google.com and pasting the LatLong pair into the search box – this should bring up the expected location, if not, go back and find the correct LatLong. When you first start doing a map, you’ll find it is very easy to get the wrong LatLong pairs, so be prepared to go back and double check and update your spreadsheet.

Once you’ve got your LatLong pairs ready, you can start preparing your map. I’m going to prepare a map showing the OM4 office location, with the map centred nearby. My list looks like this.

Lat/Long of Map Centre: -31.960683,115.808601
Lat/Long of OM4 Office: -31.960655,115.807303 (316 Onslow Rd)

Alright, time for a bit of copy/paste. Copy this block of text into your WordPress page or post:

<dl title="googlemap;w:400;h:400">
<dt><a href="http://maps.google.com/?z=15&ll=ABC&om=0">Center of map</a></dt>
<dt><a href="http://maps.google.com/?ll=XYZ">map</a></dt>
<dd><strong>OM4, 316 Onslow Rd, Shenton Park WA 6008 </strong>
<a href="http://om4.com.au">OM4</a>
</dd>
</dl>

Now, in the line that has Center of Map in it, replace ABC with the actual LatLong value you want your map to be centered on.

In the next line (that starts with <dt> – the first and only map marker for this map), replace the XYZ with the actual latlong value you want the marker to appear at.

Now edit the marker text – in the sample I’ve included the OM4 company name and address, followed by a link to our website. You can include whatever you want between the <dd> and </dd> tags.

If you want more than one marker, copy the <dt> and <dd> lines that are are used to define the OM4 office marker and paste them below. Use a new latlong and a new description for that marker.

Note in the example I’ve just shown the OM4 name and address and a link to our website. But you can use most HTML here, for example if you want to add images such as a logo or icon.

Task C – Add a Map with many Markers using KML

This method assumes you have already created a KML file. This KML file should include all the markers and information that you want to include in your map. Once you have created your KML file, follow the steps below.

Upload your .kml file to your website using Dashboard -> Media -> Add New. Once the file has been uploaded, copy the File URL.

Now go to Google Maps, and paste the kml file URL into the search field. Google Maps should display all of the markers from your KML file.

Pan and/or zoom the map until you are happy with it, then click the “Link” button on the top right of the map. Copy the link from to the map.

Return to your website, and copy this block of text into your WordPress page or post where you want the map to appear

<dl title="googlemap;w:400;h:400">
<dt><a href="MAPURL">Center of map</a></dt>
<dt><a title="kml" href="KMLURL">markers</a></dt>
</dd>
</dl>

Replace MAPURL with the URL to the map that you obtained from the previous step.

Replace KMLURL with the URL to your .kml file (from the start of this task).

Save your post/page.

The page should now display a google map that contains all of the data from your kml file.