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:
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.
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.
So 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.
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:
- A review of 3 interactive mapping tools: Google Maps Engine, Meograph, StoryMap JS
- How to create a free heat map with Google Fusion Tables
- Who has the best geocoding tool for heat map – Tableau, Mapbox or Google Fusion Tables?
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)