Hello, I'm trying to use the Google Maps API and the div that is going to contain the map works only when not inside another div. I've created a little sample code with two maps, the first works the second doesn't. If I remove the doctype of this piece of code, both work. Any ideas why?
http://gist.github.com/raw/466680/c437e3af613004348f70e67dc8919d4440248e95/map.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <meta name="viewport" content="initial-scale=1.0, user- scalable=no" /> <meta content='application/xhtml+xml; charset=UTF-8' http- equiv='content-type' /> <style type='text/css'> html { height: 100% } body { height: 100%; margin: 0px; padding: 0px } #map_canvas { height: 50% } #map_canvas2 { height: 50% } </style> <title>Map</title> <script src='http://maps.google.com/maps/api/js?sensor=false' type='text/javascript'></script> <script type='text/javascript'> function initialize() { var latlng = new google.maps.LatLng(20, 20); var myOptions = { zoom: 8, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); var map2 = new google.maps.Map(document.getElementById("map_canvas2"), myOptions); } </script> </head> <body onload='initialize()'> <div id='map_canvas'></div> <div> <div id='map_canvas2'></div> </div> </body> </html> If you remove the first map_canvas then you get nothing, if you put only this <div> <div id='map_canvas'></div> </div> you also get nothing. This is how it looks like in Firefox and Chrome: http://imgur.com/p669E.png http://imgur.com/gFZjc.png -- You received this message because you are subscribed to the Google Groups "Google Maps JavaScript API v3" group. To post to this group, send email to [email protected]. To unsubscribe from this group, send email to [email protected]. For more options, visit this group at http://groups.google.com/group/google-maps-js-api-v3?hl=en.
