Google Maps Autozoom

Question

Ich habe die folgende Seite, die standardmäßig eine Karte öffnet, die auf Frankreich zentriert ist:

http://www.villasdirect.com/_admin/dev/Country_MapV3.asp

Es scheint automatisch bis zu einem gewissen Grad zu zoomen, aber wenn ich mir Frankreich oder Deutschland ansehe (nur ein paar Beispiele), sind die Länder nicht nah genug herangezoomt. Wenn ich jedoch nach London suche, scheint es ziemlich perfekt zu sein - also die Box mit einer Karte von London füllen.

Sie können die unterschiedlichen Ergebnisse hier sehen:

http://www.villasdirect.com/_admin/dev/Country_MapV3.asp?l=france

Was ich versuche zu tun, ist, die Karte mit dem ausgewählten Land, der Stadt oder Region zu füllen... möglich?

Hilfe wird wie immer geschätzt!

Hier ist auch mein Code:

<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<%
location = request.QueryString("l")
if location = "" then location = "Frankreich"
%>

Google Maps

JavaScript muss aktiviert sein, um Google Maps verwenden zu können. 
  Es scheint jedoch, dass JavaScript entweder deaktiviert ist oder von Ihrem Browser nicht unterstützt wird. 
  Um Google Maps zu sehen, aktivieren Sie JavaScript, indem Sie Ihre Browseroptionen ändern, und 
  versuchen Sie es erneut.

//<![CDATA[

var xmlsource = '<markers><marker Town="Fayence" Region="Provence - Var" type="green" lng="6.694103" lat="43.624076"/><marker Town="La Cadiere  d\'Azur" Region="Provence - Var" type="green" lng="5.755173" lat="43.196218"/><marker Town="Villefranche Du Périgord" Region="South West France" type="green" lng="1.080006" lat="44.62966"/><marker Town="Limetz-Villez" Region="Paris" type="green" lng="1.547366" lat="49.029137"/><marker Town="Boulogne-Billancourt" Region="Paris" type="green" lng="2.237803" lat="48.84325"/><marker Town="Saint-Germain-En-Laye" Region="Paris" type="green" lng="2.0934031" lat="48.8955155"/></markers>'

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');

  // ====== Ein Client-Geocoder erstellen ======
  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 < 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)
    );
    // Ein Link zu Ihrem XML, der hier eingefügt werden kann, wo ich http://www.google.com habe
    var html = "<a href='http://www.google.com'>" + $(markers[i]).attr('Region') + ', ' + $(markers[i]).attr('Town') + "</a>";                                  
    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);

    });
    }

  }

Answer 1

Es ist eine alte Frage, aber ich denke, ich habe eine Antwort. Anstelle von diesem:

map.fitBounds(results[0].geometry.viewport);

versuche das:

map.fitBounds(results[0].geometry.bounds);

Laut der Google Maps API Dokumentation kann results.geometry.bounds einen leicht unterschiedlichen Ausschnitt zurückgeben. Es ist nicht genau eine Lösung, aber es ist einen Versuch wert.

Zudem habe ich verstanden, dass Google Maps keine Abbildungen auf unendlichen Zoom-Ebenen hat und wenn fitBounds() aufgerufen wird, wird automatisch die höchste Zoom-Ebene ausgewählt, die die angegebenen Grenzen enthält und bei der Abbildungen verfügbar sind. In deinem Fall sind die Grenzen die Grenze von Frankreich und der Ausschnitt passt zur Grenze von Frankreich auf der aktuellen Zoom-Ebene. Wenn du nur eine Zoom-Ebene weiter gehst, gehen die Grenzen von Frankreich aus dem Ausschnitt heraus.

Du kannst die Größe des Ausschnitts ändern. Für eine bestimmte Größe des Ausschnitts (ich kann nicht genau sagen, welche Größe) könntest du eine perfekte Passform erreichen. Du hast ein Beispiel für London angeführt. Ich bin sicher, dass für bestimmte Ausschnittsgrößen auch London nicht perfekt in den Ausschnitt passt. Also, es ist Zufall, dass du auf eine Ausschnittsgröße gestoßen bist, die perfekt für London ist.

Wenn du noch mehr Zoom willst und die Ausschnittsgröße nicht ändern kannst, schlage ich vor, du versuchst es mit getZoom() und erhöhst das Ergebnis um 1 und rufst dann setZoom() auf. Aber auch das führt dazu, dass die Grenzgebiete aus dem Ausschnitt heraus fallen.

Tschüss!

Answer 2

Soweit ich weiß, gibt es keine Möglichkeit, die Informationen über die physischen Abmessungen eines Gebiets (sei es Stadt/Landkreis/Land) von Google zu erhalten.

Wenn Sie eine Datenbank mit den Größen für jede Stadt/Bundesland/Land-Kombination hätten, könnten Sie es wahrscheinlich mit Vergleichen tun.

Ansonsten sind Sie ziemlich auf dieses hier angewiesen.