Add (Embed) a Custom Google™ Map in your Website

Introduction

This free Google Maps™ tutorial has been produced by White Rock Solutions as part of a series of complete and comprehensive step by step guides to using Google Maps™ to add a searchable interactive Google™ location map to your web site.

Overview : Add (Embed) a Custom Google™ Map in your Website

After signing in to Google™ with your Google™ account  you can personalize, link to or even embed your custom Google Maps™ in a new or existing website.

Part 1 – Pre-Requisites for Using My Maps

Part 2 – Paste Link to Custom Google™ Map “Created by me” in an Email or Instant Message (IM)

Part 3 – Paste default HTML to Embed Custom Google™ Map “Created by me” in a website

Part 4 – Customize HTML to Embed Custom Google™ Map "Created by me" in a website

Part 5 – Example - Embed Custom Google™ Map in an existing web page

Pre-Requisites for Using My Maps.

1.1 – Google™ Account

To use the My Maps feature of Google Maps™ you will need an existing Google™ account. Alternatively, you can create a new Google™ account.

1.2 - Sign in to Google Maps™ with your Google™ Account

(a) Open the Google Maps™ website in your web browser.

(b) Click the Sign in link in the top right hand corner of the page to sign in to Google™ with your Google™ account.

(c) Enter your Google™ account Email and Password details and click the button.

Paste Link to Custom Google™ Map “Created by me” in an Email or Instant Message (IM)

If not already signed in, sign in to Google™ with your Google™ Account. Open the Google Maps™ website in your web browser and select the My Maps <tab>.

(a) In the “Created by me” list of maps, ensure the Map you would like to share is selected (). If not, click using your left mouse button the check box () to the left of the Map title in the list to select the Map.

(b) To LINK to the currently displayed custom map, click “Link to this page” above the top right hand corner of the map to open the link options.

(c) By default, “Paste link in email or IM” is selected (highlighted). Select Copy from the browser Edit menu to copy the generated link. Alternatively press the “Ctrl” key and the “C” key on the keyboard simultaneously to copy the link.

(d) Switch to your email application or IM (Instant Messaging) application and press the “Ctrl” key and the “V” key on the keyboard simultaneously to paste the generated link into an email or IM.

Paste default HTML to Embed Custom Map “Created by me” in a website

If not already signed in, sign in to Google™ with your Google™ Account. Open the Google Maps™ website in your web browser and select the My Maps <tab>.

(a) In the “Created by me” list of maps, ensure the Map you would like to share is selected (). If not, click using your left mouse button the check box () to the left of the Map title in the list to select the Map.

(b) To embed the currently displayed custom map in a website, click “Link to this page” above the top right hand corner of the map to open the link options.

(c) By default, “Paste link in email or IM” is selected (highlighted). Position the mouse cursor over the first part of the code (<iframe) in the “Paste HTML to embed in website” box and click with the left mouse button to highlight the code that has been generated.

(d) Select Copy from the browser Edit menu to copy the code that has been generated. Alternatively press the “Ctrl” key and the “C” key on the keyboard simultaneously to copy the code.

(e) Complete the following steps: -

1. Switch to your HTML/Text editor Application.
2. Open the web page where you would like to embed the search results.
3. Position your mouse cursor where you would like to insert the code, click with your left mouse button and press <Enter> on the keyboard to insert a new line (Refer to Part 5 of this tutorial – Example - Embed Custom Google™ Map in an existing web page).
4. Press the “Ctrl” key and the “V” key on the keyboard simultaneously to paste the code that has been generated into the web page.
5. Select Save from the HTML/Text editor File menu to save the updated web page file. Alternatively press the “Ctrl” key and the “S” key on the keyboard simultaneously save the updated web page file.
6. Upload the updated web page to your website.

Customize HTML to Embed Custom Google™ Map "Created by me" in a website

If not already signed in, sign in to Google™ with your Google™ Account. Open the Google Maps™ website in your web browser and select the My Maps <tab>.

(a) In the “Created by me” list of maps, ensure the Map you would like to share is selected (). If not, click using your left mouse button the check box () to the left of the Map title in the list to select the Map.

(b) To embed the currently displayed custom map in a website, click “Link to this page” above the top right hand corner of the map to open the link options.

(c) Click “Customize and preview embedded map” in the bottom right of the link options box.

(d) Customize Map Size

• Small
  • 300px Width 300px Height
• Medium {Default}
  • 425px Width 350px Height
• Large
  • 640px Width 380px Height
• Custom
  • [Custom]px Width [Custom]px Height

(e) Customize Initial Map Position and Zoom Level

A map Navigation and Zoom Control (GSmallMapControl) is overlayed on the top left hand corner of the map. Use the directional arrows to pan (move) the map up, down, left or right. The “+” button can be clicked to zoom in on the map and the “-“button can be clicked to zoom out on the map.

(e) Customize Initial Map Type

A Map Type Control is overlayed on the top right hand corner of the map. Use the Map Type Control to select between Map (Street), Sat (Satellite) or Ter (Terrain) views.

(f) Once you have finished customizing the map, position your mouse cursor over the code that has been generated and click with your right mouse button. Click “Select All” to highlight the generated code. Press the “Ctrl” key and the “C” key on the keyboard simultaneously to copy the code.

(g) Complete the following steps: -

1. Switch to your HTML/Text editor Application
2. Open the web page where you would like to embed the custom map
3. Position your mouse cursor where you would like to insert the code, click with your left mouse button and press <Enter> on the keyboard to insert a new line (Refer to Part 5 of this tutorial – Example - Embed Custom Google™ Map in an existing web page).
4. Press the “Ctrl” key and the “V” key on the keyboard simultaneously to paste the code that has been generated into the web page.
5. Select Save from the HTML/Text editor File menu to save the updated web page file. Alternatively press the “Ctrl” key and the “S” key on the keyboard simultaneously save the updated web page file.
6. Upload the updated web page to your website.

Example - Embed Custom Google™ Map in an Existing Web Page

If the existing web page is based on a table layout then position the mouse cursor before the closing </td> tag of a table cell where the embedded Custom Map should appear and press <Enter> on the keyboard to insert a new line and paste the code that has been generated.