Ich habe folgendes jsfiddle mit Google Map darauf, aber der Marker ist am unteren Rand des Divs angebracht:

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false"></script>
<div class="row">
    <div class="col-md-4 col-xs-6 map" id="loc-1">
        <div id="map1" class="user_map"></div>
    </div>
</div>

CSS

body {
    margin: 0;
    padding: 0;
    font: 12px sans-serif;
}
h1, p {
    margin: 0;
    padding: 0;
}

.user_map {
  padding-bottom: 58%;
  border: 2px solid #9F8F88;
}

JS

var map;
google.maps.event.addDomListener(window, "load", function () {
    map = new google.maps.Map(document.getElementById("map1"), {
        center: new google.maps.LatLng(0, 0),
        zoom: 14,
    });
    //google.maps.event.trigger(map, 'resize');
    var geocoder = new google.maps.Geocoder();
    var address = "1 Infinite Loop,Cupertino,CA,95014";
    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,
                title: "{{ location.name }}"
            });
            marker.setMap(map);
            var zoom = map.getZoom();
            map.setCenter(results[0].geometry.location, zoom);
        }
    });
});

Wie kann ich es zentriert machen?

Ich habe festgestellt, dass die padding-bottom -Regel sie direkt beeinflusst. Ist es jedoch möglich, das gewünschte Ergebnis zu erzielen, ohne das CSS zu ändern?

P.s. Ich habe viele verwandte Fragen gesucht, aber es funktioniert in meinem Fall nicht, daher bin ich mir sicher, dass ich etwas vermisse.

1
Nikolai Golub 10 Aug. 2015 im 14:29

3 Antworten

Beste Antwort

Grundsätzlich ist results[0].geometry.location bereits ein LatLng, Sie können es direkt für setCenter verwenden (entfernen Sie den Parameter zoom -, in v3 erwartet setCenter nur ein einziges Argument) ::

 map.setCenter(results[0].geometry.location);

Der Grund, warum es immer noch nicht wie erwartet funktioniert (in der Geige), ist jsFiddle. Sie ändern die Größe der Frames, nachdem die Karte erstellt wurde, aber Ihr Skript hat sie nicht erkannt.

Da dies auch auf Ihrer Seite passieren kann, sollten Sie das resize - Ereignis der Karte zu Beginn des Geokodierungs-Rückrufs auslösen.

Die endgültige Arbeitslösung

1
Nikolai Golub 10 Aug. 2015 im 20:09

Sie müssen eine Höhe für Ihren Kartencontainer festlegen:

.user_map {
    height: 300px;
}

Wenn Sie das CSS nicht ändern können, tun Sie dies mit Javascript:

document.getElementById('map1').style.height = '300px';
1
MrUpsidown 10 Aug. 2015 im 11:54

Sie müssen den Breiten- und Längengrad an eine Funktion in der Google Maps-API übergeben.

Im

map.setCenter();

Du musst bestehen

new google.maps.LatLng(latitude, longitude)

Als ganze Zahlen

Auch an der Position der Marker müssen Sie dasselbe tun

-2
BrendanMullins 10 Aug. 2015 im 11:33