Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Jun 2012
    Posts
    40
    Thanks
    0
    Thanked 1 Time in 1 Post

    Google Maps Api Sort By Distance

    Hello,

    I have been working an a function for visitors to search a company by entering there zipcode. When they enter the zipcode and search range markers with company's nearby wil show on the Google Map. Yesterday I added a sidebar with all the company's in a nice list. So all the results are show in a list too and are clickable.

    Now the list is sorted bij zipcode and what I try to accomplish is that it is sorted bij distance. (in the javascript code "afstand" is distance).

    This is my code:

    Code:
    					<script type="text/javascript">
    						var geocoder;
    						var map;
    						var side_bar_html = ""; 
    						var gmarkers = []; 
    						var infobox;
    						function initialize() {
    							
    							  // Create an array of styles.
      var blueOceanStyles = [
        {
          featureType: "all",
          elementType: "all",
          stylers: [
            { saturation: -100 } // <-- THIS
          ]
        }
    ];
    							
    							geocoder = new google.maps.Geocoder();
    							var myOptions = {
    								zoom: <?php
    								if(is_array($postcodevelden) && count($postcodevelden) > 0 && !empty($_POST['address']))
    								{
    									switch($radius)
    									{
    										case "5":
    											echo "12";
    											break;
    										case "10":
    											echo "11";
    											break;
    										case "15":
    										case "20":
    											echo "10";
    											break;
    										case "30":
    										case "40":
    											echo "9";
    											break;
    									}
    								}
    								else
    								{
    									echo "7";
    								}
    								?>,
    								center: new google.maps.LatLng(<?php if(is_array($postcodevelden) && count($postcodevelden) > 0) { echo $lat.", ".$lon; } else { echo "52.2008737173322, 5.25146484375"; } ?>),			    
    							mapTypeId: google.maps.MapTypeId.ROADMAP
    							}
    							map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    							map.setOptions({styles: blueOceanStyles});
    							
    <?php
    		if(is_array($adressen) AND count($adressen) > 0) 
    		{
    			foreach($adressen as $adres)
    			{
    				$afstand = round((6371 * acos(sin(deg2rad($lat)) * sin(deg2rad($adres->locatie_lat)) + cos(deg2rad($lat)) * cos(deg2rad($adres->locatie_lat)) * cos(deg2rad($adres->locatie_lon) - (deg2rad($lon))))), 2);
    ?>
    							addMarker(<?php echo $adres->locatie_lat.", ".$adres->locatie_lon.", '".$adres->locatie_naam."', '".$adres->locatie_straat."', '".$adres->locatie_postcode."', '".$adres->locatie_plaats."', '".$adres->locatie_telefoon."', '".$afstand."'"; ?>);
    <?php
    			}
    		}
    ?>
    document.getElementById("marker_list").innerHTML = side_bar_html;
    						}
    						function myclick(i) {
      map.setCenter(gmarkers[i].getPosition());
      google.maps.event.trigger(gmarkers[i], "click");
    }
    							infowindow = new InfoBox({
    							 content: document.getElementById("infobox"),
    							 disableAutoPan: false,
    							 maxWidth: 150,
    							 pixelOffset: new google.maps.Size(-140, 0),
    							 zIndex: null,
    							 boxStyle: {
    								background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/tipbox.gif') no-repeat",
    								opacity: 0.95,
    								width: "280px"
    							},
    							closeBoxMargin: "12px 4px 2px 2px",
    							closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
    							infoBoxClearance: new google.maps.Size(1, 1)
    						});
    
    						function addMarker(lat, lon, naam, straat, postcode, plaats, telefoon, afstand)
    						{
    							var marker = new google.maps.Marker({
    								position: new google.maps.LatLng(lat, lon),
    								map: map,
    								icon: "afbeeldingen/pincard/wheel-icon.png",
    								title: naam
    							});
    							
    							google.maps.event.addListener(marker, 'click', function() {
    								var contentString = '<div id="infobox">'+
    								'<b style="border-bottom: 1px solid #f6ee34; color:#ee2a24;">' + naam + '</b><br/>'+
    								'Afstand (hemelsbreed): ' + afstand + ' km<br/>' +
    								straat + '<br/>' +
    								postcode + ' ' + plaats + '<br/>';
    								if(telefoon != "")
    								{
    									contentString = contentString + 'Telefoonnr: ' + telefoon;
    								}
    								contentString = contentString + '</div>';
    								infowindow.setContent(contentString);
    								infowindow.open(map, marker);
    							});
    							    gmarkers.push(marker);
    	
        side_bar_html += '<tr>'+ '<td onclick="javascript:myclick(' + (gmarkers.length-1) + ')"><a>' + naam + '<br/>' + straat + '<br/>' + postcode + ' ' + plaats + '<br/>' + '<u>Afstand ' + afstand + ' km</u>' +'</td>' +'<\/a></tr><br>';
    
    						}
    
    						google.maps.event.addDomListener(window, 'load', initialize);
    					</script>
    					<div>
    						<form action="index.php?p=5#keuze" method="POST">
                            							<select name="afstand">
    										<option value="5"<?php if(isset($_POST['zoekpost']) && $_POST['zoekpost'] == "zoek" && $_POST['afstand'] == 5) { echo " selected=\"selected\""; } ?>>5 km</option>
    										<option value="10"<?php if(isset($_POST['zoekpost']) && $_POST['zoekpost'] == "zoek" && $_POST['afstand'] == 10) { echo " selected=\"selected\""; } ?>>10 km</option>
    										<option value="15"<?php if(isset($_POST['zoekpost']) && $_POST['zoekpost'] == "zoek" && $_POST['afstand'] == 15) { echo " selected=\"selected\""; } ?>>15 km</option>
                                            <option value="20"<?php if(isset($_POST['zoekpost']) && $_POST['zoekpost'] == "zoek" && $_POST['afstand'] == 20) { echo " selected=\"selected\""; } ?>>20 km</option>
    										<option value="30"<?php if(isset($_POST['zoekpost']) && $_POST['zoekpost'] == "zoek" && $_POST['afstand'] == 30) { echo " selected=\"selected\""; } ?>>30 km</option>
    										<option value="40"<?php if(isset($_POST['zoekpost']) && $_POST['zoekpost'] == "zoek" && $_POST['afstand'] == 40) { echo " selected=\"selected\""; } ?>>40 km</option>
    							</select><br />
    							<input id="address" name="address" type="textbox"<?php if(isset($_POST['zoekpost']) && $_POST['zoekpost'] == 'zoek') { echo " value=\"".$_POST['address']."\""; } ?>>
    							<input type="submit" name="zoekpost" value="zoek">
    						</form>
    					</div>
    					<br/>					
    					<br/>
                        <div class="mapborder">
    					<div id="mapcontainer">
    						<div id="map_canvas"></div>
    					</div>
                        </div>
    
    </div>
    <div id="content-right" style="overflow-y:auto; overflow-x:hidden; height:500px; width:462px; padding-top:0px; margin-top:170px; padding-bottom:0px;"><table id="marker_list"></table></div>
    Is there a way to sort the sidebar list bij distance? I searched Google for it but cant find a solution for it.

    Any help would be welcome.

    Thanks in advance

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,773
    Thanks
    55
    Thanked 518 Times in 515 Posts
    I think you have two options - there is a distance matrix api
    https://developers.google.com/maps/d...istancematrix/

    but it's not really necessary - everything you need is in the maps API and the native javscript sort() method.

    Basically, the idea I used was this: When making the markers, store as one of their properties the distance between it and your reference point (the map center, or user's location or whatever). Once you have all your markers set, sort them based on that distance property and repopulate your sidebar accordingly. Here's the test page that I was working on.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •