php - Finding nearest marker with google maps api -
this question has answer here:
i'm trying create application in php displays several markers on google map , allow user nearest marker when click anywhere on map. tried following code. not working. can please help?
<!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>google maps javascript api v3 example: loading clustered data xml</title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=geometry&sensor=false"></script> <style type="text/css"> html, body { height: 100%; } </style> <script type="text/javascript"> //<![cdata[ var side_bar_html = ""; var gmarkers = []; var map = null; var markerclusterer = null; function createmarker(latlng, name, html) { var contentstring = html; var marker = new google.maps.marker({ position: latlng, // map: map, zindex: math.round(latlng.lat()*-100000)<<5 }); google.maps.event.addlistener(marker, 'click', function() { infowindow.setcontent(contentstring); infowindow.open(map,marker); }); gmarkers.push(marker); side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + name + '<\/a><br>'; } function myclick(i) { google.maps.event.trigger(gmarkers[i], "click"); } function initialize() { var myoptions = { zoom: 12, center: new google.maps.latlng(8.491118,76.949840), maptypecontrol: true, maptypecontroloptions: {style: google.maps.maptypecontrolstyle.dropdown_menu}, navigationcontrol: true, maptypeid: google.maps.maptypeid.roadmap } map = new google.maps.map(document.getelementbyid("map_canvas"), myoptions); google.maps.event.addlistener(map, 'click', function() { infowindow.close(); }); google.maps.event.addlistener(map, 'click', find_closest_marker); downloadurl("marker.xml", function(doc) { map.markers = []; var xmldoc = xmlparse(doc); var markers = xmldoc.documentelement.getelementsbytagname("marker"); (var = 0; < markers.length; i++) { var lat = parsefloat(markers[i].getattribute("lat")); var lng = parsefloat(markers[i].getattribute("longt")); var point = new google.maps.latlng(lat,lng); var hname = markers[i].getattribute("hname"); var phone = markers[i].getattribute("phone"); var html="<b>"+hname+"</b><br>"+phone; var marker = createmarker(point,hname+" "+phone,html); } markercluster = new markerclusterer(map, gmarkers); document.getelementbyid("side_bar").innerhtml = side_bar_html; }); } var infowindow = new google.maps.infowindow( { size: new google.maps.size(150,50) }); function find_closest_marker( event ) { var closestmarker = -1; var closestdistance = number.max_value; for( i=0;i<gmarkers.length; i++ ) { var distance = google.maps.geometry.spherical.computedistancebetween(gmarkers[i].getposition(),event.latlng); if ( distance < closestdistance ) { closestmarker = i; closestdistance = distance; } } map.setcenter(gmarkers[closestmarker].getposition()); if (map.getzoom() < 16) map.setzoom(16); google.maps.event.trigger(gmarkers[closestmarker], 'click'); } </script> </head> <body style="margin:0px; padding:0px;" onload="initialize()"> <table border="1"> <tr> <td> <div id="map_canvas" style="width: 550px; height: 450px"></div> </td> <td valign="top" > <div id="side_bar" style="width:300px;height:450px; text-decoration: underline; color: #4444ff; overflow:auto;"></div> </td> </tr> </table> </body> </html> marker.xml
<markers> <marker hname="chc anchuthengu" lat="8.6734310" longt="76.7581770"/> <marker hname="phc perumathura" lat="8.6218640" longt="76.7975220"/> <marker hname="phc keezhattingal" lat="8.6982130" longt="76.7915000"/> <marker hname="phc azhoor" lat="8.6408080" longt="76.8252470"/> </markers>
you need create map.markers array (this part not tested):
downloadurl("phpsqlajax_genxml.php", function(data) { map.markers = []; var xml = data.responsexml; var markers = xml.documentelement.getelementsbytagname("marker"); (var = 0; < markers.length; i++) { var hname = markers[i].getattribute("hname"); var phone = markers[i].getattribute("phone"); var point = new google.maps.latlng(parsefloat(markers[i].getattribute("lat")), parsefloat(markers[i].getattribute("longt"))); var html = "<b>" + hname + "<br/>" + phone + "</b>"; var type = "bar"; var icon = customicons[type] || {}; var marker = new google.maps.marker({ map: map, position: point, icon: icon.icon, shadow: icon.shadow }); map.markers.push(marker); bindinfowindow(marker, map, infowindow, html); } }); i suggest using geometry library computedistancebetween function
function find_closest_marker( event ) { var closestmarker = -1; var closestdistance = number.max_value; for( i=0;i<map.markers.length; i++ ) { var distance = google.maps.geometry.spherical.computedistancebetween(gmarkers[i].getposition(),event.latlng); if ( distance < closestdistance ) { closestmarker = i; closestdistance = distance; } } allert(map.markers[closestmarker].title); }
Comments
Post a Comment