Published on 4 March 2014

Add your own thumbnails in Google Maps, Panoramio style

This post explains how to add your own thumbnails in Google Maps. I did it for one of my websites in a very similar way as Panoramio does it. In fact You could use Panoramio, but if you're not willing to share your pictures then this is a good alternative.

Panoramio map

The first thing you're gonna need is the RichMarker library. You can download it and browse the documentation here. I'm gonna assume you have a Javascript file with your own map already created. First thing you should do is to link the RichMarker library in your HEAD section:

<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/richmarker/src/richmarker-compiled.js"></script>

After the initialization of your map instance you need some images and coordinates to display in your map. This information can be static or be pulled from your app DB. Suit yourself with the option that fits your needs better. Each image is going to be displayed in its own coordinate (Latitude, Longitude). The code to show one thumbnail:

var marker_0 = new RichMarker({
          position: new google.maps.LatLng(39.955083, 4.268875),
          map: map,
          content: '<div id="thumbnail-1" class="my-marker"><img width="65" height="40" class="map-thumbnail" src="/yourpicture.jpg"/></div>'
});

Easy right? Now you can try adding more than one and see how it looks like. If two or more thumbnails are very close to each other you might have problems displaying them (overlapping):

<p style="text-align: center;">
    <a href="http://jordijoan.me/wp-content/uploads/2014/03/detail.jpg">
        <img class="aligncenter size-medium wp-image-63" alt="Thumbnails overlapping" src="http://jordijoan.me/wp-content/uploads/2014/03/detail-300x140.jpg" width="300" height="140" />
    </a>
</p>

That's why I usually to add a couple of listeners for each marker to adjust the z-index whenever mouse goes over them:

google.maps.event.addListener(marker_0, 'mouseover', function(event) {
    this.setZIndex(10);
});

google.maps.event.addListener(marker_0, 'mouseout', function(event) {
    this.setZIndex(0);
});

If, let's say, you're displaying 10 pictures, when we mouse-in the z-index gets the highest value (10), meaning the index of the last position of the array. This way we ensure the thumbnail is going to be on top of the z-index when we hover it. If we move the mouse out of the thumbnail then it gets back to its original value (the index of its position of the array). Now we can add a bit of CSS to add borders:

img.map-thumbnail {
    cursor: pointer;
    border: 2px solid #ffffff;
}

Once you have the thumbnails displaying in your map you could do something else; in my case I wanted to be able to show the original image in full screen. You could use any image viewer available out there. I usually use Swipebox.js because its simplicity and flexibility but feel free to use another one. 

We add the HTML code we need in the marker:

var marker_0 = new RichMarker({
      position: new google.maps.LatLng(39.955083, 4.268875),
      map: map,
      content: '<div id="thumbnail-1" class="my-marker"><a href="/uploads/yourpicture.jpg" class="swipebox" title="Your title"><img alt="Your title" title="Your title" width="65" height="40" class="map-thumbnail" src="/uploads/yourpicture.jpg"/></a></div>'
});

google.maps.event.addListener(marker_0, 'markerready', function(event) {
    $(".swipebox").swipebox({hideBarsDelay:5000});
});

Now we already have a nice interactive map with a bunch of thumbnails and a gallery to display the full-size images! In case you have plenty of thumbnails you might be interested in changing the way they get displayed; sizes, visibility and so on. In another post we'll see how to do that :)