title: Searching Multiple Google Maps on 1 Page and Zoom issue
body: <p>I have been getting great help today on Google Map questions and as I work through my code more stuff pop's up. So here is another question I am hoping to get help with. </p>
  
  <p>There are 2 parts</p>
  
  <p><strong>1)</strong> I have tweaked my code to show 2 x Google Maps on the same page. My Google Maps works like this </p>
  
  <p>User Searches for address and the result is </p>
  
  <ul>
  <li>The Map Displays a pin of locations</li>
  <li>Long and lat fields are populated with the coordinates</li>
  <li>Input field called for Office Name is populated with Search Query.</li>
  </ul>
  
  <p>This all works when I have 1 map. But When i add a map2 to the code below, I am not sure how to write the code to split up the results between map and map2</p>
  
  <p>My Code attempt is as follows (Head)</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 xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="content-type" content="text/html; charset=UTF-8"/&gt;
  &lt;script type="text/javascript"
        src="http://maps.googleapis.com/maps/api/js?sensor=true"&gt;
      &lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  
  var geocoder;
  var map,map2;
  
  function initialize(condition) {
      geocoder = new google.maps.Geocoder();
      var latlng = new google.maps.LatLng(53.2948557, -6.139267399999994);
      var mapOptions = {
        zoom: 10,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }
      map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
  
      map2 = new google.maps.Map(document.getElementById('map_canvas2'), mapOptions);  
   }
  
  function codeAddress() {
      var address = document.getElementById('address').value;
      geocoder.geocode( { 'address': address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          map.setCenter(results[0].geometry.location);
          var marker = new google.maps.Marker({
              map: map,
              position: results[0].geometry.location
          });
          document.getElementById("input_15_169").value = marker.getPosition().lat();
          document.getElementById("input_15_167").value = marker.getPosition().lng();
          document.getElementById("input_15_92").value = address;
  
        } else {
          alert('Geocode was not successful for the following reason: ' + status);
        }
      });
    }
  
  &lt;/script&gt;
  </code></pre>
  
  <p></p>
  
  <p>and my body looks like this </p>
  
  <pre><code>&lt;body onload="initialize()" onunload="GUnload()"&gt;
    &lt;p&gt;To Add your Google Map you must first plot your address by searching&lt;/p&gt;
    &lt;p&gt;
      &lt;input id="address" type="textbox" value="" placeholder="Search For Your Address"&gt;
      &lt;input type="button" value="Plot Your Address" onclick="codeAddress()"&gt;
    &lt;/p&gt;
  
    &lt;div id="latlong"&gt;
        &lt;p&gt;Office Name: &lt;input size="20" type="text" id="input_15_92" name="ofn" &gt;&lt;/p&gt;
        &lt;p&gt;Latitude: &lt;input size="20" type="text" id="input_15_169" name="lat" &gt;&lt;/p&gt;
        &lt;p&gt;Longitude: &lt;input size="20" type="text" id="input_15_167" name="lng" &gt;&lt;/p&gt;
      &lt;/div&gt;
  
    &lt;div id="map_canvas" style="width: 600px; height: 400px"&gt;&lt;/div&gt;
  
    &lt;p&gt;To Add your Google Map you must first plot your address by searching&lt;/p&gt;
    &lt;p&gt;
      &lt;input id="address2" type="textbox" value="" placeholder="Search For Your Address"&gt;
      &lt;input type="button" value="Plot Your Address" onclick="codeAddress()"&gt;
    &lt;/p&gt;
  
    &lt;div id="latlong"&gt;
        &lt;p&gt;Office Name: &lt;input size="20" type="text" id="input_16_92" name="ofn" &gt;&lt;/p&gt;
        &lt;p&gt;Latitude: &lt;input size="20" type="text" id="input_16_169" name="lat" &gt;&lt;/p&gt;
        &lt;p&gt;Longitude: &lt;input size="20" type="text" id="input_16_167" name="lng" &gt;&lt;/p&gt;
      &lt;/div&gt;
  
    &lt;div id="map_canvas2" style="width: 600px; height: 400px"&gt;&lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I know in my current javascript above I am missing code to populate the fields for the second map which should look something like this, But I am not sure where to place them</p>
  
  <pre><code>document.getElementById("input_16_169").value = marker.getPosition().lat();
  document.getElementById("input_16_167").value = marker.getPosition().lng();
  document.getElementById("input_16_92").value = address;
  </code></pre>
  
  <p>////</p>
  
  <p><strong>2)</strong> The second question is to do with the zoom. I see I can set my zoom level <code>zoom: 10,</code> at the start of the code which gives the zoom level for the map. I was wondering if I can have a different zoom for when a result is found i.e. after the user searches as I would like that to be a little bit more zoomed in!</p>
  
  <p>Thanks in advance</p>