[Javascript] Mostrare un marker se è vicino al risultato di ricerca con google maps

Alessandro De Donatis

Nuovo Utente
4 Mar 2015
5
0
1
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:
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>
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.449
338
83
@Alessandro De Donatis
Da regolamento del forum, come tutti noi sei tenuto ad usare il tag
code.gif
quando posti del codice, oppure la funzione codice dalla barra degli strumenti
box inserisci 2.png.JPG

Inoltre ti prego di leggere attentamente il regolamento generale del forum e quello di sezione dove posti
Grazie
Per questa volta te lo sistemo io ma mi raccomando per il futuro
 

Alessandro De Donatis

Nuovo Utente
4 Mar 2015
5
0
1
Ciao a tutti,
sono riuscito a risolvere il problema che avevo. La cosa che ho fatto è spostare la variabile prima della funzione che legge l'indirizzo nella searchbox... Penso che sia un problema di lettura dei dati, giuro che ora mi metto a studiare! Ora devo solo riuscire a far diventare il marker risultato della ricerca draggabile :) Grazie a tutti quelli che hanno anche solo letto questa discussione ed anche a quelli che hanno pensato (giustamente) che devo comprarmi un buon manuale :)
Lascio di seguito il codice modificato così se serve a qualcuno c'è già.

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 marker2 = new google.maps.Marker({
        position: new google.maps.LatLng(40.851798 , 14.26812),
        });

        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 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);}
        else
        {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>
 
Discussioni simili
Autore Titolo Forum Risposte Data
C [Javascript] Mostrare un div cliccando una checkbox Javascript 0
S [Javascript] Slider html: Mostrare immagini su 4 colonne Javascript 20
I Creare un banner temporaneo JavaScript Javascript 0
S Impossibile scorrere un oggetto in JavaScript Javascript 0
N Passare array da php a javascript PHP 5
L Quiz javascript funzionante da migliorare Javascript 0
P errore 404 con javascript Javascript 2
D aiuto funzioni javascript Javascript 1
M Upload immagine con javascript problemi con FormData() Javascript 1
L countdown multiplo javascript Javascript 1
S Problemi Javascript + Aruba Javascript 2
M Inviare un file su un server remoto con JavaScript Javascript 0
T a href="javascript:;" Javascript 1
F Creare elementi html con javascript Javascript 3
A pulsante di update campo mysql con javascript Javascript 2
8 Javascript - PDF Form Javascript 0
B javascript per problemi con pdf e Safari Javascript 0
N informazione javascript Programmazione 0
I Eecuzione di javascript in ciclo foreach php. PHP 7
P javascript:document.forms Javascript 7
S Consiglio esercizio Javascript Javascript 2
MarcoGrazia Aggiungere o rimuovere classi in javascript Javascript 1
P Passaggio id php a javascript PHP 6
R Confrontare il dominio di una mail con una stringa contenente un dominio personalizzato, tutto ciò in php o javascript PHP 0
E lettura da un Database con Javascript jQuery 2
V TRIS in javascript Javascript 1
IClaude Funzione Javascript Javascript 8
Alex_70 Javascript date color Javascript 3
F Convertire JavaScript per la compatibilità nei browser obsoleti Javascript 0
I Passare dei parametri in javascript PHP 0
Shyson Meglio Javascript o HTML? Javascript 4
G Problema verifica palindromo e verifica pari e dispari javascript Javascript 0
M Chiamare pagina php da javascript Javascript 8
M Errore JavaScript per php [objeto HTMLParagraphElement] PHP 0
D Javascript per il download dei dati Javascript 0
grgfede Problema javascript con aruba Javascript 1
R Cerco supporto in programmazione javascript Offerte e Richieste di Lavoro e/o Collaborazione 0
webmachine [PHP] [JAVASCRIPT] Form strano in HTML PHP PHP 1
W Modificare il Type di un Input box in javascript ovunque si trovi Javascript 0
I javascript come caricare una pagina sopra quella corrente in automatico Javascript 2
L [Javascript] Problema salvataggio dati in db Javascript 1
max1974 [Javascript] Grafico chartjs con dati da J.ajax Javascript 3
G Quiz Javascript Javascript 4
A [Javascript] Scrittura su più campi contemporaneamente Javascript 18
F classic asp popolare combo box javascript Presentati al Forum 1
claudio_lorenzo [Javascript] aiuto su jquery per calcolo altezze dom Javascript 1
F [Javascript] comando innerHTML non funziona Javascript 5
alexice51 proggrammi per scrivere in javascript? Javascript 3
max1974 [Javascript] Accordion aria-exspanded Javascript 0
D [Javascript] salvare immagine canvas - paypal Javascript 0

Discussioni simili