You probably don’t know, but your TouristWay standard templates include already all you need to display multiple products (hotels, guides, etc) on a Google Maps map.

Just few line of code and you will be done. Let’s start with the Javascript part.

First let’s locate an appropriate template. Assuming you want to display your hotels on the map, probably the most intuitive place is the template where search results layout is. Just switch on your TouristWay Workbench (‘templates’ menu) and tap into the template code.

Your page needs first of all to include Google’s API and that’s easily accomplished in the first SCRIPT tag below.

Then we need few additional Javascript calls to operate the Google Maps API according to our needs:

• instance the map: the ‘initmap’ function (part of TouristWay JS toolbox) will take care of it, the instance will be bound to the html DIV whose id is ‘map’
• add the “pins”: the ‘createmapmarker’ function add a new marker to the map, we use a FOREACH statement to go through the search results and print one function call for each hotel in the current page
• center the map: you certainly noticed we’ve kept track of the average coordinates inside the FOREACH cycle (see centerlat and centerlng), by calling ‘centermap’ we use them to, well, center the map.

You can put this code in the beginning of the template or, better, right before the list of products:

<SCRIPT src="http://maps.google.com/maps?file=api&v=2&key=%-gateways.googlemaps.apikey-%" type="text/javascript"></SCRIPT>
<SCRIPT type="text/javascript">

$(document).ready(function(){

    var twmap=initmap('map');
    var centerlat=0;
    var centerlng=0;

    <%FOREACH product IN results>
    createmapmarker(twmap,%-product.map.lat-%,%-product.map.lng-%,'','%-product.repuri-%');
    centerlat = ((centerlat * %-product_index-%) + %-product.map.lat-%) / (%-product_index-% + 1);
    centerlng = ((centerlng * %-product_index-%) + %-product.map.lng-%) / (%-product_index-% + 1);
    </%FOREACH>

    centermap(twmap,centerlat,centerlng,5);
    });

</SCRIPT>

<div id="map" style="width: 600px; height: 300px; margin:10px auto;"></div>

This is all the programming required here. What we may like to add is some nice “bubble” to display the basic info of each hotel when clicking on its pin on the map. TouristWay’s createmapmarker function already supports as fourth parameter the id of a DIV element whose content will be moved inside the bubble on click of the related marker. We need another FOREACH cycle to fill all the required “bubbles” placeholders, this can go right after the part you just placed in the first step:

<%FOREACH product IN results>
    <div id="mapinfo-%-product.repuri-%" style="display:none;">
        <div style="width:300px;">
        <A HREF="<%SNIPPET link closeup,%-product.catalogue-%/>?cdo=%-product.repuri-%&dtd=%-global.dtcheckin--format=h_http-%&dta=%-global.dtcheckout--format=h_http-%"><IMG class="display float-left" width="67" height="50" SRC="%-product.photos.thumbnail-%"></A>
        <img style="display:block; margin:0; padding: 0 0 10px 0;" src="%-system.docbaseurl-%images/elements/stars<%SNIPPET ratingstars %-product.ratingdes-% />.gif" alt=""/>
        <h3 class="flag" style="display:inline;clear:right;">%-product.locationdes-%</h3>
        <H2><A HREF="<%SNIPPET link closeup,%-product.catalogue-%/>?cdo=%-product.repuri-%&dtd=%-global.dtcheckin--format=h_http-%&dta=%-global.dtcheckout--format=h_http-%">%-product.name--format=s_pb35-%</A></H2>
        <DIV class="clear"> </DIV>
        </div>
    </div>
</%FOREACH>

That’s it and here’s how it looks like in my test:

One important note: this assumes each hotel has valid coordinates, I suggest you to check that all the hotels in your page are correctly pinpointed on the map in the Administration Area, at least for your initial tests. Once this works, you may want to think about some clever way to implement a minimum validation of the coordinates.

- Stefano