How to Embed a Google Map in a Web Page

by Martin Malden

Example of map. If you’re running a travel or locally focused website, making use of Google Maps is a great way to highlight areas of interest and engage your visitors.

In your Google account (under Maps) you can create a map (via the ‘create a new map’ link) and then customize it to include areas you want to highlight.

The beauty of using Google maps is that they’re so widely used now that site visitors are not only used to seeing them, they will know how to interact with them.

How to set up and customize a Google map

So here are the steps for creating and customizing a Google map.

Step 1:

In your Google account make sure Maps is added then access it.

In the map window on the right of the screen that comes up, drag the map to the area you want it to cover and then click the ‘create new map’ link (above and to the left of your map):

Create a new map.

Click the 'Create a new map' link

Step 2:

On the next page enter a title and description for your new map, and decide whether you want it to be public or Unlisted, then click ‘Save’:

Title and Description for Map.

Add a title and description for your new map

Step 3:

To add a placemark click the placemark icon at the top left of the map:

Adding a placemark.

Click the icon top left of the map to add a placemark

When you move your cursor off the placemark button the pointer will change. Move it to the place you want to mark, making sure the X that’s below the pointer is on the actual location you’re marking and click.

As soon as you make the click, a small window will open, enabling you to add a title and description for the place you’re marking:

Add a title and description for your place.

Add a title and description for the place you're marking

Add your title and description, click OK, and your place will be marked. I like to write quite extensive descriptions because it’s more engaging for my visitors.

When you’ve finished adding placemarks click ‘Done’:

Click 'Done' when you've added all your placemarks.

Click 'Done' when you've finished adding placemaarks

Your customized map will now be saved, and the next step is to embed it in your site.

How to embed the map in your site

Step 1:

Go to your Google Account and click ‘My Maps’ (Lighter text link next to Maps)

The my maps link.

Click the 'My Maps' link to access the map you customised

From the screen that comes up click on the link for the map you want to embed:

Select the map you want to embed.

Click on the map you want to embed

Step 2:

When your map comes up click the ‘Link’ link in the top right corner:

Click the link link top right.

Click the 'Link' link at the top right

Select the option you want. If you’re embedding the map on a web page you would choose the second option but, before doing so, click the ‘customise and preview embedded map’ link.

Linking options.

Click the link to see customisation options

A window will open, offering you some customisation options:

Select your preferred customisation options.

Select your options then copy the code in the third section

Make your selections in sections 1 and 2, and then copy the code from section 3.

Step 3:

Make sure you define a div for the map on your page (so you can, for example, centre-align it) and paste the code into the div.

Save your page and you’re all done.

Embedding Google Maps in your site is a great way to engage your visitors because they are interactive.

If you take advantage of the Title and Description options when you’re marking places you can add a lot of interest to your maps and pages.

For an example of how you can use them to hook in visitors, click any of the place marks in the map on this page (you may need to scroll down a bit to see the map).

OK, if you have any questions leave us a comment 🙂

Cheers,

Martin Malden

Please share this article - I'm counting on you!
       
Found this article useful? Get free updates!

Get regular updates, plus a free eBook on how to set up a business online - join us!

Your details are safe with me.
My Privacy Policy.

Previous post:

Next post: