Question

I am trying to get google maps api v3 to work, and well, it does! but ONLY when I set the div that displays the map to have an id of “map_canvas”. Is that Id required? What if you want to display multiple maps on one page?

I am setting the id in BOTH my js and html markup

It works flawlessly like this:

JS

<script type="text/javascript" >
 function initialize() {
    var mapOptions = {
     center: new google.maps.LatLng(-34.397, 150.644),
      zoom: 8,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
 }
</script>

HTML

 <div style="width:300px; height:300px;">
  <div style="width:100% height:100%" id="map_canvas"></div>
 </div>

It loads the map according to firebug, but doesn’t display anything when I do this:

JS

<script type="text/javascript" >
 function initialize() {
    var mapOptions = {
     center: new google.maps.LatLng(-34.397, 150.644),
      zoom: 8,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("anyotherid"), mapOptions);
 }
</script>

HTML

 <div style="width:300px; height:300px;">
  <div style="width:100% height:100%" id="anyotherid"></div>
 </div>

Update

I uploaded an example page that reporduces my problem at:
Example at athleticaustin.com/spots/test

One peculiarity that I have noticed is that when I edit the id attribute with firebug from map_test to map_canvas on the div that displays the map, it suddenly appears even though the id is still defined as map_test in the JS in the head.

Answer 1

There is a semicolon missing in

<div style="width:100% height:100%" id="anyotherid"></div>

it should be

<div style="width:100%; height:100%" id="anyotherid"></div>

(semicolon after width:100%;), but that semicolon is also missing in your map_canvas snippet, so it is probably not the issue, unless you copy/paste’d wrongly.