Distance to here using Google Maps API
January 5th, 2010
Posted in: Website Development
by Fiaz Khan (Technical Director)
A requirement of a site we launched recently was to plot on a Google Map a route and place a marker at a set point along the route in a kind of “You have walked this far” way.
This was achieved using GPolyline and Epolys, an extension that adds several useful methods to GPolyline and GPolygon classes.
Plotting the route requires taking a series of longitude and latitude values and converting them into an encoded string. This is done using a tool from Google.
http://code.google.com/apis/maps/documentation/polylineutility.html
Once you have the Encoded Polyline and Encoded Levels for your route paste them into the folowing code:
<script type="text/javascript">google.load("maps", "2");script> <script type="text/javascript"> map = new google.maps.Map2(document.getElementById("map")); poly = GPolyline.fromEncoded({ color:'#b30b7a', weight:4, opacity:0.5, points:'YOUR_ENCODED_POLYLINE_STRING', zoomFactor:32, levels:'YOUR_ENCODED_LEVELS_STRING', numLevels:4 }); map.addOverlay(poly);
