Note that there are some explanatory texts on larger screens.

plurals
  1. POGoogle Maps doesn't work when inside a div
    primarykey
    data
    text
    <p>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?</p> <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt; &lt;html&gt; &lt;head&gt; &lt;meta name="viewport" content="initial-scale=1.0, user-scalable=no" /&gt; &lt;meta content='application/xhtml+xml; charset=UTF-8' http-equiv='content-type' /&gt; &lt;style type='text/css'&gt; html { height: 100% } body { height: 100%; margin: 0px; padding: 0px } #map_canvas { height: 50% } #map_canvas2 { height: 50% } &lt;/style&gt; &lt;title&gt;Map&lt;/title&gt; &lt;script src='http://maps.google.com/maps/api/js?sensor=false' type='text/javascript'&gt;&lt;/script&gt; &lt;script type='text/javascript'&gt; 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); } &lt;/script&gt; &lt;/head&gt; &lt;body onload='initialize()'&gt; &lt;div id='map_canvas'&gt;&lt;/div&gt; &lt;div&gt; &lt;div id='map_canvas2'&gt;&lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>This is how it looks like in Firefox and Chrome:</p> <p><img src="https://imgur.com/p669E.png" alt="alt text"></p> <p><img src="https://imgur.com/gFZjc.png" alt="alt text"></p> <hr>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload