住所を緯度と経度に変換してからページに地図を表示する方法

Question

私の住所を経度と緯度に変換するためにgoogle maps apiを使用しようとしています。

PHPから/ Laravelを使用してDBからアドレスを取得するのにちょっと注意してください。だから、ニューヨークのハードコーディングされた価値は、私はこの仕事を得た後に動的になります。

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> 

"捕捉されないにReferenceErrorを：Googleが定義されていません"

Answer 1

上記のように、コードは自分のコールバック関数の中に入れる必要がありました。

<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> 

Answer 2

変更順序をスクリプトの一覧

<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>