0

I'm coming across a strange problem as I try to learn Google Maps.

Everything works great as I follow the tutorial from Google Maps.

However things go awry when I try to place the map in a div that is not the body div. For example, instead of 

<body>
    <div id="map-canvas"></div>
</body>

I'm trying this

<body>
    <div id="mycontainer">
        <div id="map-canvas"></div>
    </div>
</body>

Now it stops working! It doesn't make sense, because the Javascript uses a getElementById() function, so the exact location of the id shouldn't matter right?

Live Demo

The Code

<!DOCTYPE html>
<html>
  <head>
    <title>Asynchronous Loading</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body, #map-canvas {
        height: 99%;
        margin: 60px;
        padding: 0px
      }
    </style>
    <script>
function initialize() {
  var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(-34.397, 150.644)
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);
}

function loadScript() {
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&' +
      'callback=initialize';
  document.body.appendChild(script);
}

window.onload = loadScript;

    </script>
  </head>
  <body>
    <div id="myContainer">
        <div id="map-canvas"></div>
    </div>
  </body>
</html>
CodyBugstein
  • 21,984
  • 61
  • 207
  • 363

1 Answers1

3

You need height & width to make the map appear. either body or <div id="mycontainer"> or <div id="map-canvas"> need to have height & width set with fix number not percentage. Read similar question

your fiddle http://jsfiddle.net/6JR39/1/

Community
  • 1
  • 1
wayne
  • 3,410
  • 19
  • 11