Google map inside multiple divs not showing

Question

I am embedding Google Map on my webpage but it is only displaying gray without the actual map.

The Google Map is inside a <section> and inside multiple <div>. Here is the code:

<section id="contact" class="container dark second">
  <div class="content">
    <div class="title icon-phone">
      <h1>Contact <span>We would like to hear from you.</span></h1>
      <!--<div class="description"> <a href="#"><img src="images/icons/instagram.png" alt="" class="social"></a> <a href="#"><img src="images/icons/flickr.png" alt="" class="social"></a> <a href="#"><img src="images/icons/dribbble.png" alt="" class="social"></a></div>-->
    </div>
    <div class="full">
      <div id="contact-form">
        <form id="contact-us" action="email.php" method="post">
          <div class="column-half">
            <div class="formblock">
              <input type="text" name="name" id="contactName" class="txt requiredField" placeholder="Name:">
            </div>
            <div class="formblock">
              <input type="text" name="position" id="contactName" class="txt requiredField" placeholder="Position:">
            </div>
            <div class="formblock">
              <input type="text" name="company" id="contactName" class="txt requiredField" placeholder="Company:">
            </div>
            <div class="formblock">
              <input type="text" name="email" id="email" class="txt requiredField email" placeholder="Email:">
            </div>
            <div class="formblock">
              <input type="text" name="contact" id="website" class="txt website" placeholder="Contact No.:">
            </div>
            <div class="formblock">
              <select name="category">
                <option value="">--Select Message Category--</option>
                <option value="Feedback">Feedback</option>
                <option value="Inquiry">Inquiry</option>
                <option value="Support">Support</option>
              </select>
            </div>
            <div class="formblock">
              <textarea name="comments" id="commentsText" class="txtarea requiredField" placeholder="Message:"></textarea>
            </div>
            <button name="submit" type="submit" class="subbutton"></button>
        </form>
          </div>
          <div class="column-half last">
                        <div id="map-canvas">
                        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
                            <div style="overflow:hidden;height:100%;width:100%;">
                                <div id="gmap_canvas" style="height:100%;width:100%;"></div>
                                    <style>#gmap_canvas img{max-width:none!important;background:none!important}</style>
                            </div>
                        <script type="text/javascript"> 
                            function init_map(){
                                var myOptions = {zoom:17,center:new google.maps.LatLng(14.575681,120.993867),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(14.575681, 120.993867)});
                                infowindow = new google.maps.InfoWindow({content:"<b>Columbia Technoologies, Inc.</b><br/>1136 - 1146 J. Nakpil St. Malate, Manila" });
                                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>-->
            <p>Contact Us</p>
          </div>
      </div>
    </div>
  </div>
</section>

I have tried setting height:100% to <html>, <body> and all parent <div> of #gmap_canvas but to no avail.

The weird thing is, I have tried to isolate the said map code, and it is working fine!

<!DOCTYPE html>
<head>
    <title>Contact Template</title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="bw/css/templatemo_style.css" rel="stylesheet" type="text/css">  
</head>
<body>
                        <div id="map-canvas">
                        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
                            <div style="overflow:hidden;height:100%;width:100%;">
                                <div id="gmap_canvas" style="height:100%;width:100%;"></div>
                                    <style>#gmap_canvas img{max-width:none!important;background:none!important}</style>
                                    <a class="google-map-code" href="http://www.trivoo.net/gutscheine/deichmann/" id="get-map-data">trivoo.net</a>
                            </div>
                        <script type="text/javascript"> 
                            function init_map(){
                                var myOptions = {zoom:17,center:new google.maps.LatLng(14.575681,120.993867),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(14.575681, 120.993867)});
                                infowindow = new google.maps.InfoWindow({content:"<b>Columbia Technoologies, Inc.</b><br/>1136 - 1146 J. Nakpil St. Malate, Manila" });
                                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>


</body>
</html>

I have also wrapped the isolated code inside a <section> and multiple <div>, and it is still working, though I didn't put the CSS files from the first webpage.

What could be the problem?

The CSS is the problem... Your map div doesn't have a size (defining it as 100% of something that doesn't have a size doesn't work, you have to go all the way up to html/body or a fixed size div) ([fiddle](http://jsfiddle.net/geocodezip/6npmm49d/1/)) — geocodezip, Feb 22 '17 at 03:49
Possible duplicate of [Map isn't showing on Google Maps JavaScript API v3 when nested in a div tag](http://stackoverflow.com/questions/16349476/map-isnt-showing-on-google-maps-javascript-api-v3-when-nested-in-a-div-tag) — geocodezip, Feb 22 '17 at 04:35

score 0 · Answer 1 · answered Feb 22 '17 at 03:02

It seems like an issue when using % units. It should works if you trigger the resize event:

jQuery(document).ready(function() {
    // resize map on window resize
    jQuery(window).resize(function() {
        google.maps.event.trigger(map, 'resize');
    });

    // resize map
    google.maps.event.trigger(map, 'resize');
});

score 0 · Accepted Answer · answered Feb 23 '17 at 09:02

Update:

Strangely enough, I've made it work by referencing all my CSS and JavaScript codes on the <head> of my webpage (the CSS codes were referenced on the <head> but the JavaScript codes were referenced before the </body>).

I am not sure if which of my JavaScript codes influenced Google Map to act like that, but well, if it's working then it ain't stupid!

Google map inside multiple divs not showing

2 Answers2