Back to index

Add a Google Map to Tour pages

TourCMS has standard fields for start and end points on a Tour, initially designed for use in the TourCMS Marketplace however they are available to Tour Operators to use in their web templates or via the API.

This tutorial uses the standard Google Maps API which produces a draggable, zoomable map with the standard controls. Also worthy of consideration is the Google Static Maps API which generates a static image file which cannot be zoomed or dragged but is simpler to implement.

Best to start with a demo:

View demo   Download marker images   

Loading the points into TourCMS

Each point has a longitude and latitude, these must be expressed in Decimal Degrees. This iTouchMap tool is a quick way to generate these points, another option would be to use Google Earth.

Once you have your point(s) log into TourCMS, click on Tours/Hotels, find the Tour you are interested in and click Marketplace. On the General tab scroll down to the Geocode section and enter your points, if you are just storing a single point rather than a start and end just leave the End point longitude and latitude as 0.0 (the default).

Code walkthrough

(Jump down to the Sample Template if that's all you need)

The HTML for this is fairly simple, the Google Maps API does all of the heavy lifting. Here's the sample HTML we'll be starting with:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
     <html>
     	<head>
     		<style type="text/css">
     			#map {
     				width: 530px; height: 530px;
     			}
     		</style>
     	</head>
     	<body>
     		<div id="map"></div>
     	</body>
     </html>

In the example we will use the Google AJAX API Loader which makes it easy to load multiple JavaScript libraries, there's a full explanation in the Maps API documentation.

The following code should be placed in the document <head> and will include the Google Maps API then set up a function to run once the page has loaded.

You will need to pass your API Key in the URL for the JavaScript include, each Key is tied to a domain and you can get a key for your domain if you don't have one already. The sample code includes a key for localhost however the code will run on other domains with a warning displayed as the page loads.

<script type="text/javascript" src="http://www.google.com/jsapi?key=abcdefg"></script>
     <script type="text/javascript">
     	google.load("maps", "2", {"other_params":"sensor=false"});
     	// Call this function when the page has been loaded
     	function initialize() {
     		// The bulk of our code will go here
     	}
     	google.setOnLoadCallback(initialize);
     </script>

Now we can create a map and add some points, we'll also create a new GLatLngBounds object that will contain our points so that we can center and zoom to the right place at the end. We've hard coded the longitude and latitude of our points here however the sample template code uses the correct element tags to pull the values from TourCMS.

// Create a new Google Map
     var map = new google.maps.Map2(document.getElementById("map"));
     map.setUIToDefault();

     // Store our longitude and latitude
     var startPoint = new google.maps.LatLng(37.331198,-122.030725);
     var endPoint = new google.maps.LatLng(37.342594,-122.027271);

     // Create a GLatLngBounds and add the points
     var bounds = new google.maps.LatLngBounds();
     bounds.extend(startPoint);
     bounds.extend(endPoint);

If a particular Tour only has a start point and no end point TourCMS will return the location of the start point for both, we can check for this and then handle the rendering differently. In the example we plot an "S" for the start point and an "E" for the end point, however if there is no end point we just plot a single marker with a dot for the start point.

// Do we have start & end or just single point
     var startEnd = true;
     if(startPoint.lat()==endPoint.lat() && startPoint.lng()==endPoint.lng())
     	startEnd = false; 

We can then plot our points, the following plots our start point:

// Start Icon
     var startIcon = new GIcon(G_DEFAULT_ICON);
     // Use the "S" marker if we have both a start and end point, otherwise use a dot
     if(startEnd)
      	startIcon.image = "http://www.tourcms.com/images/maps/markers/start.png";
     else
     	startIcon.image = "http://www.tourcms.com/images/maps/markers/dot.png";

     // Start Marker Options
     startMarkerOptions = { icon:startIcon, title:"Start Location", clickable:false };

     // Build and plot Start Point
     map.addOverlay(new google.maps.Marker(startPoint, startMarkerOptions));

Then just repeat for the End point.

Finally we need to center and zoom the map around our points, we can do this using our bounds object plus a handy function posted in this topic on the Google Groups for Google Maps.

map.centerAndZoomOnBounds(bounds);

Sample Template

Add the following to your page where you want the map to display:

<div id="map"></div>

Add the following to the <head> section of your template, adjust the CSS to change the dimensions of the map div:

You will need to change URL parameters on the first <script> tag to contain the Google API key for your domain, the one in the template code above is for localhost.

Additional tweaks / ideas

View demo   Download marker images