title: I am trying to load more than one google map on a website given an address. The last map is the only one shown
body: <p>I am trying to take an N number of addresses and be able to display those addresses on N number of Google maps. I have an N number of div elements with the class attribute set to "canvas". When I run my code the last table cell element contains a map of the location I need. None of the other table cells contain a map.</p>
  
  <p>JavaScript:</p>
  
  <pre><code>// JavaScript Document
  
  var geocoder;
  var mapOptions;
  var newLocation;
  var element;
  
  $(document).ready(function()
  {
  
      $.each($(".canvas"),function(i,value)
      {   
          element = value;
          initialize($("tr").eq(i).children("td").text());
      });
  });
  
  function initialize(tr) 
  {
  geocoder = new google.maps.Geocoder();
  codeAddress(tr);
  
  }
  
  function codeAddress(address) 
  {       
      geocoder.geocode({ 'address': address}, function (results, status) {
          if (status == google.maps.GeocoderStatus.OK) {
              newLocation = results[0].geometry.location;
              mapOptions = 
              {
                  center: new google.maps.LatLng(newLocation.Ya,newLocation.Za),
                  zoom: 10,
                  mapTypeId: google.maps.MapTypeId.ROADMAP
              }
              map = new google.maps.Map(element, mapOptions);
  
          } else {
              alert('Geocode was not successful for the following reason: ' + status);
          }
      });
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>  &lt;html&gt;
        &lt;head&gt;
        &lt;/head&gt;
        &lt;body&gt;
           &lt;table&gt;
               &lt;tr&gt;
                    &lt;td&gt;Address 1&lt;/td&gt;&lt;td class="canvas"&gt;&lt;/td&gt;
                    &lt;td&gt;Address 2&lt;/td&gt;&lt;td class="canvas"&gt;&lt;/td&gt;
                    &lt;td&gt;Address 3&lt;/td&gt;&lt;td class="canvas"&gt;&lt;/td&gt;
                    &lt;td&gt;Address 4&lt;/td&gt;&lt;td class="canvas"&gt;&lt;/td&gt;
                    &lt;td&gt;Address 5&lt;/td&gt;&lt;td class="canvas"&gt;&lt;/td&gt;
                    &lt;td&gt;Address 6&lt;/td&gt;&lt;td class="canvas"&gt;&lt;/td&gt;
               &lt;/tr&gt;
           &lt;/table&gt;
       &lt;/body&gt;
    &lt;/html&gt;
  </code></pre>