2016-06-13 24 views
0

ich zwei Google Maps auf einer Seite innerhalbZwei Google Maps überlappende

Fußzeile verwendet haben
 <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> 

Nun wird der zweite google map über erste überlappt wird trotz in separaten divs zu sein ... Bitte helfen !! Versuchen

+1

nur jsFiddle Link teilen? – Thinker

+2

Sie erstellen zwei Karten mit derselben ID. Ändern Sie die ID eines jeden und sehen Sie, ob es Ihnen hilft. – Lal

Antwort

2

Diese

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