I am developing a web page with the Google Maps API v3. I currently have a functional map and a search bar. I need to be able to display the distance from the desired address to the nearest mark in one of the KML files on the map. How can i do this?
Here is the page code:
<script type="text/javascript"> var geocoder; var map; var marker; var layers = []; function initialize() { geocoder = new google.maps.Geocoder (); var latlng = new google.maps.LatLng (41, -73.4); var myOptions = { zoom: 7, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP } map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); marker = new google.maps.Marker({map:map}); layers[0] = new google.maps.KmlLayer('http://dl.dropbox.com/u/80233620/South-and-North-County-Trailway.kml', {preserveViewport: true}); layers[1] = new google.maps.KmlLayer('http://www.nyc.gov/html/dot/downloads/misc/cityracks.kml', {preserveViewport: true}); layers[2] = new google.maps.KmlLayer('http://dl.dropbox.com/u/80233620/NWS%20Radar%20Images.kmz', {preserveViewport: true}); for (var i = 0; i < layers.length; i++) { layers[i].setMap(map); } } function codeAddress () { var address = document.getElementById ("address").value; geocoder.geocode ( { 'address': address}, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { map.setCenter(results [0].geometry.location); marker.setPosition(results [0].geometry.location); map.setZoom(14); } else { alert("Geocode was not successful for the following reason: " + status); } }); } function toggleLayer(i) { if(layers[i].getMap() === null) { layers[i].setMap(map); } else { layers[i].setMap(null);} } </script>
Gavin source share