Nida Nida - 5 months ago 66
HTML Question

Two google maps overlapping

I have used two google maps in one page inside footer

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


Now the second google map is overlapped over first one despite being in seperate divs... Please help!!

Answer

Try This

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