title: Google Maps Autozoom
body: <p>I have the following page, which by defaults opens a map centered on France:</p>
  
  <p><a href="http://www.villasdirect.com/_admin/dev/Country_MapV3.asp" rel="nofollow">http://www.villasdirect.com/_admin/dev/Country_MapV3.asp</a></p>
  
  <p>It does seem to auto zoom to a certain extent, however when I look at France or Germany (just a couple of examples) the countries are not zoomed in close enough.  If I search London however, it seems to be pretty much perfect - as in filling the box with a map of London.</p>
  
  <p>You can see the different results here:</p>
  
  <p><a href="http://www.villasdirect.com/_admin/dev/Country_MapV3.asp?l=france" rel="nofollow">http://www.villasdirect.com/_admin/dev/Country_MapV3.asp?l=france</a></p>
  
  <p>What I am aiming to do is the fill the map with the country, town or region, when selected... possible?</p>
  
  <p>Help appreciated as always!</p>
  
  <p>Here is my code too:</p>
  
  <pre><code>&lt;%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%&gt;
  &lt;%
  location = request.QueryString("l")
  if location = "" then location = "France"
  %&gt;
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-    strict.dtd"&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta http-equiv="content-type" content="text/html; charset=UTF-8"/&gt;
  &lt;title&gt;Google Maps&lt;/title&gt;
  &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://maps.google.com/maps/api/js?sensor=false" 
         type="text/javascript"&gt;&lt;/script&gt; 
  </code></pre>
  
  <p>
    </p>
  
  <pre><code>&lt;div id="map" style="width: 800px; height: 600px"&gt;&lt;/div&gt;
  
  &lt;form onsubmit="showAddress(); return false" action="#"&gt;
    &lt;input id="search" size="60" type="hidden" value="&lt;%=location%&gt;" /&gt;
  &lt;/form&gt;
  
  &lt;div id="message"&gt;&lt;/div&gt;
  
  &lt;noscript&gt;&lt;b&gt;JavaScript must be enabled in order for you to use Google Maps.&lt;/b&gt; 
    However, it seems JavaScript is either disabled or not supported by your browser. 
    To view Google Maps, enable JavaScript by changing your browser options, and then 
    try again.
  &lt;/noscript&gt;
  
  &lt;script type="text/javascript"&gt;
  //&lt;![CDATA[
  
  
  var xmlsource = '&lt;markers&gt;&lt;marker Town="Fayence" Region="Provence - Var" type="green" lng="6.694103" lat="43.624076"/&gt;&lt;marker Town="La Cadiere  d\'Azur" Region="Provence - Var" type="green" lng="5.755173" lat="43.196218"/&gt;&lt;marker Town="Villefranche Du Périgord" Region="South West France" type="green" lng="1.080006" lat="44.62966"/&gt;&lt;marker Town="Limetz-Villez" Region="Paris" type="green" lng="1.547366" lat="49.029137"/&gt;&lt;marker Town="Boulogne-Billancourt" Region="Paris" type="green" lng="2.237803" lat="48.84325"/&gt;&lt;marker Town="Saint-Germain-En-Laye" Region="Paris" type="green" lng="2.0934031" lat="48.8955155"/&gt;&lt;/markers&gt;'
  
  var myOptions = {
      zoom: 4,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map"), myOptions);
  
    var infoWindow = new google.maps.InfoWindow;
    $( $.parseXML( xmlsource ) ).find("marker").each(function() {
      var lng = $(this).attr('lng');
      var lat = $(this).attr('lat');
      marker = new google.maps.Marker({
          map:map,
          draggable:true,
          animation: google.maps.Animation.DROP,
          position: new google.maps.LatLng(59.32522, 18.07002)
      });
    });
    google.maps.event.addListener(marker, 'click');
  
    // ====== Create a Client Geocoder ======
    var geo = new google.maps.Geocoder(); 
    geo.geocode({'address': document.getElementById("search").value}, function (results, status) {
       var ne = results[0].geometry.viewport.getNorthEast();
       var sw = results[0].geometry.viewport.getSouthWest();
  
       map.fitBounds(results[0].geometry.viewport); 
       placeMarkers();              
    }); 
  
    function placeMarkers(){
      var xmlList = $.parseXML(xmlsource);
      var markers = $(xmlList).find('marker');
      for (var i = 0; i &lt; markers.length; i++) {
      var latlng = new google.maps.LatLng(parseFloat($(markers[i]).attr("lat")),
                                  parseFloat($(markers[i]).attr("lng")));
      var type = $(markers[i]).attr("type");
      var imgnam = "";
      if(type == "green") {
          imgnam = "http://openmbta.org/images/map/PinDown1Green.png?1306943843";
      }else{
          imgnam = "http://openmbta.org/images/map/PinDown1.png?1306943843";
      }       
      var img = new google.maps.MarkerImage(
          imgnam,
          new google.maps.Size(30,35),
          new google.maps.Point(0,0),
          new google.maps.Point(15,35)
      );
      //add a link to your xml that can be inserted here where I have http://www.google.com
      var html = "&lt;a href='http://www.google.com'&gt;" + $(markers[i]).attr('Region') + ', ' + $(markers[i]).attr('Town') + "&lt;/a&gt;";                                  
      var marker = new google.maps.Marker({position: latlng, map: map, icon: img, html:html});
  
      var infowindow1 = new google.maps.InfoWindow();
      google.maps.event.addListener(marker, 'mouseover', function() {
          infowindow1.setContent(this.html);
          infowindow1.open(map, this);
  
      });
      }
  
    }
  
  &lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt; 
  </code></pre>