Databases
StackOverflow2013
Postsdbo
POFinding nearest marker with google maps api
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POFinding nearest marker with google maps api
    primarykey
    data
    text
    <p>I'm trying to create an application in php that displays several markers on google map and allow a user to get the nearest marker when he click anywhere on the map. I tried the following code. But its not working. Can anyone please help?</p> <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"&gt; &lt;head&gt; &lt;meta name="viewport" content="initial-scale=1.0, user-scalable=no" /&gt; &lt;meta http-equiv="content-type" content="text/html; charset=UTF-8"/&gt; &lt;title&gt;Google Maps Javascript API v3 Example: Loading clustered data from an XML&lt;/title&gt; &lt;script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=geometry&amp;sensor=false"&gt;&lt;/script&gt; &lt;style type="text/css"&gt; html, body { height: 100%; } &lt;/style&gt; &lt;script type="text/javascript"&gt; //&lt;![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)&lt;&lt;5 }); google.maps.event.addListener(marker, 'click', function() { infowindow.setContent(contentString); infowindow.open(map,marker); }); gmarkers.push(marker); side_bar_html += '&lt;a href="javascript:myclick(' + (gmarkers.length-1) + ')"&gt;' + name + '&lt;\/a&gt;&lt;br&gt;'; } 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"); for (var i = 0; i &lt; 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="&lt;b&gt;"+hname+"&lt;/b&gt;&lt;br&gt;"+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&lt;gmarkers.length; i++ ) { var distance = google.maps.geometry.spherical.computeDistanceBetween(gmarkers[i].getPosition(),event.latLng); if ( distance &lt; closestDistance ) { closestMarker = i; closestDistance = distance; } } map.setCenter(gmarkers[closestMarker].getPosition()); if (map.getZoom() &lt; 16) map.setZoom(16); google.maps.event.trigger(gmarkers[closestMarker], 'click'); } &lt;/script&gt; &lt;/head&gt; &lt;body style="margin:0px; padding:0px;" onload="initialize()"&gt; &lt;table border="1"&gt; &lt;tr&gt; &lt;td&gt; &lt;div id="map_canvas" style="width: 550px; height: 450px"&gt;&lt;/div&gt; &lt;/td&gt; &lt;td valign="top" &gt; &lt;div id="side_bar" style="width:300px;height:450px; text-decoration: underline; color: #4444ff; overflow:auto;"&gt;&lt;/div&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p><strong>marker.xml</strong></p> <pre><code>&lt;markers&gt; &lt;marker Hname="CHC Anchuthengu" Lat="8.6734310" Longt="76.7581770"/&gt; &lt;marker Hname="PHC Perumathura" Lat="8.6218640" Longt="76.7975220"/&gt; &lt;marker Hname="PHC Keezhattingal" Lat="8.6982130" Longt="76.7915000"/&gt; &lt;marker Hname="PHC Azhoor" Lat="8.6408080" Longt="76.8252470"/&gt; &lt;/markers&gt; </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USJeNy
    1. USJeNy
    plurals
    1. PL
      singulars
      1. LTDuplicate
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POFinding nearest marker with google maps api
      1. USjrd1
      1. VTFavorite
    2. VO
      singulars
      1. POFinding nearest marker with google maps api
      1. USJeNy
      1. VTFavorite
    1. COWhat isn't working? What happened? What did you expect?
      singulars
      1. POFinding nearest marker with google maps api
      1. USPatrick Kostjens
    2. COActually, the page displays google map with all markers (from database) . But what I need is to alert the nearest marker, when a user clicks anywhere on the map.
      singulars
      1. POFinding nearest marker with google maps api
      1. USJeNy
    3. COYou are using the Google Maps API v3, not the deprecated Google Maps API v2, changed the tag to reflect that.
      singulars
      1. POFinding nearest marker with google maps api
      1. USgeocodezip
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload