html - 两个谷歌地图重叠

Question

我在页脚内的一页中使用了两个谷歌地图

       <div class="footer-text col-md-6">
           <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script><div style="overflow:hidden;height:120px;width:335px;"><div id="gmap_canvas" style="height:120px;width:335px;"><style>#gmap_canvas img{max-width:none!important;background:none!important}</style><a class="google-map-code" href="http://www.themecircle.net" id="get-map-data">themecircle.net</a></div></div><script type="text/javascript"> function init_map(){var myOptions = {zoom:14,center:new google.maps.LatLng(34.0073753,74.79368279999994),mapTypeId: google.maps.MapTypeId.ROADMAP};map = new google.maps.Map(document.getElementById("gmap_canvas"), myOptions);marker = new google.maps.Marker({map: map,position: new google.maps.LatLng(34.0073753, 74.79368279999994)});infowindow = new google.maps.InfoWindow({content:"<b>Lelafe</b><br/>Srinagar<br/> Rangreth" });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 class="footer-text col-md-6">
           <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script><div style="overflow:hidden;height:120px;width:335px;"><div id="gmap_canvas" style="height:120px;width:335px;"><style>#gmap_canvas img{max-width:none!important;background:none!important}</style><a class="google-map-code" href="http://www.themecircle.net" id="get-map-data">themecircle.net</a></div></div><script type="text/javascript"> function init_map(){var myOptions = {zoom:14,center:new google.maps.LatLng(34.0073753,74.79368279999994),mapTypeId: google.maps.MapTypeId.ROADMAP};map = new google.maps.Map(document.getElementById("gmap_canvas"), myOptions);marker = new google.maps.Marker({map: map,position: new google.maps.LatLng(34.0073753, 74.79368279999994)});infowindow = new google.maps.InfoWindow({content:"<b>Lelafe</b><br/>Srinagar<br/> Rangreth" });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 中......请帮助!!

Answer 1

试试这个

<div class="footer-text col-md-6">
           <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script><div style="overflow:hidden;height:120px;width:335px;"><div id="gmap_canvas" style="height:120px;width:335px;"><style>#gmap_canvas img{max-width:none!important;background:none!important}</style><a class="google-map-code" href="http://www.themecircle.net" id="get-map-data">themecircle.net</a></div></div><script type="text/javascript"> function init_map(){var myOptions = {zoom:14,center:new google.maps.LatLng(34.0073753,74.79368279999994),mapTypeId: google.maps.MapTypeId.ROADMAP};map = new google.maps.Map(document.getElementById("gmap_canvas"), myOptions);marker = new google.maps.Marker({map: map,position: new google.maps.LatLng(34.0073753, 74.79368279999994)});infowindow = new google.maps.InfoWindow({content:"<b>Lelafe</b><br/>Srinagar<br/> Rangreth" });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 class="footer-text col-md-6">
           <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script><div style="overflow:hidden;height:120px;width:335px;"><div id="gmap_canvas2" style="height:120px;width:335px;"><style>#gmap_canvas img2{max-width:none!important;background:none!important}</style><a class="google-map-code" href="http://www.themecircle.net" id="get-map-data">themecircle.net</a></div></div><script type="text/javascript"> function init_map2(){var myOptions = {zoom:14,center:new google.maps.LatLng(34.0073753,74.79368279999994),mapTypeId: google.maps.MapTypeId.ROADMAP};map = new google.maps.Map(document.getElementById("gmap_canvas2"), myOptions);marker = new google.maps.Marker({map: map,position: new google.maps.LatLng(34.0073753, 74.79368279999994)});infowindow = new google.maps.InfoWindow({content:"<b>Lelafe</b><br/>Srinagar<br/> Rangreth" });google.maps.event.addListener(marker, "click", function(){infowindow.open(map,marker);});infowindow.open(map,marker);}google.maps.event.addDomListener(window, 'load', init_map2);</script>
       </div>