Buongiorno a tutti,
come prima cosa chiedo infinitamente scusa se ho scritto nella sezione sbagliata o se questa discussione è già stata aperta, ma non ho trovato nulla in merito.
Ora vengo al punto: sto iniziando a giocare con google maps e vorrei che dopo aver lanciato una ricerca di un indirizzo mi venga mostrato un marker se questo è a 200 km dal risultato...
Per intenderci io ho un marker con le coordinate di Napoli, se il risultato della ricerca è Roma mi mostra il marker Napoli (distanza circa 188 km il linea d'aria), se cerco Lecce non mi mostra Napoli (distanza circa 334 km il linea d'aria)... Funziona tutto a meraviglia, ma rilanciando una seconda ricerca mi tiene in memoria il marker Napoli ed anche se è maggiore la distanza me lo mostra.
Il codice da cui sono partito è quello base della searchbox di google maps con un paio di modifiche fatte da me.
Oltre al riquadro per la ricerca ne ho inserito uno che mi dice quanto è la distanza, mi è servito per capire se mi veniva calcolata la distanza esatta.
Spero di esser stato il più chiaro possibile e ringrazio di cuore tutti quelli che mi sapranno aiutare. Chissà magari così aiutiamo altri con lo stesso problema
Ecco il codice completo della pagina html:
come prima cosa chiedo infinitamente scusa se ho scritto nella sezione sbagliata o se questa discussione è già stata aperta, ma non ho trovato nulla in merito.
Ora vengo al punto: sto iniziando a giocare con google maps e vorrei che dopo aver lanciato una ricerca di un indirizzo mi venga mostrato un marker se questo è a 200 km dal risultato...
Per intenderci io ho un marker con le coordinate di Napoli, se il risultato della ricerca è Roma mi mostra il marker Napoli (distanza circa 188 km il linea d'aria), se cerco Lecce non mi mostra Napoli (distanza circa 334 km il linea d'aria)... Funziona tutto a meraviglia, ma rilanciando una seconda ricerca mi tiene in memoria il marker Napoli ed anche se è maggiore la distanza me lo mostra.
Il codice da cui sono partito è quello base della searchbox di google maps con un paio di modifiche fatte da me.
Oltre al riquadro per la ricerca ne ho inserito uno che mi dice quanto è la distanza, mi è servito per capire se mi veniva calcolata la distanza esatta.
Spero di esser stato il più chiaro possibile e ringrazio di cuore tutti quelli che mi sapranno aiutare. Chissà magari così aiutiamo altri con lo stesso problema
Ecco il codice completo della pagina html:
Codice:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento senza titolo</title>
<style>
.mappa {
height:600px;
width:100%;
}
</style>
</head>
<body>
<div class="mappa" id="mappa"></div>
<input id="ricerca" type="text" placeholder="Scrivi indirizzo" style="width:277px; margin:5px;">
<input type="text" id="dist">
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('mappa'), {
center: {lat: 41.90278349999999, lng: 12.496365500000024},
zoom: 8,
mapTypeControl: false,
streetViewControl: false,
fullscreenControl: false,
});
var input = document.getElementById('ricerca');
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.bindTo('bounds', map);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
autocomplete.addListener('place_changed', function() {
var place = autocomplete.getPlace();
if (!place.geometry) {
return;
}
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
map.setZoom(8);
} else {
map.setCenter(place.geometry.location);
}
// Set the position of the marker using the place ID and location.
marker1.setPlace({
placeId: place.place_id,
location: place.geometry.location,
});
marker1.setVisible(true);
var marker2 = new google.maps.Marker({
position: new google.maps.LatLng(40.851798 , 14.26812),
});
var p1 = place.geometry.location;
var p2 = marker2.position;
function calcDistance(p1, p2) {
return (google.maps.geometry.spherical.computeDistanceBetween(p1, p2) / 1000).toFixed(2);
}
var distanza = calcDistance(p1, p2);
document.getElementById('dist').value = distanza;
if (distanza < 200.00)
{marker2.setMap(map);}
if (distanza > 300.00)
{marker2.setMap(null);};
});
var marker1 = new google.maps.Marker({
map: map,
});
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=[qui bisogna mettere la propria API-KEY]&libraries=geometry,places&callback=initMap"></script>
</body>
</html>
