Map isn’t showing on Google Maps JavaScript API v3 when nested in a div tag

by

The problem is with percentage sizing. You are not defining the size of the parent div (the new one), so the browser can not report the size to the Google Maps API. Giving the wrapper div a specific size, or a percentage size if the size of its parent can be determined, will work.

See this explanation from Mike Williams’ Google Maps API v2 tutorial:

If you try to use style=”width:100%;height:100%” on your map div, you get a map div that has zero height. That’s
because the div tries to be a percentage of the size of the <body>, but by default the <body> has an indeterminate
height.

There are ways to determine the height of the screen and use that number of pixels as the height of the map div,
but a simple alternative is to change the <body> so that its height is 100% of the page. We can do this by
applying style=”height:100%” to both the <body> and the <html>. (We have to do it to both, otherwise the
<body> tries to be 100% of the height of the document, and the default for that is an indeterminate height.)

Add the 100% size to html and body in your css

    html, body, #map-canvas {
        margin: 0;
        padding: 0;
        height: 100%;
        width: 100%;
    }

Add it inline to any divs that don’t have an id:

<body>
  <div style="height:100%; width: 100%;"> 
    <div id="map-canvas"></div>
  </div>
</body>

More Related Contents:

  1. Verify if a point is Land or Water in Google Maps
  2. Google Maps v3 – limit viewable area and zoom level
  3. How to make cross-domain AJAX calls to Google Maps API?
  4. Google maps API V3 – multiple markers on exact same spot
  5. Rotating image / marker image on Google map V3
  6. Async Google Maps API v3 undefined is not a function [closed]
  7. Find a point in a polyline which is closest to a latlng
  8. Google Maps API v3: Can I setZoom after fitBounds?
  9. How can I create numbered map markers in Google Maps V3?
  10. Google Maps JavaScript API won’t display markers from KML exported from My Maps
  11. Maximum Lat and Long bounds for the world – Google Maps API LatLngBounds()
  12. Inconsistent behaviour drawing a route between two points in Google Maps v3
  13. Google Maps click event on route
  14. Country specific zoom level in Google Maps API
  15. polyline snap to road using google maps api v3
  16. Multiple markers Google Map API v3 from array of addresses and avoid OVER_QUERY_LIMIT while geocoding on pageLoad
  17. Center Google Maps (V3) on browser resize (responsive)
  18. Can I remove just the popup bubbles of POI’s in Google Maps API v3?
  19. Is there a way to Fix a Google Maps Marker to the Center of its Map always?
  20. Google Maps API v3 Highlight Country Border without using Polygons
  21. Letting users draw curved lines on a google map?
  22. How can I modify the markers?
  23. How to trigger the onclick event of a marker on a Google Maps V3?
  24. Determine if point is within bounding box
  25. AngularJS ng-include inside of Google Maps InfoWindow?
  26. Add CSS styled marker to google maps
  27. Adding simple marker clusterer to google map
  28. Google map multiple overlay no cumulative opacity
  29. Google Directions Api returning 0 routes
  30. Change map opacity outside circle of Google Maps JavaScript API v3

Leave a Comment