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

-1

这是我的整个代码，我不知道为什么它不起作用。我知道这个问题之前曾被问过，但我仍然没有找到解决这个问题的方法。我需要把多个谷歌地图......我可以用一个做到这一点，但是当我尝试初始化多，这是行不通的：无法在一个页面中添加多个Google地图？

<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>

来源

2016-04-26 Barek

您的标记是无效的。你有2个具有相同ID的div，可能会丢掉东西。尝试修复，看看是否可以解决问题。此外，您将API脚本包含两次，这不是必需的，也可能会导致脚本错误。 –

谢谢，但依然如此。 – Barek

删除提及谷歌的JavaScript文件映射第3行（你在底部加入的话），并改变你的API密钥参考有回调“&回调=初始化”

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

来源

2016-04-26 18:45:23 n3wc

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

回答

相关问题