2016-06-13 107 views
0

我已经使用在第一页第二谷歌地图里面页脚两个谷歌地图重叠

 <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的是......请帮助!

+1

刚刚分享的jsfiddle链接? – Thinker

+2

您正在使用相同的'id'创建两张地图。改变任何一个人的id,看看它是否有帮助.. – Lal

回答

2

尝试这个

<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>