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 Images, Photos and Videos to your Custom Google Maps™
After signing in to Google™ with your Google™ account you can personalize your custom Google Maps™ by adding Images, Photos and Videos to your Placemark (Marker), Line and Shape description Information (Info )Window contents.
Part 1 – Pre-Requisites for Using My Maps
Add an Image or Photo to a Placemark (Marker), Line or Shape Description
Add a Google™ Video to a Placemark (Marker), Line or Shape Description
Add a YouTube Video to a Placemark (Marker), Line or Shape Description
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.
Add an Image or Photo to a Placemark (Marker), Line or Shape Description
Option 1 : Using the Insert Image Icon on the Rich Text Toolbar
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 edit 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) Click the 
button to activate edit mode and display the Map and any existing Placemark, Line or Shape properties.
(c) Click the Placemark, Line or Shape to be edited in the list of Placemarks, Lines & Shapes below the map properties to the left of the map.
(d) Click the “Rich text” link to display the Rich Text toolbar.
(e) Click inside the description field to position the mouse cursor where the Image or Photo should be inserted.
(f) Click the 
icon on the Rich Text toolbar.
(g) In the pop up window enter the full URL address for the online location of the Image or Photo that should be inserted. In this example: -
- http://www.storybridgeadventureclimb.com.au/153666.img
Important Note
The Image or Photo must already be hosted online. There is no facility to upload an image or photo via the Rich Text Toolbar. Use a service such as Google PicasaWeb to upload your photos and host them online.
(h) Once you have finished editing the Placemark/Line/Shape properties click the 
button to save your changes or alternatively click the 
button to exit without saving any changes.
(i) Click the 
button to save your map. Alternatively, click the 
button to save changes to your map and exit edit mode.
Add an Image or Photo to a Placemark (Marker), Line or Shape Description
Option 2 : Edit the Placemark/Line/Shape description HTML directly
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 edit 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) Click the button to activate edit mode and display the Map and any existing Placemark, Line or Shape properties.
(c) Click the Placemark, Line or Shape to be edited in the list of Placemarks, Lines & Shapes below the map properties to the left of the map.
(d) Click the “Edit HTML” link to display the HTML code.
(e) Click inside the description field to position the mouse cursor where the HTML code for the link to the Image or Photo should be pasted.
Important Note
The Image or Photo must already be hosted online. There is no facility to upload an image or photo. Use a service such as Google PicasaWeb to upload your photos and host them online.
In this example, we paste the “HTML to embed in website” code generated when you click “Link to this Photo” whilst viewing a photo in Google PicasaWeb.
Therefore, to insert the image including a link to the original image on PicasaWeb select and paste all of the "HTML to embed in website" code (Example below).
Alternatively, to paste the image only without a link to the original only select and paste the "HTML to embed in website" code between the <img......../> tag (Example below : yellow highlighted code).
(f) Once you have finished editing the Placemark/Line/Shape properties click the button to save your changes or alternatively click the button to exit without saving any changes.
(g) Click the button to save your map. Alternatively, click the button to save changes to your map and exit edit mode.
Add a Google™ Video to a Placemark (Marker), Line or Shape Description
Step 1 : Select a Google™ Video to Embed
(a) Open the Google™ Video website in your web browser.
(b) Enter a search term and select the “radio” button “videos hosted by Google”. Click the 
button to search Google™ Video.
This example performs a search for videos associated with “Story Bridge”.
(c) Browse through the Results in the left hand column and click a video to select it.
(d) The video will start to play in the main content area.
(e) Click the “Watch this video on video.google.com“ link.
(f) Click the “Embed video“ link to display the HTML code for embedding the Google™ Video.
(g) To select the code, click anywhere on the code with your left mouse button. The code becomes highlighted.
Press the “Ctrl” key and the “C” key on the keyboard simultaneously to copy the code.
Example Code: Generated by Google™ Video
Important Notes
The order and the value of certain parameters of the code generated by Google™ Video differs from the sample code provided in the official Google Maps™ User Guide. There are also subtle syntax differences: -
Sample Code : Google Maps™ User Guide
Some users have experienced problems using the code generated by Google™ Video to embed videos in Google Maps™. If you experience any problems using the code generated by Google™ Video use the sample code from the Google Maps™ User Guide instead and just replace the “docId=-274981837129821058” in the sample code with the “docid=xxxxxxxxxxxxxxxxxxx” from the code generated by Google™ Video for the specific video you would like to embed.
Sample Code : Google Maps™ User Guide – Using different docid
Add a Google™ Video to a Placemark (Marker), Line or Shape Description
Step 2 : Embed Google™ Video in Placemark/Line/Shape Description
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 edit 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) Click the button to activate edit mode and display the Map and any existing Placemark, Line or Shape properties.
(c) Click the Placemark, Line or Shape to be edited in the list of Placemarks, Lines & Shapes below the map properties to the left of the map.
(d) Click the “Edit HTML” link to display the HTML code.
(e) Click inside the description field to position the mouse cursor where the HTML code for the embedded video should be pasted. In this example, paste the “embed video” code copied in Part 4 – Step 1 : Select a Google™ Video to Embed.
(f) Once you have finished editing the Placemark/Line/Shape properties click the button to save your changes or alternatively click the button to exit without saving any changes.
(g) Click the button to save your map. Alternatively, click the button to save changes to your map and exit edit mode.
Add a YouTube Video to a Placemark (Marker), Line or Shape Description
Step 1 : Select a YouTube Video to Embed
(a) Open the YouTube website in your web browser.
(b) Enter a search term and click the 
button to search YouTube.
This example performs a search for videos associated with “Story Bridge”.
(c) Browse through the Results in the left hand column. Move the mouse cursor over the video thumbnail or the video title and click to select and play the video.
(d) To select the “Embed” code, click anywhere on the code with your left mouse button. The code becomes highlighted.
Press the “Ctrl” key and the “C” key on the keyboard simultaneously to copy the code.
Example Code: Generated by YouTube
Important Notes
The order and the value of certain parameters of the code generated by YouTube differs from the sample code provided in the official Google Maps™ User Guide. There are also subtle syntax differences: -
Sample Code : Google Maps™ User Guide
Some users have experienced problems using the code generated by YouTube to embed videos in Google Maps™. If you experience any problems using the code generated by YouTube use the sample code from the Google Maps™ User Guide instead and just replace the unique YouTube video reference in the sample code with the the unique YouTube video reference from the code generated by YouTube for the specific video you would like to embed.
Sample Code : Google Maps™ User Guide – Using different YouTube video reference
Add a YouTube Video to a Placemark (Marker), Line or Shape Description
Step 2 : Embed YouTube Video in Placemark/Line/Shape Description
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 edit 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) Click the button to activate edit mode and display the Map and any existing Placemark, Line or Shape properties.
(c) Click the Placemark, Line or Shape to be edited in the list of Placemarks, Lines & Shapes below the map properties to the left of the map.
(d) Click the “Edit HTML” link to display the HTML code.
(e) Click inside the description field to position the mouse cursor where the HTML code for the embedded YouTube video should be pasted. In this example, paste the “embed” code copied in Part 6 – Step 1 : Select a YouTube Video to Embed.
(f) Once you have finished editing the Placemark/Line/Shape properties click the button to save your changes or alternatively click the button to exit without saving any changes.
(g) Click the button to save your map. Alternatively, click the button to save changes to your map and exit edit mode.
