javascript - 如何将地址转换为经纬度然后在页面上显示 map

Question

我正在尝试使用 google maps api 将我的地址转换为经度和纬度，然后在页面上显示 map 。

请注意，我正在使用 PHP/Laravel 从数据库中检索地址。因此，尽管它是纽约的硬编码值，但在我开始工作后它将是动态的。

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>

目前我收到“Uncaught ReferenceError: google is not defined”的错误

Answer 1

改变脚本的顺序

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