Question

在我的网站上，我们在两个不同的页面中使用了三个不同的地图（标题中使用了第一个）。在我看来，我无法使其正常工作。因此，目前三分之二的地图都在工作。这是我正在使用的代码：

    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ICLEI</title>
    <link rel="stylesheet" href="{{ asset('css/main.css') }}">
    <link rel="stylesheet" href="{{ asset('css/selection.css') }}">
    <link href="https://fonts.googleapis.com/css?family=Hind:300,400,500,600,700" rel="stylesheet">
    <link href='https://fonts.googleapis.com/css?family=Cairo:400,200,300,600,700,900' rel='stylesheet' type='text/css'>
    <link href="//cdn-images.mailchimp.com/embedcode/slim-10_7.css" rel="stylesheet" type="text/css">
    <script src="https://maps.googleapis.com/maps/api/js?key={{YOUR-API-KEY}}&callback=initMap"
            async defer></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" defer></script>
    <script type="text/javascript">window.jQuery || document.write('<script src="{{ asset('js/jquery-1.11.2.min.js') }}"><\/script>')</script>
    <script type="text/javascript" src="{{ asset('js/jquery.main.js') }}" defer></script>
    <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>

    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-2790248-3"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());

        gtag('config', 'UA-2790248-3');
    </script>
    <script>
    var locations = [{
        lat: 37.4,
        lng: 128.4,
        "government_local_name": "\ud3c9\ucc3d\uad70",
        "city": "Pyeongchang County",
        "country": "Republic of Korea",
        "website": "eng.pc.go.kr"
    },
        {
            lat: 10.5,
            lng: 122.43,
            "government_local_name": "Bayan ng Dumangas",
            "city": "Dumangas",
            "country": "Philippines",
            "website": null
        }];

        var image = '{{ asset('images/marker-office.png') }}';

        function initMap() {
            var options = { imagePath: '{{ asset('images/m') }}'};

            var map = new google.maps.Map(
                document.getElementById('map1'), {
                    zoom: 2,
                    center: {lat: 50.7374, lng: 7.0982},
                }
            );

            var markers = locations.map(function(location, i) {
                return new google.maps.Marker({
                    position: location,
                    icon: image
                });
            });

            var activeInfoWindow;

            markers.forEach(function(marker, i) {
                if(!locations[i].government_local_name){} else {
                    government = locations[i].government_local_name;
                }
                if(!locations[i].city){} else {
                    city = locations[i].city;
                }
                if(!locations[i].country) {} else {
                    country = locations[i].country;
                }
                if(!locations[i].website){} else {
                    website = locations[i].website;
                }
                var infowindow = new google.maps.InfoWindow({
                    content: "<p>"+ government +"</p>" +
                    "<p>"+ city +"</p>" +
                    "<p>"+ country +"</p>" +
                    "<p>"+ website +"</p>"
                });

                marker.addListener('click', function() {
                    if (activeInfoWindow === infowindow) {
                        return;
                    }
                    if (activeInfoWindow) {
                        activeInfoWindow.close();
                    }
                    infowindow.open(map, this);
                    activeInfoWindow = infowindow;
                });
            });

            var markerCluster = new MarkerClusterer(map, markers, options);
        }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key={{YOUR-API-KEY}}&callback=initMap"
            async defer></script>
</head>

只要有人能看到我在这里使用两个带有地图的脚本。使用此代码，所有内容都可以在chrome中运行，但在Mozzila中则无法运行（感谢上帝，我只有这两个浏览器支持）。应该在每个页面上显示的地图无法正常工作。这是mozzila控制台中显示的错误：

未捕获的异常：InvalidValueError：initMap不是函数您已多次包含Google Maps JavaScript API 这一页。这可能会导致意外错误。

这是我在Chrome中遇到的控制台错误：

未捕获的Ob {消息：“ initMap不是函数”，名称：“ InvalidValueError”，堆栈：“在新Ob处出现Error↵（https://maps.googleapis.com/m…kLEDNWcj0IwFZ_Io84oExuE8g＆callback = initMap：162：56“} 但是所有内容都显示在Chrome中，Mozzila缺少一张地图。有人可以给我解决方案吗？

更新：如果您问自己为什么我要两次调用api。因为如果我只从顶部调用一次，那么两个浏览器都会丢失两个地图。我相信它与回调函数有关，因为在一个浏览器（阅读Mozilla）中，如果从顶部调用maps api就会调用它，而在Chrome中如果从底部调用api就会起作用。如果我将其放入一次，然后在各个浏览器中显示它会错过InitMap。

Answer 1

我需要添加到地图和jquery.main.js和分析中的就是

推迟

在脚本标记的末尾。对于那些问自己为什么的人？这是因为（根据我的研究）google.maps和google.analytics共享一些库，并且

这是在页面和其他所有内容加载完成后加载javascript。（CSS和其他javascript），它也分别将其称为两个库（分析和地图）。

我们在不同的页面上使用了三种不同的地图，并且可以在Chrome中使用，但是？

1 个答案: