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:
Want to learn more about Google mapping? Here’s some popular books on Amazon that you can check out:
Related posts:
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
Thanks for the comments. I use Bluehost for my site.
Is there a way to add just audio without video?
Good question. I’ll do a new post on adding audio to Google Maps.
Hi, this was a useful tutorial. Did you ever write a post an adding just audio? Sorry if I have missed it in your archives. Thanks.
Did you find out if it is possible to add audio?
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..!
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.
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.
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.
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
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.
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
Thanks for the comment. This post was written a while ago and we know that the digital tools are always updating.
Thanks very much! I was trying for an hour the get the flickr images into the google map. Finally found your post!
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
That’s a setting you can change at Youtube.
Thanks for the help getting photos from Google+ into an interactive Google Map. I would prefer to link the map place mark to an album instead of to a single photo. I’m trying to trace locations on a map where each location has multiple images. Is there any way to do that?
Pingback: mac mineralize powder foundation review Lowest Price With Free Shipping 10H1X 225 Satakunnan Allergia- ja Astmayhdistys ry Satakunnan Allergia- ja Astmayhdistys ry mac mineralize powder foundation review Lowest Price With Free Shipping 10H1X 225 Satakunna
Hi, Prof. Lin:
You can very easily place images on a map points with Silk.co, too. Here’s an example.
http://stop-oil-trains-week-of-action.silk.co/explore/map/collection/title/column/city/column/host-zip-code/column/image/auxcolumn/country/location/state
Thanks!
Hi sir. I searched google problem and brought me here . I want get link embed from https://photos.google.com/ to wordpress. This link of other people. Please help me.
Thank you very much. I appreciate the help.
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.
interactive maps
Another great solution for creating custom, beautiful maps is http://www.mapme.com
Love it.
Can it be done dynamically?
as an example, I’m fixing to add a marker to the database for new york city and I want to have this youtube video show up when somebody clicks on the marker.
http://keepamericaatwork.com/over50.html
https://youtu.be/ITbxP5RcsUk
Any ideas?
Thanks,
Virgil
I am not sure where you are getting your info, but good topic.
I ndeds to spend some time learning much more or understanding more.
Thanks for magnifocent info I was looking for this ifo for my mission.