Click here to Skip to main content
13,150,622 members (39,214 online)
Click here to Skip to main content
Add your own
alternative version


3 bookmarked
Posted 30 Sep 2013

Plotting route maps using Google Maps API

, 30 Sep 2013
Rate this:
Please Sign up or sign in to vote.
Plot route maps, showing list of stop points and images of stop points on markers.


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.


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>

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 ( 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": ""


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:

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. 


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

William Emmanual
CEO Enziq Solutions Pvt. Ltd.
India India
This member doesn't quite have enough reputation to be able to display their biography and homepage.
Group type: Organisation

3 members

You may also be interested in...


Comments and Discussions

-- There are no messages in this forum --
Permalink | Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.170924.2 | Last Updated 30 Sep 2013
Article Copyright 2013 by William Emmanual
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid