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

Discussione in 'Javascript' iniziata da Alessandro De Donatis, 30 Luglio 2018.

  1. Alessandro De Donatis

    Alessandro De Donatis Nuovo Utente

    Registrato:
    4 Marzo 2015
    Messaggi:
    5
    Mi Piace Ricevuti:
    0
    Punteggio:
    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>
     
  2. Max 1

    Max 1 Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    29 Febbraio 2012
    Messaggi:
    3.074
    Mi Piace Ricevuti:
    234
    Punteggio:
    63
    Sesso:
    Maschio
    @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
     
  3. Alessandro De Donatis

    Alessandro De Donatis Nuovo Utente

    Registrato:
    4 Marzo 2015
    Messaggi:
    5
    Mi Piace Ricevuti:
    0
    Punteggio:
    1
    Grazie mille e scusate l'errore nell'inserimento del codice :)
     
  4. Alessandro De Donatis

    Alessandro De Donatis Nuovo Utente

    Registrato:
    4 Marzo 2015
    Messaggi:
    5
    Mi Piace Ricevuti:
    0
    Punteggio:
    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>
     
Sto caricando...

Condividi questa Pagina