BLOG | Fotorama: set Google Map canvas as thumb image in the gallery

Fotorama is a useful tool if you want to display an interactive gallery within a web page. Without discussing details (you can find all of them in previous link) about setting up fotorama/google map canvas, we’ll discuss a useful binding of Fotorama framework with Google Map canvas in this article. Notice that I used 1st image in gallery as a location to display map canvas.

HTML

<div class="fotorama" data-width="700" data-nav="thumbs" data-thumbwidth="110" data-thumbheight="85">
    <!-- important -->
    <div data-thumb="map.jpeg">                    
        <div id="map-canvas" data-fit="contain"></div>
    </div>
    <div data-img="picture1.jpg"></div>
    <div data-img="picture2.jpg"></div>
</div>

Since google map API needs a <div> to fit map canvas, and fotorama API needs an image to fit gallery canvas, we use a nested <div> for thumbnail (line3-line5). The outside <div> is a .jpeg file that is simply a screenshot of a map, and the inner side <div> contains the real map canvas that will be displayed as the 1st object in gallery. Using this way, we got a perfect map embedded into fotorama.

To initiate the map, following Javascript code below:

Javascript for setting up map canvas:

function initialize() {
    var myLatlng = new google.maps.LatLng(39.8282, -98.5795); // map center coordination
    var mapOptions = {
        zoom: 3,  // larger zoom value zooms more 
        center: myLatlng
    }
    // initiate map in 'map-canvas' div
    mymap = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
}
var map;
google.maps.event.addDomListener(window, 'load', initialize); // load map canvas 

You notice that the Js code is just a common version of google map API usage, well the reason I listed it here is to remind that we still initiate the map canvas using the inner <div> “map-canvas”.

Previous code could probably offer a gist of how to combine fotorama and google map APIs together, however you cannot copy-paste them directly to your code because they will not work. You probably want to read more about the initialization of fotorama and google map canvas on their information page, and make sure to link necessary .js and .css files to your HTML.

Notice

Add data-nav=”thumbs” to your fotorama <div> tag, otherwise you see dots instead of thumbnails.

Reference

Fotorama API Documentation

Google Map API developer guide