Buongiorno, devo realizzare una mappa dove in base alla mia posizione deve visualizzare le attività presenti in zona. Per il momento sono riuscito a visualizzare tutte le attività che prelevo sul db. Ma in questo modo me le visualizza tutte, come faccio a ridurre il raggio a tipo 4 km dal mio punto iniziale?
Vi posto quello che ho realizzato:
codice:
function mappaVicino(){
var dati = $("#attivita_mappa").serialize();
$.ajax({
type: 'POST',
data: dati,
url: "SITO.IT",
dataType: 'json',
success: function(value) {
var mappa_attivita = value;
LoadMap(mappa_attivita)
}
});
function LoadMap(mappa_attivita) {
var mapOptions = {
poi: new google.maps.LatLng(40.680096, 14.759910), // qui vorrei che prelevasse le coordinate in base alla mia posizione
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var infoWindow = new google.maps.InfoWindow();
var latlngbounds = new google.maps.LatLngBounds();
var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
var image = 'images/mappa/marker.png';
for (var i = 0; i < mappa_attivita.markers.length; i++) {
var data = mappa_attivita.markers[i]
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
icon: image,
title: data.nome
});
(function (marker, data) {
google.maps.event.addListener(marker, "click", function (e) {
infoWindow.setContent('<div style = "width:250px;min-height:60px">'+data.nome_attivita+'</div>');
infoWindow.open(map, marker);
});
})(marker, data);
latlngbounds.extend(marker.position);
}
var bounds = new google.maps.LatLngBounds();
map.setCenter(latlngbounds.getCenter());
map.fitBounds(latlngbounds);
}
}
Grazie