Google Maps - Wie setze ich die Zoomstufe

Question

Ich habe seit über 4 Jahren versucht, herauszufinden, wie man Google Maps verwendet. Ich bin überglücklich, endlich eine Karte mit der richtigen Adresse generieren zu können.

Das ist mein Javascript.

Ich habe jetzt Probleme mit der Einstellung der Zoomstufe. Ich habe es an jedem der Orte versucht, die ich unten gezeigt habe - aber keiner von ihnen funktioniert. In jedem Fall (unabhängig von der Nummer, die ich als Zoomstufe eingestellt habe) bekomme ich eine sehr detaillierte Karte des jeweiligen Gebäudes.

Kann jemand sehen, was ich falsch mache oder was ich tun muss, damit meine Karte meine Anforderung für eine Zoomstufe erkennt? Ich bekomme keine js Fehler in der Konsole angezeigt.

function initMap() { 
    var map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 5 
    }); 
    var bounds = new google.maps.LatLngBounds(); 
    // var opts = { 
    // zoom: 10, 
    // max_zoom: 16 
    // } 

    var n = addresses.length; 
    for (var i = 0; i < n; i++) { 
    var lat = addresses[i].latitude; 
    var lng = addresses[i].longitude; 
    if (lat == null || lng ==null){ 
     console.log(addresses[i].name + " doesn't have coordinates"); 
    }else { 
     var address = new google.maps.Marker({ 
     position: {lat: parseFloat(lat), lng: parseFloat(lng)}, 
     title: addresses[i].name, 
     map: map //, 
//  zoom: 8 
     }); 
     bounds.extend(address.position); 
    } 
    } 
    map.fitBounds(bounds); 
} 

Hinweis als Antwort auf, warum diese Frage anders ist als viele andere auf SO gefragt. Ich kämpfe besonders mit, wie und wo man die in diesem JS zur Verfügung gestellten Funktionen benutzt. Ich kann keines der JS verstehen, das ich erstellt habe - die obige Version ist das Ergebnis von mehr als 4 Jahren Bemühungen, zu lernen. Ich kann keine generischen Ideen in anderen Posts verwenden und sie so einfach anwenden, wie andere möglicherweise tun können. Bitte ertragen Sie mit mir, während ich versuche zu lernen, wie man mit diesen Sprachen kommuniziert. Es ist etwas, was ich nicht ohne weiteres verstehen konnte.

Auch und speziell auf den Punkt in der Antwort haben Sie markiert - vielleicht war der Code zum Zeitpunkt der Frage gut, aber es sieht aus der Google-Bibliothek, dass der richtige Ausdruck sein sollte "Zoom: 4 "nicht setZoom (etwas). Ich habe beide ausprobiert und kann nicht beide in meinem Code arbeiten.

XOMENA Vorschlag

Xomena Vorschlag machen, habe ich versucht, Zoom- und Zentrum in meiner Map-Funktion zu definieren (obwohl ich nicht suer bin, wenn ich dies an der richtigen Stelle getan haben).

Dies funktioniert nicht. Die Konsole zeigt einen Fehler mit meiner js-Datei, die sagt:

Uncaught SyntaxError: Unexpected identifier 

Nun meine js Datei hat:

function initMap() { 
    var map = new google.maps.Map(document.getElementById('map'), { 
    setZoom: 5 
    setCenter = addresses.first 
    }); 
    var bounds = new google.maps.LatLngBounds(); 
    // var opts = { 
    // zoom: 10, 
    // max_zoom: 16 
    // } 

    var n = addresses.length; 
    for (var i = 0; i < n; i++) { 
    var lat = addresses[i].latitude; 
    var lng = addresses[i].longitude; 
    if (lat == null || lng ==null){ 
     console.log(addresses[i].name + " doesn't have coordinates"); 
    }else { 
     var address = new google.maps.Marker({ 
     position: {lat: parseFloat(lat), lng: parseFloat(lng)}, 
     title: addresses[i].name, 
     map: map //, 
     // zoom: 8 
     }); 
     // bounds.extend(address.position); 
    } 
    } 
    // map.fitBounds(bounds); 
} 

Ich kann nicht ein Beispiel finden, wie dies einzurichten zu arbeiten. Ich habe versucht, den eingestellten Zoom zu setzen und die Mittellinien in jedem Textblock in dieser js-Datei zu setzen, aber ich finde keine Formulierung, die funktioniert.

NÄCHSTE VERSUCH

Ich habe versucht, meine Anwendung zu bewegen JavaScript-Tag sind aus dem Kopf-Tag und unter den Body-Tags auf meinem application.html.erb.

Jetzt habe ich einen Fehler, der sagt:

js?key=AIzaSyAleQgfNH3HRQVUCYnyAzp46xmXW7WrWrc&callback=initMap:95 Uncaught Eb {message: "initMap is not a function", name: "InvalidValueError", stack: "Error↵ at new Eb (https://maps.googleapis.com/m…3HRQVUCYnyAzp46xmXW7WrWrc&callback=initMap:130:73"}message: "initMap is not a function"name: "InvalidValueError"stack: "Error↵ at new Eb (https://maps.googleapis.com/maps/api/js?key=AIzaSyAleQgfNH3HRQVUCYnyAzp46xmXW7WrWrc&callback=initMap:41:365)↵ at Object._.Fb (https://maps.googleapis.com/maps/api/js?key=AIzaSyAleQgfNH3HRQVUCYnyAzp46xmXW7WrWrc&callback=initMap:41:475)↵ at Lg (https://maps.googleapis.com/maps/api/js?key=AIzaSyAleQgfNH3HRQVUCYnyAzp46xmXW7WrWrc&callback=initMap:95:420)↵ at https://maps.googleapis.com/maps/api/js?key=AIzaSyAleQgfNH3HRQVUCYnyAzp46xmXW7WrWrc&callback=initMap:130:58↵ at Object.google.maps.Load (https://maps.googleapis.com/maps/api/js?key=AIzaSyAleQgfNH3HRQVUCYnyAzp46xmXW7WrWrc&callback=initMap:21:5)↵ at https://maps.googleapis.com/maps/api/js?key=AIzaSyAleQgfNH3HRQVUCYnyAzp46xmXW7WrWrc&callback=initMap:129:20↵ at https://maps.googleapis.com/maps/api/js?key=AIzaSyAleQgfNH3HRQVUCYnyAzp46xmXW7WrWrc&callback=initMap:130:73"__proto__: ErrorLg @ js?key=AIzaSyAleQgfNH3HRQVUCYnyAzp46xmXW7WrWrc&callback=initMap:95(anonymous function) @ js?key=AIzaSyAleQgfNH3HRQVUCYnyAzp46xmXW7WrWrc&callback=initMap:130google.maps.Load @ js?key=AIzaSyAleQgfNH3HRQVUCYnyAzp46xmXW7WrWrc&callback=initMap:21(anonymous function) @ js?key=AIzaSyAleQgfNH3HRQVUCYnyAzp46xmXW7WrWrc&callback=initMap:129(anonymous function) @ js?key=AIzaSyAleQgfNH3HRQVUCYnyAzp46xmXW7WrWrc&callback=initMap:130 
kwift.CHROME.min.js:1271 Uncaught SyntaxError: Identifier 'findGoodContent' has already been declared 

I SO Beiträge andere bilden Winkel gesehen habe mit (i verwenden, die nicht), die einem anderen JS-Datei zur Ansicht Hinzufügen empfehlen, wo die Karte ist angezeigt.

Kann jemand helfen, dieses für Schienen zu lösen, in denen eckig nicht benutzt wird?

Answer 1

Die map.fitBounds() -Methode passt die Zoomstufe automatisch so an, dass alle Orte angezeigt werden, die Sie zu LatLngBounds hinzugefügt haben.Wenn Sie die Zoomstufe selbst einstellen möchten, verwenden Sie nicht map.fitBounds() und verwenden Sie stattdessen die map.setZoom() -Methode.

https://developers.google.com/maps/documentation/javascript/reference#Map