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:

Follow me

Mu Lin

Blogger at MulinBlog
Dr. Mu Lin is a digital journalism professional and educator in New Jersey, United States. Dr. Lin blogs about digital journalism education and offers free digital journalism courses at MulinBlog Online J-School (www.mulinblog.com/mooc), which is a free, open, online program for people seeking web-based training in digital content production.
Follow me

About Mu Lin

Dr. Mu Lin is a digital journalism professional and educator in New Jersey, United States. Dr. Lin blogs about digital journalism education and offers free digital journalism courses at MulinBlog Online J-School (www.mulinblog.com/mooc), which is a free, open, online program for people seeking web-based training in digital content production.
This entry was posted in Digital tools and tips. Bookmark the permalink.

5 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?

Leave a Reply