如何在单个页面中显示两个地图

Question

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

这是代码......

{{1}}

Answer 1

您有两个id="gmap_canvas"

的div

id 必须在HTML中是唯一的，或者发生不好的事情

Answer 2

您的代码存在一些问题：

1. 您已经两次加载Google Maps API，这是不必要的
2. 对两个地图使用相同的ID id="gmap_canvas"
3. 定义函数init_map两次

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

＆＃13;
＆＃13;
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);
＆＃13;
#gmap_canvas img {
  max-width: none!important;
  background: none!important
}
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;