Google Maps api 不使用我的全局变量答案

【问题标题】：Google Maps api does not use my global variableGoogle Maps api 不使用我的全局变量
【发布时间】：2018-01-05 09:30:42
【问题描述】：

我在 symfony 2.8 中使用 TWIG 和 Google Maps api 来为地图创建图钉列表。

我已经创建了制作所有引脚数组的脚本，但现在我无法将它放入地图 - 地图没有“看到”我的数组。此外，当我尝试将我的代码放入 InitMap 时，它根本不起作用。

问题：如何将我的locations 与谷歌地图一起使用，并从Twig 获取循环？

代码

var locations = [];
{% for event in incoming_events %}
    var event_id = {{ event.id|json_encode|raw }};
    var event_name = {{ event.name|json_encode|raw }};
    var event_lat = {{ event.geoMarker.lat|json_encode|raw }};
    var event_lng = {{ event.geoMarker.lng|json_encode|raw }};
    console.log(event_id);
    console.log(event_name);
    console.log(event_lat);
    console.log(event_lng);
    locations.push.apply(locations, [event_name, event_lat, event_lng, event_id]);
{% endfor %}
console.log( locations );

谷歌地图脚本

function initMap() {
    var event_one = {lat: 52.742943, lng: 23.450317};
    var map = new google.maps.Map(document.getElementById('tab-mapawydarzen'), {
        zoom: 6,
        center: event_one,
    });

    var infowindow = new google.maps.InfoWindow();
    var marker, i;

    for (i = 0; i < locations.length; i++) {  
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            icon: '../img/pins/notactive.png',
            map: map
        });

        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                marker.setIcon('../img/pins/active.png');
                infowindow.setContent(locations[i][0]);
                infowindow.open(map, marker);
            }
        })(marker, i));
     }
 }

【问题讨论】：

您是否真的验证了twig 变量incoming_events 不为空？
它不是空的，因为在控制台中它给了我完整的数据数组。
Twig 文件中的内联 JS 何时/何地？在哪里/何时调用 initMap？很可能您在定义内联 JS 之前调用了 initMap。
我的 JS 在文件中看起来像这样：'

标签： javascript google-maps google-maps-api-3 twig

【解决方案1】：

答案比我想象的要容易......

Google 脚本是默认的“异步延迟”，而我的普通脚本没有这些变量。当我这样做时：

<script async defer>My script</script><script async defer src="googlemap.js"></script>

效果很好。谢谢你的帮助。

【讨论】：