我们在不同的页面上使用三种不同的地图，而且它在Chrome中工作，但是？

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 API。这可能会导致意外的错误。

这是来自Chrome的控制台错误：

匿名Ob {消息："initMap不是一个函数“，名称："InvalidValueError"，堆栈：”新Ob的错误↵“(https://maps.googleapis.com/m…↵，但所有内容都以Chrome显示，Mozzila中缺少一张地图)。其他人能给我一个解决办法吗？

更新:如果你问自己为什么我要两次调用api。因为如果我只从顶部调用它一次，那么两个浏览器都丢失了两张地图。我相信它与调用函数有关联，因为在一个浏览器(阅读Mozilla)中，如果从顶部调用映射api，它会调用它；在Chrome中，如果api调用是从底部调用的，则调用它。如果我把它放进去一次，然后在相应的浏览器中，它会说它错过了InitMap。

Answer 1

我需要添加到地图、jquery.main.js和分析中的全部内容是

延时

在脚本标签的末尾。对于那些自问的人来说，这是为什么？这是因为(根据我的研究) google.maps和google.analytics共享了一些库

这样做是在页面之后加载javascript，并在加载其他内容之后加载。(CSS和其他javascripts)，它也分别称它为两个库(分析和映射)。