Plotting route maps using Google Maps API

Introduction

I have been trying to hunt for a solution to plot a route on a map, showing all the stop points, and possibly all the images of the locations of the stop points. I finally found a solution after mixing and matching a few Google Maps v3 examples and marrying it with JSON.

Background 

All available options on Google Maps provide you the ease to show a route between points A to B, but it is incredibly difficult to show a multi point route across the map. This is needed especially when you are designing sites for the travel domain where they need to see the images of all the locations you will take them to.

Using the code

The ingredients of this code are simple: Google Maps V3, latitude longitude co-ordinates of various positions (stop points) using JSON; initial setup including the zoom level and the center of the map are done via JavaScript.

Integrate the code as is into your system and then begin to customize it as follows:

Edit routeMap.html at line number 101 to update the number of data points (stop points) you will include. Update the value to say 20 if you will have 20 stop points on your route.

<select id="nummarkers"><option value="11" selected="selected"> 

The <div> at line number 105 is used to display the list of all stop points, you can place this anywhere in your code to display the entire list of stop points. 

//
// <div id="markerlist"></div>
// 

The <div> at line number 109 is the location where the map is rendered, you can place this in your code as per your requirements. 

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

In the speed_test.js file, line 21 is used to define the center of the map. Update this to match your requirements. A quick search on Google will help you find the value for any city, or you can use this site (http://itouchmap.com/latlong.html) if you need very high precision. 

var latlng = new google.maps.LatLng(28.70, 77.30);  

On line 23 you will find the zoom control, use this to regulate the level of zoom you need on your map. 

'zoom': 12,

On line 108 you will find the control to edit the HTML displayed below the images of the stop points, use this to change the HTML used to display the images on your map. Feel free to add custom classes and styles. 

var infoHtml = '...

Last but not the least, the JSON file that stores all the stop points of the map being plotted. Each row of data (corresponds to 1 stop point) is stored as Title, Location URL, Image URL, Longitude, Latitude, Image Width, Image Height, Owner Name (optional), Owner URL (optional). This info is used to plot the stop points on the map. 

{"photo_title": "Title of stop point", "photo_url": "Url linking to image", 
   "photo_file_url": "Image Url", "longitude": 77.2300, "latitude": 28.6300, 
   "width": 500, "height": 375, "owner_name": "Enziq Solutions", 
   "owner_url": "http://www.enziq.com"} 

History

This code was originally written as a demo by Luke Mahe and Xiaoxi Wu, huge thanks to them for it! I have customized it to suit my exact requirements. [See their example here: http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/examples/speed_test_example.html] 

I will launch the site for which I am developing this code on November 15, and update this post with the live link so you can see a preview of how the completed route map looks like.