google maps not showing unless id set to map_canvas - google-maps-api-3

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

Is that Id required?
No.
What if you want to display multiple maps on one page?
You use multiple unique ids for the divs.
Here is an example from the documentation that uses "map"
If it isn't working for you, you are doing something wrong. I don't see it in the snippets you have posted. Do you have a live link or a jsfiddle that exhibits the issue?

Answer 2

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.