title: Why document.getElementById("id") it does not work?
body: <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>