How to embed a Google Map on your website

Embedding a Google Map on your website is very easy and a great feature for businesses to display their office locations for clients and customers.

In this example we will use the ‘Giants Causeway Visitors Centre’ as our location.

Here are the steps:

1. Go to Google Maps

2. In the search box enter ‘Giants Causeway Visitors Centre’ (as below)

Google Maps Search

Google Maps Search

3. As you can see from the picture (below) it’s identified with the ‘A’ marker

Google Maps Marker A

Google Maps Marker A

4. Click on the Giants Causeway Visitors Centre link (circled above) and a balloon will appear on the right hand side giving more details on the location (as below).  By doing this you are confirming the correct marker

Google Maps Search Marker

Google Maps Search Marker

5. Now to get this map for your website simply click the ‘Link’ link (circled below).  Two options are displayed:

  1. a simple link for email etc
  2. html iframe embed code for your website
Google Maps Link Options

Google Maps Link Options

6. Copy the html iframe embed code and paste into the html of your website and that’s all there is to it. (The ‘Customise and preview embedded map’ link simply allows you to change the size of the embedded map – I’ve used the default size here).

Here’s what the final map looks like (it includes a link to the bigger map on Google).

Whilst this example doesn’t use a Google account you will need one if you want to add detail to a location balloon, such as an office.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s