Embed Google maps into your website or blog

How to add an interactive customized My Places map to any web page.

By Donald Ritchie

In my previous tutorial, I showed you how you can easily use Google's My Places feature to create a customized map - for example, to show your customers how to get to your office, or to plot the route of a trip that you're planning. This time, I'll explain how you can embed the map in a website or blog. (To review the original article, see Getting started with My Places in Google Maps.)

Embedding a map in this way can add a lot of value to your site. It will give your visitors a quick overview of a location, route, or other area of interest. The map will be fully interactive, which means that visitors will be able to pan and zoom it, search for nearby places (such as restaurants), generate driving directions, and do other useful things - all without leaving your page. And if that's not enough, they can click a hyperlink to open the map in a full-size Google Maps window.

Figure 1 shows an example of what we will achieve. Getting there is relatively straightforward, and only requires a minimum of HTML coding skills.

Figure 1

Figure 1: An example of a web page hosting an interactive map.

First steps

For this exercise, I'll assume that you've already created your map in My Places. If you haven't - and if you're not sure how to do so - review the article mentioned above.

If you don't already have Google Maps open, go there now (http://maps.google.com/maps) and click the My Places button at the top of the panel to the left of the map. You will be prompted to log into your Google account if you haven't already done so.

Figure 2

Figure 2: Click on the map's title in the left-hand panel to open the map.

You should now see a list of all your maps in the left-hand panel (Figure 2). Click on the title of the one that you want to embed. The map should now appear in the main part of the window.

Get the link

Next, look for the Link button. This is the right-most of the three buttons just above the top-right corner of the map (Figure 3). Click this button to open the dialog shown in Figure 4.

Figure 3

Figure 3: Use the right-
most of these buttons
to get the link.

Figure 4

Figure 4: This window gives the URL
and the code for embedding the map.

In the previous article, we saw how to get a URL that you can send to the people that you want to share your map with. To recap, you check the Short URL option, and then highlight and copy the contents of the box immediately below it. When you send this URL to a co-worker or friend, they will be able to click on it to open the map.

You can use almost the same technique to add a simple hyperlink to your web page or blog post. The hyperlink, which would point to this same URL, will take your site visitors directly to a full-screen version of the map. To achieve that, simply create a hyperlink in your HTML in the usual way, using this same URL as the target. Here's an example of the code (Figure 5 shows how this might look on your page):

<p>For a map showing the venues for the meetings, 
please <a href="http://g.co/maps/ysgw5">click here</a>.</p>
Figure 5

Figure 5: You can point to the map with a simple hyperlink.

Embed the map

Figure 6

Figure 6: Use this window to customize
the map and get the code for embedding it.

But that's not really what we want to achieve. Our aim is to show the actual map - or, at least, a thumbnail of it - right on the page, like in Figure 1.

To do that, click "Customize and preview embedded map" in the dialog shown in Figure 4. This will open a window like the one in Figure 6. Use the controls at the top of this window to select the required size of the map (small, medium or large, or specify a custom size in pixels). As you do so, the preview (just below the size controls) will change to reflect your choice.

Still in this window, you can change the way the map is to be displayed. To do so, click one of the buttons at the top of the preview map. The buttons are: Map (a road map; this is the default), Sat (satellite view), Ter (terrain view; this is a simplified topological map) and Earth (this shows a 3D image of the area; the visitor will need the Google Earth plugin in order to see it). The choice you make here affects both the thumbnail and the full-size version of the map.

Next, scroll to the bottom of the window. Highlight the HTML code in the box, and copy it to the clipboard. Then paste the HTML code into your web page. You can paste it at whatever point on the page you want the thumbnail to appear.

If you wish, you can apply styling to the thumbnail, just as you can to any other block element in your HTML. This is particularly useful if you want to float the thumbnail. To achieve that, wrap the pasted-in code in a div, and apply a float:left or float:right style to it, as appropriate.

Finishing up

Keep in mind that, if you edit the map in My Places (for example, if you alter a route or add a marker), the edits will automatically show up in the thumbnail. But if you change the zoom factor, or if you pan the map so that it's centered on a different point, the thumbnail won't reflect those changes. If that's not what you want, go back to the preview window (Figure 6), copy the HTML code again, and paste it into the page.

And that's all there is to it. With a few simple steps, you've added an interactive customized map that your visitors will appreciate - and which will make a very professional enhancement to any website or blog.

December 2011

Please note: The information given on this site has been carefully checked and is believed to be correct, but no legal liability can be accepted for its use. Do not use code, components or techniques unless you are satisfied that they will work correctly with your sites or applications.

If you found this article useful, please tell your friends: