无法从地址列表中加载Google地图

时间:2018-07-20 16:48:17

标签: javascript php google-maps google-geocoder

我遇到问题了,我真的尝试了一切!

我的网站上有一个页面,可加载Google地图,并从mysql数据库中获取地址列表。它正在工作,但现在不知何故了。

以下是加载地图的脚本:

<div id="map-canvas"></div>

<script type="text/javascript">
function initMap() {

    var centro = new google.maps.LatLng(45.701116, 9.665754);

    var mapOptions = {
        zoom: 15,
        center: centro
    }


    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);


    var contentString0 = '<div class="title">you are here!<div id="bodyContent"></div>';

    //recupero 
    <?php for($i = 0; $i < count($indirizzi); $i++) { ?>

        var contentString = '<div class="title">'<?php $nome_shop = str_replace(" ", "+",
                    $nomi[$i]); ?> + '<a href=kiwishop.php?shop=<?= $nome_shop ?>>
          <?= $nomi[$i] ?></a></div><div class="address"><?= $sottotitoli[$i] ?></div>';

        var infowindow<?= $i ?> = new google.maps.InfoWindow({
                content: contentString
        });
        var location = "<?= $indirizzi[$i] ?>";
        var geocoder = new google.maps.Geocoder();

    //convert location into longitude and latitude
        geocoder.geocode( { 'address': location}, function(results, status) {
            if (status == 'OK') {
                var lat = results[0].geometry.location.lat();
                var lng = results[0].geometry.location.lng();
            }                
            var marker<?= $i ?> = new google.maps.Marker({
                map: map,
                position: {lat: lat, lng: lng},
                title: '<?= $nomi[$i] ?>',
                icon: '<?= $iconemappa[$i] ?>'
            });

            google.maps.event.addListener(marker<?= $i ?>, 'click', function() {
                <?php for($j = 0; $j < count($indirizzi); $j++) { ?>
                infowindow<?= $j ?>.close();
                //not working
                <?php } ?>
                infowindow<?= $i ?>.open(map,marker<?= $i ?>);
            });
        });

    <?php } ?>
}

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

先前从数据库中检索了变量$ indirizzi(地址),$ nomi等。我在它们上使用了htmlentities()函数。 我认为问题来自特殊字符,例如è或',因为当数据库中行较少时,地图才起作用。 我收到了意外的标识符错误..然后initMap不是一个函数

更新:

我解决了地址中的单引号问题。现在,地图仅加载前11个标记。 这是最后一个加载的标记(marker10)和第一个未加载的标记(marker11)的呈现代码。

var contentString = '<div class="title">' + '<a href=kiwishop.php?shop=Artisan+Cafè>Artisan Cafè</a></div><div class="address">Cocktail esplosivi e tapas deliziose</div>';

        var infowindow10 = new google.maps.InfoWindow({
                content: contentString
        });
        var location = "Via San Bernardino 53, Bergamo";
        var geocoder = new google.maps.Geocoder();

    //convert location into longitude and latitude
        geocoder.geocode( { 'address': location}, function(results, status) {
            if (status == 'OK') {
                var lat = results[0].geometry.location.lat();
                var lng = results[0].geometry.location.lng();
            }                
            var marker10 = new google.maps.Marker({
                map: map,
                position: {lat: lat, lng: lng},
                title: 'Artisan Cafè',
                icon: '../images/icons/borgo-drink.png'
            });
});

var contentString = '<div class="title">' + '<a href=kiwishop.php?shop=Atelier+di+Rita+Patelli>Atelier di Rita Patelli</a></div><div class="address">Composizioni e creazioni con materiali naturali</div>';

        var infowindow11 = new google.maps.InfoWindow({
                content: contentString
        });
        var location = "Via Borgo Canale 9b, Bergamo";
        var geocoder = new google.maps.Geocoder();

    //convert location into longitude and latitude
        geocoder.geocode( { 'address': location}, function(results, status) {
            if (status == 'OK') {
                var lat = results[0].geometry.location.lat();
                var lng = results[0].geometry.location.lng();
            }                
            var marker11 = new google.maps.Marker({
                map: map,
                position: {lat: lat, lng: lng},
                title: 'Atelier di Rita Patelli',
                icon: '../images/icons/borgo-artigiani.png'
            });
            });

对于数据库中所有剩余的地址,我收到此错误:“ InvalidValueError:setPosition:不是LatLng或LatLngLiteral:在属性lat:不是数字中。”

所以我想地理编码器不喜欢这些地址?但是他们是正确的! 我用console.log()打印了所有变量位置,它们很好(我可以看到所有的变量)。我在if语句之前打印了状态变量,但只得到11 OK。如果我仅使用可以工作的marker11创建地图,则生成标记的代码是正确的。但是,不知何故该地图在某个点停止加载标记。

有什么想法吗?

再次感谢!

1 个答案:

答案 0 :(得分:0)

我解决了这个问题。这是由Google Maps限制引起的