Wie man eine Adresse in Längen- und Breitengrad umwandelt und dann eine Karte auf der Seite

anzeigt

Ich versuche, Google Maps API zu verwenden, um meine Adresse in Längen- und Breitengrad zu konvertieren und DANN die Karte auf der Seite anzuzeigen.Wie man eine Adresse in Längen- und Breitengrad umwandelt und dann eine Karte auf der Seite

Nur eine Anmerkung, die PHP/Laravel verwendet, um die Adresse von der DB abzurufen. Obwohl es ein hart codierter Wert von New York ist, wird das dynamisch sein, nachdem ich das funktioniert habe.

Html

<div id="map" style="height:250px"></div>

Javascript

<script> 

    var geocoder = new google.maps.Geocoder(); 
    var address = "new york"; 

    geocoder.geocode({ 'address': address}, function(results, status) { 

     if (status == google.maps.GeocoderStatus.OK) { 
      var latitude = results[0].geometry.location.lat(); 
      var longitude = results[0].geometry.location.lng(); 
      alert(latitude); 
     } 
    }); 

    function initMap() { 
     var myLatLng = {lat: latitude, lng: longitude}; 

     var map = new google.maps.Map(document.getElementById('map'), { 
      zoom: 4, 
      center: myLatLng 
     }); 

     var marker = new google.maps.Marker({ 
      position: myLatLng, 
      map: map, 
      title: 'Hello World!' 
     }); 
    } 




</script> 

<script async defer 
     src="https://maps.googleapis.com/maps/api/js?key=keyremoved&callback=initMap"> 
</script>

Im Moment bin ich den Fehler bekommen "Uncaught Reference: Google ist nicht definiert"

Quelle

2016-08-12 KayTokyo

Sie die obere Hälfte des Codes sind die Ausführung vor 'initMap' genannt wird - initMap genannt wird, sobald die Google Maps API geladen wird - den Code setzen, die oben ist' initMap' innen 'initMap' und Sie‘ Ich bin näher dran, um Ihr Ziel zu erreichen –

Verschieben Sie Ihren Geocoder-Code innerhalb der 'initMap'-Funktion. Sie sehen in der URL der Karten js URI eine Callback-Funktion. Dies wird ausgeführt, sobald das Kartenskript geladen ist. Sie rufen den neuen 'google.maps.Geocoder();' auf, bevor das Skript –

Duplikate von [Adresse statt Länge und Breite mit Google Maps API laden] geladen hat (http://stackoverflow.com/questions/15925980/using) -address-statt-Länge-und-Breite-mit-google-maps-api) – geocodezip

Wie oben erwähnt, musste der Code in meine Callback-Funktion eingefügt werden.

<script>  
     function initMap(address) { 

      var geocoder = new google.maps.Geocoder(); 

      geocoder.geocode({ 'address': address}, function(results, status) { 

       if (status == google.maps.GeocoderStatus.OK) { 
        var latitude = results[0].geometry.location.lat(); 
        var longitude = results[0].geometry.location.lng(); 
       } 

       console.log(latitude); 
       console.log(longitude); 

       var myLatLng = {lat: latitude, lng: longitude}; 

       var map = new google.maps.Map(document.getElementById('map'), { 
        zoom: 4, 
        center: myLatLng 
       }); 

       var marker = new google.maps.Marker({ 
        position: myLatLng, 
        map: map, 
        title: 'Hello World!' 
       }); 

      }); 


     } 




    </script> 

    <script async defer 
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCY2buDtbYIot8Llm_FkQXHW36f0Cme6TI&callback=initMap"> 
    </script>

Quelle

2016-08-12 09:24:56 KayTokyo

Ändern der Reihenfolge von Skripten

<script async defer 
     src="https://maps.googleapis.com/maps/api/js?key=keyremoved&callback=initMap"> 
</script> 
<script> 
    var geocoder = new google.maps.Geocoder(); 
    var address = "new york"; 
    // rest of the code 
</script>

Quelle

2016-08-12 09:12:08 brk

Wie man eine Adresse in Längen- und Breitengrad umwandelt und dann eine Karte auf der Seite

Antwort

Verwandte Themen