Why document.getElementById("id") it does not work?
<p>I have the following code( to draw a map using google map API V3):</p>

<pre><code> &lt;!DOCTYPE html&gt;
    &lt;html&gt;
    &lt;head&gt;
      &lt;meta name="viewport" content="initial-scale=1.0, user-scalable=no" /&gt;
      &lt;style type="text/css"&gt;
        html { height: 100% }
        body { height: 100%; margin: 0px; padding: 0px }
        #map_canvas { height: 100% ; width:100%;}
      &lt;/style&gt;
      &lt;script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;

        var previousPosition = null;

        function initialize() {
          map = new google.maps.Map(document.getElementById("map_canvas"), {
                zoom: 19,
                center: new google.maps.LatLng(48.858565, 2.347198),
                mapTypeId: google.maps.MapTypeId.ROADMAP
              });
        }

        if (navigator.geolocation)
          var watchId = navigator.geolocation.watchPosition(successCallback, null, {enableHighAccuracy:true});
        else
          alert("Votre navigateur ne prend pas en compte la géolocalisation HTML5");

        function successCallback(position){
          map.panTo(new google.maps.LatLng(position.coords.latitude, position.coords.longitude));
          var marker = new google.maps.Marker({
            position: new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
            map: map
          });
          if (previousPosition){
            var newLineCoordinates = [
               new google.maps.LatLng(previousPosition.coords.latitude, previousPosition.coords.longitude),
               new google.maps.LatLng(position.coords.latitude, position.coords.longitude)];

            var newLine = new google.maps.Polyline({
              path: newLineCoordinates,
              strokeColor: "#FF0000",
              strokeOpacity: 1.0,
              strokeWeight: 2
            });
            newLine.setMap(map);
          }
          previousPosition = position;
        };
      &lt;/script&gt;
    &lt;/head&gt;

    &lt;body onload="initialize()"&gt;
      &lt;div id="map_canvas"&gt;&lt;/div&gt;
    &lt;/body&gt;

    &lt;/html&gt;
</code></pre>

<p>it works very well(you can test it), but when i put :</p>

<pre><code>&lt;div id="a"&gt;
 &lt;div id="map_canvas"&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>instead of:</p>

<pre><code> &lt;div id="map_canvas"&gt;&lt;/div&gt;
</code></pre>

<p>it does not work anymore...</p>

<p>why it does not work in the second version ?</p>

<p>PS: I have just given a simple code that represents my real code(just so you understand more easily)...</p>

<p><strong>EDIT</strong>:
I do not really understand, I think this is a problem of selector ... as said Michael Haren.</p>

<p>I tried to do this in my code but when i click in 'click me' it does not work...</p>

<pre><code>&lt;!DOCTYPE html&gt; 
&lt;html&gt;

&lt;head&gt;
&lt;style&gt;
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
/*
 #content,#right = #a,#map_canvas{..
*/
#content,#right { width:70%; height: 100%;margin-left:2%;  box-shadow: 0px 5px 5px 5px #aaa; }

&lt;/style&gt;


&lt;title&gt;Géolocalisation restreinte&lt;/title&gt;
&lt;%@include file="includes/head.html" %&gt;  
&lt;script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;

    function drawMap(){
   var locTunisie= new google.maps.LatLng(33.858565, 10.347198);
   map = new google.maps.Map(document.getElementById("right"), {
            zoom: 6,
            center:locTunisie,
            mapTypeId: google.maps.MapTypeId.ROADMAP
          });     
}



&lt;/script&gt;

&lt;/head&gt;

&lt;body&gt;

&lt;!-- iclure le  header--&gt;
&lt;%@include file="includes/header.html" %&gt;     
&lt;!-- fin inclure --&gt;   

&lt;div id="notification"&gt;&lt;!-- zone de notification --&gt;

&lt;/div&gt;

&lt;!--  Le contenu  --&gt;
&lt;div id="content"&gt;
    &lt;form name="f"&gt;


&lt;!--  draw the map Here  --&gt;
         &lt;div id="right"&gt;

        &lt;/div&gt; 

    &lt;div id="left"&gt;
        &lt;a onclick="drawMap()"&gt;Click Here&lt;/a&gt;

        &lt;input type="date" placeholder="Date debut jj-mm-aaaa" name="dateDeb" id="dateDeb"&gt;&amp;rarr;&lt;input type="date"placeholder="Date Fin jj-mm-aaaa" name="dateFin"id="dateFin"&gt;
        &lt;br/&gt;
        &lt;br/&gt;

        &lt;div class="scrollbar-b"&gt;

        &lt;table class="newspaper-a" summary=""&gt;
    &lt;caption&gt;Liste des Automobile en lignes&lt;/caption&gt;
    &lt;thead&gt;
        &lt;tr&gt;
            &lt;th scope="col"&gt;Type&lt;/th&gt;
            &lt;th scope="col"&gt;Matriculation&lt;/th&gt;
            &lt;th scope="col"&gt;Marque&lt;/th&gt;
            &lt;th scope="col"&gt;Model&lt;/th&gt;


        &lt;/tr&gt;
    &lt;/thead&gt;

           &lt;tbody id="onLine"&gt;

           &lt;/tbody&gt;
         &lt;/table&gt;  
       &lt;/div&gt;  &lt;br/&gt;&lt;br/&gt;   
       &lt;div class="scrollbar-b"&gt;       
        &lt;table class="newspaper-a" summary=""&gt;
    &lt;caption&gt;Liste des Automobile hors lignes&lt;/caption&gt;
    &lt;thead&gt;
        &lt;tr&gt;
            &lt;th scope="col"&gt;Type&lt;/th&gt;
            &lt;th scope="col"&gt;Matriculation&lt;/th&gt;
            &lt;th scope="col"&gt;Marque&lt;/th&gt;
            &lt;th scope="col"&gt;Model&lt;/th&gt;


        &lt;/tr&gt;
    &lt;/thead&gt;

           &lt;tbody id="offline"&gt;

           &lt;/tbody&gt;
         &lt;/table&gt;  

        &lt;/div&gt;
    &lt;/div&gt;  




    &lt;/form&gt;
&lt;/div&gt;      
&lt;!--  Fin contenu  --&gt;    


&lt;!-- iclure le footer--&gt;
&lt;%@include file="includes/footer.html" %&gt;   
&lt;!-- fin iclure--&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
