Google maps API, finne alle POI inne en radius

[frankhaugen]

Jeg sitter å leker litt med google maps API-en til et lite prosjekt jeg har.

 

Jeg har 60 POI (points of interest) som er barnehager for eksempel, så vil jeg kun liste opp de som er innen for gangavstand, (2km), ved å følge vei, (google directions API må også brukes).

 

Noen som har noe kjennskap på hvordan dette kan gjøres??

 

Takk!!

 

-frank

Endret 19. august 2011 av frankhaugen

[blackbrrd]

Har virkelig ikke peiling på API-en, så ikke ta dette for god fisk:

Først finner du alle som er innenfor 2km i luftlinje (evt et 2km x 2km stort område)

Finn deretter ut hvilke som har gangavstand på < 2km

Vis disse

[frankhaugen]

Har virkelig ikke peiling på API-en, så ikke ta dette for god fisk:

Først finner du alle som er innenfor 2km i luftlinje (evt et 2km x 2km stort område)

Finn deretter ut hvilke som har gangavstand på < 2km

Vis disse

SÅ noob er jeg ikke

 

Dette kunne jeg selv finne ut av, det er selve API-en jeg har litt problemer med å knytte hodet mitt rundt, spesielt siden den bruker JS.

 

men takk for forsøken anyway!

 

-frank

[Gjest Slettet+9871234]

Dette kunne jeg selv finne ut av, det er selve API-en jeg har litt problemer med å knytte hodet mitt rundt, spesielt siden den bruker JS.

Da anbefaler jeg deg å ta en titt på jQuery som gjør det meste mye lettere for deg.

 

Relevant litteratur: http://www.packtpub.com/books/jquery

 

Merk at også Python + Django kan brukes:

 

http://www.oopschool.com/phpBB3/viewtopic.php?f=7&t=115

[Wedvich]

Har selv laget noe ganske likt i JavaScript som lett kan modifiseres til å gjøre det du snakker om. Er på jobb nå men skal poste det i kveld når jeg kommer hjem!

[Wedvich]

Glemte meg litt i går så fikk ikke postet koden. Jeg bruker forresten jQuery til et par ting, så du må inkludere det også.

 

Uansett, denne koden har jeg brukt til å søke i en liste forhandlere på formen:

 

var dealers = [
{
 name: 'Dealer 1',
 lat: 10.837456, // lengde- og breddegrad, tilfeldig valgt her som eksempel
 lng: 10.883463,
},
{
 name: 'Dealer 2',
 lat: 10.897554,
 lng: 10.375346,
},
];

 

Så sjekker den hvilke som er innenfor en gitt radius i luftlinje, og deretter beregner den kjøre-/gålengder og sorterer punktene etter hvilke som er nærmest. I dette scriptet lager den så et punkt på kartet for hvert av dem og lager et vindu som popper opp når man klikker på dette med navn på punktet, men du kan også bruke denne listen til å for eksempel skrive ut en tabell osv.

 

Må nok modifiseres litt til å omhandle barnehager og gjøre nøyaktig det du vil, men her er koden min i hvertfall.

 

HTML med en form og selve kartet:

 

<form id="address-form">
<fieldset>
 <label for="address-search">Address</label>
 <input id="address-search" type="text" size="50" />
 <input id="address-button" type="button" value="Search..." />
</fieldset>
</form>
<div id="googlemap" style="width: 800px; height: 600px; position: relative; background: rgb(229, 227, 223); overflow-x: hidden; overflow-y: hidden;"></div>

 

Støttefunksjoner:

 

function radians(deg) {
return deg * Math.PI / 180;
}

function inArea(latFrom, lngFrom, latTo, lngTo, radius) {
return ((6371 * Math.acos(Math.cos(radians(latFrom)) * Math.cos(radians(latTo)) * Math.cos(radians(lngTo) - radians(lngFrom)) + Math.sin(radians(latFrom)) * Math.sin(radians(latTo)))) <= radius);
}

 

Hoveddelen i JavaScript, dette legger du i f.eks. $.(document).ready() hvis du bruker jQuery til det:

 

var map = new google.maps.Map(document.getElementById('googlemap'), {
zoom: 11,
center: new google.maps.LatLng(59.91387, 10.75225),
mapTypeId: google.maps.MapTypeId.HYBRID
});
var geocoder = new google.maps.Geocoder();
var dms = new google.maps.DistanceMatrixService();
var markers = [];
var infowindows = [];

$('#address-button').click(function() {
var address = $('#address-search').val();

$.each(markers, function() { this.setMap(null); });

geocoder.geocode({'address': address}, function(results, status) {
 if (status == google.maps.GeocoderStatus.OK) {
  map.setCenter(results[0].geometry.location);
  markers.push(new google.maps.Marker({
   map: map,
   position: results[0].geometry.location,
   title: address,
   icon: 'http://google-maps-icons.googlecode.com/files/home.png'
  }));

  var dealersInArea = [];
  var dmsDestinations = [];

  $.each(dealers, function() {
   if (inArea(results[0].geometry.location.lat(), results[0].geometry.location.lng(), this.lat, this.lng, 2)) { // 2km radius
    dealersInArea.push([this]);
    dmsDestinations.push(new google.maps.LatLng(this.lat, this.lng));
   }
  });

  dms.getDistanceMatrix({
   origins: [results[0].geometry.location],
   destinations: dmsDestinations,
   travelMode: google.maps.TravelMode.WALKING,
   unitSystem: google.maps.UnitSystem.METRIC
  }, function(response, status) {
   if (status = google.maps.DistanceMatrixStatus.OK) {
    var origins = response.originAddresses;
    var destinations = response.destinationAddresses;

    var results = response.rows[0].elements;
    for (var i = 0; i < results.length; ++i) {
     dealersInArea[i].push(results[i].distance.value);
    }

    dealersInArea.sort(function(a, b) { return ((a[1] < b[1]) ? -1 : ((a[1] > b[1]) ? 1 : 0)); });

    $.each(dealersInArea, function() {
     var position = new google.maps.LatLng(this[0].lat, this[0].lng);
     var marker = new google.maps.Marker({
      map: map,
      position: position,
      title: this[0].name
     });
     var infowindow = new google.maps.InfoWindow({ content: this[0].name });
     google.maps.event.addListener(marker, 'click', function() {
      infowindow.open(map, marker);
     });
     markers.push(marker);

     var mapBounds = map.getBounds();
     if (!mapBounds.contains(position)) {
      map.fitBounds(mapBounds.extend(position));
     }
    }
   }
  }
 }
}
});

Endret 23. august 2011 av Wedvich