如何在一个页面中显示两个地图答案

【问题标题】：How to show two maps in a single page如何在一个页面中显示两个地图
【发布时间】：2015-11-06 01:08:03
【问题描述】：

我尝试在我网站的单个页面上添加两个谷歌地图，但它显示在现有地图上。如何在单页上一张一张添加两张谷歌地图？

这里是代码......

<div class="map">
  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
  </script>
  <div style="overflow:hidden;height:500px;width:1600px;">
    <div id="gmap_canvas" style="height:400px;width:1130px;">
    </div>
    <style>
      #gmap_canvas img {
        max-width: none!important;
        background: none!important
      }
    </style>
    <script type="text/javascript">
      function init_map() {
        var myOptions = {
          zoom: 18,
          center: new google.maps.LatLng(10.968203873914659, 79.39677137070021),
          mapTypeId: google.maps.MapTypeId.SATELLITE
        };
        map = new google.maps.Map(document.getElementById("gmap_canvas"), myOptions);
        marker = new google.maps.Marker({
          map: map,
          position: new google.maps.LatLng(10.968203873914659, 79.39677137070021)
        });
        infowindow = new google.maps.InfoWindow({
          content: "<b>Code Shoppy</b><br/>Vatti pilaiyar Koil Road<br/>Upstairs of Chola Ceramics<br/>Kumbakonam-612001"
        });
        google.maps.event.addListener(marker, "click", function() {
          infowindow.open(map, marker);
        });
        infowindow.open(map, marker);
      }
      google.maps.event.addDomListener(window, 'load', init_map);
    </script>
  </div>
</div>

<div class="container">
  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
  </script>

  <div style="overflow:hidden;height:500px;width:600px;">
    <div id="gmap_canvas" style="height:500px;width:600px;"></div>
    <style>
      #gmap_canvas img {
        max-width: none!important;
        background: none!important
      }
    </style>
    <script type="text/javascript">
      function init_map() {
        var myOptions = {
          zoom: 16,
          center: new google.maps.LatLng(10.7904833, 78.70467250000002),
          mapTypeId: google.maps.MapTypeId.HYBRID
        };
        map = new google.maps.Map(document.getElementById("gmap_canvas"), myOptions);
        marker = new google.maps.Marker({
          map: map,
          position: new google.maps.LatLng(10.7904833, 78.70467250000002)
        });
        infowindow = new google.maps.InfoWindow({
          content: "<b>Power Integrated Solutions</b><br/>10A/3 Radhkrishnan Colony, Sasthri Road,<br/> Trichy-17"
        });
        google.maps.event.addListener(marker, "click", function() {
          infowindow.open(map, marker);
        });
        nfowindow.open(map, marker);
      }
      google.maps.event.addDomListener(window, 'load', init_map);
    </script>
  </div>
</div>
</div>

【问题讨论】：

您的代码有问题... 嗯，没有代码

标签： javascript google-maps google-maps-api-3

【解决方案1】：

你有两个带有id="gmap_canvas"的div

id 的必须在 HTML 中是唯一的，否则会发生坏事

【讨论】：

removed or changed ... remove = bad, changed ALL 第二次引用别的东西...我的意思是 ALL 在那一秒“阻塞”，然后有其他错误

【解决方案2】：

您的代码存在一些问题：

您加载了两次 Google 地图 API，这是不必要的
对两张地图使用相同的 ID id="gmap_canvas"
定义函数init_map两次

我修改了您的代码，将 id="gmap_canvas2" 分配给第二张地图，为第二张地图 init_map2 调用了 init 函数，并在开始时仅加载一次 Google 地图 Javascript。

function init_map() {
  var myOptions = {
    zoom: 18,
    center: new google.maps.LatLng(10.968203873914659, 79.39677137070021),
    mapTypeId: google.maps.MapTypeId.SATELLITE
  };
  map = new google.maps.Map(document.getElementById("gmap_canvas2"), myOptions);
  marker = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(10.968203873914659, 79.39677137070021)
  });
  infowindow = new google.maps.InfoWindow({
    content: "<b>Code Shoppy</b><br/>Vatti pilaiyar Koil Road<br/>Upstairs of Chola Ceramics<br/>Kumbakonam-612001"
  });
  google.maps.event.addListener(marker, "click", function() {
    infowindow.open(map, marker);
  });
  infowindow.open(map, marker);
}
google.maps.event.addDomListener(window, 'load', init_map);

function init_map2() {
  var myOptions = {
    zoom: 16,
    center: new google.maps.LatLng(10.7904833, 78.70467250000002),
    mapTypeId: google.maps.MapTypeId.HYBRID
  };
  map = new google.maps.Map(document.getElementById("gmap_canvas"), myOptions);
  marker = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(10.7904833, 78.70467250000002)
  });
  infowindow = new google.maps.InfoWindow({
    content: "<b>Power Integrated Solutions</b><br/>10A/3 Radhkrishnan Colony, Sasthri Road,<br/> Trichy-17"
  });
  google.maps.event.addListener(marker, "click", function() {
    infowindow.open(map, marker);
  });
  infowindow.open(map, marker);
}
google.maps.event.addDomListener(window, 'load', init_map2);

#gmap_canvas img {
  max-width: none!important;
  background: none!important
}

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>

First map
<div class="map">
  <div style="overflow:hidden;height:500px;width:1600px;">
    <div id="gmap_canvas" style="height:400px;width:1130px;">
    </div>
  </div>
</div>

Second map
<div class="container">
  <div style="overflow:hidden;height:500px;width:600px;">
    <div id="gmap_canvas2" style="height:500px;width:600px;"></div>
  </div>
</div>

【讨论】：