两个Google地图显示在一个页面上

Question

尝试在一个页面上显示两个地图。我已经设法显示但只能删除第二个地图引脚...我认为第二个地图覆盖第一个引脚但需要帮助

Windows Integrated Security

Answer 1

不要创建多个initialize函数，将相关内容放在一个函数中。

proof of concept fiddle

代码段

＆＃13;

＆＃13;

var myCenter = new google.maps.LatLng(51.059955, -114.211807);
var myCenter2 = new google.maps.LatLng(50.9156772, -113.9640719);

function initialize() {
  var mapProp = {
    center: myCenter,
    zoom: 14,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
  var marker = new google.maps.Marker({
    position: myCenter,
    animation: google.maps.Animation.DROP,
    icon: 'http://www.fergusandbix.com/images/FB-pin.png'
  });
  marker.setMap(map);

  var mapProp2 = {
    center: myCenter2,
    zoom: 14,
    mapTypeId: google.maps.MapTypeId.ROADMAP2
  };
  var map = new google.maps.Map(document.getElementById("googleMap2"), mapProp2);
  var marker = new google.maps.Marker({
    position: myCenter2,
    animation: google.maps.Animation.DROP,
    icon: 'http://www.fergusandbix.com/images/FB-pin.png'
  });
  marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);

＆＃13;

html,
body {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

#googleMap,
#googleMap2 {
  height: 100%;
  width: 50%;
  margin: 0px;
  padding: 0px
}

#googleMap {
  float: left;
}

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="googleMap"></div>
<div id="googleMap2"></div>

＆＃13;

＆＃13;

＆＃13;