Question

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

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

目前我收到的错误是“未捕获的ReferenceError：google未定义”

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>

Answer 2

如上所述，代码需要放在我的回调函数中。

{'gopal.ramasammycook@gmail.com': 1640, 'louis@media.berkeley.edu': 7207, 'cwen@
iupui.edu': 8888, 'antranig@caret.cam.ac.uk': 1911, 'rjlowe@iupui.edu': 10678, '
gsilver@umich.edu': 10140, 'david.horwitz@uct.ac.za': 4205, 'wagnermr@iupui.edu'
: 2500, 'zqian@umich.edu': 16804, 'stephen.marquard@uct.ac.za': 7490, 'ray@media
.berkeley.edu': 168}

如何将地址转换为经度和纬度，然后在页面上显示地图

2 个答案: