How to embed video and photo in a Google interactive map

You can add photo and video to a Google Maps Engine custom map using two free tools: Flickr and Youtube. This is a useful feature for multimedia reporting, marketing or just personal use.

To embed your own multimedia contents in a Google map, you first need to upload videos and photos somewhere on the web, and then copy/paste the links to the map. Flickr is a free web service that can host your photos, and Youtube is a free service to host videos.

What an interactive photo/video map looks like

As an illustration, I put together a simple map showing some campaign videos and photos of Obama, Romney and Johnson in 2012. (Let’s assume I’m the one who took these photos/videos and have uploaded them to my Flickr and Youtube accounts). FYI: Gary Johnson is the Libertarian Party nominee.

As you can see in the map below, I grouped the videos and photos into three layers for each of the three candidates, and each layer can be toggled on and off – this is a nice feature if you have a large number of placemarks that you want to put into different categories.

How to add photo/video to the map

Assume you already have a map created, here is a quick guide on how to insert photos and videos. If you don’t know how to create a basic Maps Engine map, watch the video tutorial at end of this post.

Place a new placemark on the map, type up a label name and some descriptions, then click the small camera icon at the lower right corner of the placemark window, as shown in the screenshot below:

add placemark

In the next dialog window, you have several options to add photos or videos. On the left of the window, you will see “Google Image Search,” “URL” and “Video search.” You can type keywords to search for online images and choose from the search results, you can paste a link to an image (such as your own Flickr image), or you can do a video search and choose the video you wan to use. Either way, when you make the selection and click “Select” at the bottom of that window, the photo or video will be added to the placemark.

add placemark photo video

Trick in adding Flickr images

Adding Flickr photo to the map is a bit tricky: if you simply copy the share link Flickr provides you and paste it in the Google map, it won’t work – in the map you will see a black background instead of the image. Why? Because the map needs an image link that has a proper file extension such as .jpg and the default Flickr share link does not have one.

Flickr1So here’s a workaround. First, click the desired photo in your Flickr photostream to view a larger version; in the setting panel to the right of the photo, click the three-dot icon for “more actions” then click Download/All Sizes in the dropdown menu, as shown in the screenshot on the left.

Notice that we are NOT downloading the photo, we just want to check the several size options of this photo.

In the next window, you will see a collection of sizes for the photo; if you know the size you need, select it and click “View all sizes” to proceed. If you do not know what size to choose, just go ahead with the default selection and click “View all sizes” – the next window will present all the sizes where you can visually compare all the sizes and choose one you need.

You will then see a page looking similar to the screenshot below. You can try clicking different sizes and visually inspect the corresponding images until you find a size that fits your needs. If you are using a mac computer, right click on that photo and choose “copy image location,” that’s the image link you need for the map.

add flickr photo to google map

As to how to create a new Google Maps Engine map and paste the photo and video links to the map, you may want to go through a short video tutorial:

Related posts:

Mu Lin
Follow me

Mu Lin

Founder at MutuStar LLC
Dr. Mu Lin is a digital journalism professional and educator in New Jersey, United States. Mu Lin manages MutuStar LLC, an online marketing company. He also manages MulinBlog Online J-School (www.mulinblog.com/mooc), a free online journalism training program.
2015 course schedule:
- Audio Slideshow Storytelling (January, July)
- Introduction to Social Media Marketing (February, August)
- Writing for the Web (March, September)
- Google Mapping for Communicators (April, October)
- Introduction to Data Visualization (May, November)
- Introduction to Web Metrics and Google Analytics (June, December)
Mu Lin
Follow me

About Mu Lin

Dr. Mu Lin is a digital journalism professional and educator in New Jersey, United States. Mu Lin manages MutuStar LLC, an online marketing company. He also manages MulinBlog Online J-School (www.mulinblog.com/mooc), a free online journalism training program. 2015 course schedule: - Audio Slideshow Storytelling (January, July) - Introduction to Social Media Marketing (February, August) - Writing for the Web (March, September) - Google Mapping for Communicators (April, October) - Introduction to Data Visualization (May, November) - Introduction to Web Metrics and Google Analytics (June, December)
This entry was posted in Digital tools and tips. Bookmark the permalink.

17 Responses to How to embed video and photo in a Google interactive map

  1. Great blog here! Also your website loads up fast!

    What host are you using? Can I get your affiliate
    link to your host? I wish my web site loaded up
    as fast as yours lol

  2. felixdeportu says:

    Is there a way to add just audio without video?

  3. GME Audio says:

    Did you find out if it is possible to add audio?

  4. Tony says:

    Hey great tutorial on this. I never thought about using an image within a google map. It is a great way to say, have a corner image with the general, static map area, and the actual, zoomed in map! Thanks a lot for this..!

  5. Great and clear to follow way out. Thanks. Only you assume everyone’s using a mac (“If you are using a mac computer, right click on that photo and choose “copy image location,” that’s the image link you need for the map.”) – I’m not and most likely never will.

    • Mu Lin says:

      Thanks for the comment. Indeed, I have not used a PC for quite a while and do not remember what the right-click pop-up menu looks like on a PC; it helps if I included that PC prompt in that part of the post.

  6. Most others I saw stopped at the point of realizing that the link just won’t work unless you get it the way you showed on Flickr where I had to view the image at the size that I wanted to use. Really neat guide.

  7. Justin says:

    Hello, thank you for your post.

    Back-story: I am currently trying to create a Custom Map in ‘My Maps’ for some clients of mine. They are considering buying a property in Bedford-Stuyvesant, Brooklyn, and I am trying to show them a map that would consist of the target properties they are considering, with layers for ‘Cafes in Bed-Stuy’, ‘Restaurants in Bed-Stuy’, ‘Schools’, etc..

    Question: Is there any way to pull the search results that one receives when doing a normal Google Map search into a custom map? For example, if I search “Cafes in Bedford-Stuyvesant” when I am within the custom map engine on the map I’m trying to create, the results are far, far fewer than if I did the same search on the “normal” Google Maps. I would LOVE to be able to search for “something”, and then pull that data into my custom map.

    * NOTE: It didn’t seem like the Export to KML and Import functions applied because I didn’t see anyway to export the results of a “normal” Google Map search.

    I hope that makes sense.

    Thanks for your help!

    Justin

    • Mu Lin says:

      You will need to do some coding and make use of Google API to create custom layers that pull in themed locations such as cafes, schools, etc. Otherwise, you will need to manually create the layer and manually enter the “key” locations on each layer.

  8. Thank you. The THREE Dots were not accessible to me. What I did was to choose the photo, share, fix the size and copy the html code. Paste it in note pad.

    Egs:

    Copy from https://farm9……to …..2253-n.jpg (No quotes)
    It works

  9. Thanks very much! I was trying for an hour the get the flickr images into the google map. Finally found your post!

  10. Kho Henry says:

    Greetings,

    Many thanks for lessons on how to embed pics as well as vids to Google Map, however, please also send lessons on how to avoid the Related Vids from appearing at the end of my vids which is very annoying and irritating.

    Hoping for your guidance soon.

    Regards

Leave a Reply