title: Multiple Google Maps on a single Page?
body: <p>Im trying to display multiple Google Maps on a single page. It is a results page that is dynamically generated per locations in the area. Each div has a map class that I want to run the Google Map off of. As of right now I can only get it to process the information for one div.</p>
  
  <p>I understand that I need to somehow pass Google Maps an array. But I am confused as to how to do this given the uses for my implementation.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="map" data-address="123 easy st city st zip" data-title="location"&gt;&lt;/div&gt;
  &lt;div class="map" data-address="456 easy st city st zip" data-title="location 2"&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>jQuery</strong></p>
  
  <pre><code>$('.map').each(function() {
  
      var geoCode = new google.maps.Geocoder(), 
      container = this;
  
      geoCode.geocode({'address': $(container).data('address')}, function(results, status) {
      var start_options = 0;
  
      if (status == google.maps.GeocoderStatus.OK) {
           var mapOptions = {
               zoom: 14,
               center: new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng()),
               zoomControl: true,
               scaleControl: false,
               scrollwheel: false,
               disableDefaultUI: true,
               mapTypeId: google.maps.MapTypeId.ROADMAP,
  
           }
  
           if (navigator.userAgent.match(/(iPod|iPhone|iPad|Android|Blackberry|Windows Phone|Nokia|HTC|webOS)/)) {
                   mapOptions.draggable=false;
          }
  
          var map = new google.maps.Map(document.getElementById("map"), mapOptions);
  
          var marker = new google.maps.Marker({
              position: results[0].geometry.location,
              animation: google.maps.Animation.DROP,
              map: map,
              title: $(this).data('itemTitle')
          });
  
          google.maps.event.addListener(marker, 'click', toggleBounce);
  
          function toggleBounce() {
                if (marker.getAnimation() != null) {
                  marker.setAnimation(null);
                } else {
                  marker.setAnimation(google.maps.Animation.BOUNCE);
                }
          }
  
          var center;
          function calculateCenter() {
              center = map.getCenter();
          }
  
          google.maps.event.addDomListener(map, 'idle', function() {
              calculateCenter();
          });
  
          google.maps.event.addDomListener(window, 'resize', function() {
              map.setCenter(center);
          });
      } else {
          $(this).parent().hide();
      }
  });
  }); 
  </code></pre>