Question

这是我的整个代码，我不知道为什么它不起作用。我知道之前曾问过这个问题，但我仍然没有找到这个代码的解决方案。我需要放置多个谷歌地图...我可以用一个，但是当我尝试初始化更多时，它不起作用：

    <html>
    <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Best Bikeparks</title>
    <style>
    html, body {
    height:100%
    margin: 0;
    padding: 0;
    }
    #map1 {
    width: 175px;
    height: 120px;
    background-color: #CCC;
    }
    #map2 {
    width: 175px;
    height: 120px;
    background-color: #CCC;
    }
    #map3 {
    width: 175px;
    height: 120px;
    background-color: #CCC;
    }
    </style>
    </head>
    <body>
    <div id="map1"></div>
    <div id="map2"></div>
    <div id="map3"></div>
    <script>
    function initialize() {
    var myLatlng1 = new google.maps.LatLng(39.630159,-84.175937);
    var myLatlng2 = new google.maps.LatLng(33.677705,-117.852974);
    var myLatlng3 = new google.maps.LatLng(51.520614,-0.121825);
    var mapOptions1 = {
    zoom: 15,
    center: myLatlng1,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: 0
    }
    var mapOptions2 = {
    zoom: 15,
    center: myLatlng2,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: 0
    }
    var mapOptions3 = {
    zoom: 15,
    center: myLatlng3,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: 0
    }
    var map1= new google.maps.Map(document.getElementById('map1'),mapOptions1);
    var map2 = new google.maps.Map(document.getElementById('map2'),  mapOptions2);
    var map3 = new google.maps.Map(document.getElementById('map3'), mapOptions3);

    var marker1 = new google.maps.Marker({
    position: myLatlng1,
    map: map1,
    title: 'Herastrau'
    });
    var marker2 = new google.maps.Marker({
    position: myLatlng2,
    map: map2,
    title: 'Insbruck'
    });      
    var marker3 = new google.maps.Marker({
    position: myLatlng3,
    map: map3,
    title: 'Blala'
    });
    }  
    </script>


    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key= MyAPI">
    </script>
    </body>
    </html>

Answer 1

删除第3行上google地图javascript文件的引用（您将其添加到底部）并更改您的api密钥引用以使回调“＆amp; callback = initialize”

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

无法在一个页面中添加多个谷歌地图？

1 个答案: