Google Maps Iframe Embed Nie działa na bootstrap / foundation - jquery, html, css, twitter-bootstrap, zurb-foundation

Google mapuje problem z centrowaniem położenia, gdy img jest ustawione na maks. Szerokość. Istnieje rozwiązanie, które należy umieścić

#map_canvas img {
max-width: none;
}

Nie działa to jednak dla mnie, ponieważ nie używam JavaScript API, więc nie wydaje mi się, że jestem map_canvas. Po prostu umieszczam je za pomocą iFrame.

Kiedy próbuję dodać element div wokół elementu iframe i ustawić parametry, nadal otrzymuję taki sam wynik.

Nie jestem pewien, co napisać / dołączyć do tworzenia map google iframes ładnie się odtwarza.

Odpowiedzi:

Czy korzystasz z interaktywnej mapy lub obrazu statycznej mapy google, którą tworzysz?

Jeśli korzystasz z interaktywnej mapy google przy użyciuiframe musisz upewnić się, że zadeklarujesz właściwość "center" wewnątrz zmiennych mapy. Niestety mapa zostanie wycentrowana dopiero po początkowym załadowaniu strony, co oznacza, że ​​jeśli załadujesz stronę w dużej rozdzielczości i następnie skalowanie w dół mapa będzie niecentralna, ponieważ po utworzeniu mapy centrum zostało zdefiniowane w innym miejscu (odświeżenie przy mniejszej rozdzielczości to naprawi.)

Do interaktywnych Map Google

// Google Maps
var map;
function initialize() {
var mapOptions = {
zoom: 17,
draggable: true,
center: new google.maps.LatLng(38.913914,-94.637427), // this one
mapTypeId: google.maps.MapTypeId.ROADMAP
};

W przypadku statycznych obrazów map Google

deklarując obraz src powinien wyglądać mniej więcej tak:

<img src="/images/maps.googleapis.com/maps/api/staticmap?center=46168&zoom=11
&size=300×300&maptype=roadmap&sensor=false" alt="google map" />

Wystarczy zmienić kilka wartości i możesz umieścić mapę w dowolnym miejscu.

Opcje centrowania

• Miasto / Państwo: Plainfield, IN
• Kod pocztowy: 46168
• Adres: 1917 Hawthorn Drive, Plainfield, IN
• LatLong: 39,77, -86,16