Question

我一直试图让两张（需要三张）谷歌地图来处理我的项目。

我有第一个使用它的人;

<div class="map" id="map"></div>



function initMap() {
var uluru = {lat: 54.5973, lng: -5.9301};
var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 4,
  center: uluru
});
var marker = new google.maps.Marker({
  position: uluru,
  map: map
});
}

现在，当我尝试让第二个工作时，它就不起作用了。我试图找到其他解决方案，但没有运气。

这两个其他地图与上面的地图不同。

从一些东西看，它可以像下面一样简单吗？我尝试过类似的东西，但没有运气。

<div class="map" id="map"></div>
<div class="map" id="map__2"></div>

function initMap() {
var uluru = {lat: 54.5973, lng: -5.9301};
var uluru_SecondMap = {lat: 54.5973, lng: -5.9301};
var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 4,
  center: uluru
});
var map_SecondMap = new google.maps.Map(document.getElementById('map__2'), {
  zoom: 4,
  center: uluru
});
var marker = new google.maps.Marker({
  position: uluru,
  map: map
});
var marker_SecondMap = new google.maps.Marker({
  position: uluru,
  map: map
});
}

我认为我可能会比这更难实现，但我发现谷歌本身没有一个例子（他们可能就是我没有看到它）这很奇怪。

感谢您的帮助。

Answer 1

确保你有两个div的适当宽度和高度

并确保您有一个事件来触发initMap（）exacuption

并确保两张地图使用相关的地图对象地图和map_SecondMap

  <div class="map" id="map"  style='height: 300px; width:300px'></div>
  <div class="map" id="map2" style='height: 300px; width:300px'></div>

  function initMap() {
      var uluru = {lat: 54.5973, lng: -5.9301};
      var uluru_SecondMap = {lat: 54.5973, lng: -5.9301};
      var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 4,
        center: uluru
      });
      var map_SecondMap = new google.maps.Map(document.getElementById('map2'), {
        zoom: 4,
        center: uluru_SecondMap
      });
      var marker = new google.maps.Marker({
        position: uluru,
        map: map
      });
      var marker_SecondMap = new google.maps.Marker({
        position: uluru_SecondMap,
        map: map_SecondMap
      });
  }

    google.maps.event.addDomListener(window, 'load', initMap);

Answer 2

我不确定你做错了什么。我几乎可以使用你的代码在同一页面上获取两张地图。我改变了两件事：

我确保divs都有尺寸
我更改了第二个标记以应用于map_SecondMap

以下是整个HTML的有效方式，以防您看到与您不同的内容：

<html>

<head>
    <style>
        .map{
            width: 300px;
            height: 300px;
            margin: 50px;
        }
    </style>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&callback=initMap"
    type="text/javascript"></script>
</head>

<body>
    <div class="map" id="map"></div>
    <div class="map" id="map__2"></div>
    <script>
        function initMap() {
            var uluru = {lat: 54.5973, lng: -5.9301};
            var uluru_SecondMap = {lat: 54.5973, lng: -5.9301};
            var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 4,
            center: uluru
            });
            var map_SecondMap = new google.maps.Map(document.getElementById('map__2'), {
            zoom: 4,
            center: uluru
            });
            var marker = new google.maps.Marker({
            position: uluru,
            map: map
            });
            var marker_SecondMap = new google.maps.Marker({
            position: uluru,
            map: map_SecondMap
            });
        }
    </script>
</body>

</html>

如何生成多个Google地图

2 个答案: