Контроль масштабування Google Maps зіпсований

Я використовую API Карт Google (v.3), щоб показати карту з парою маркерів. Нещодавно я помітив, що керування, яке використовується для збільшення карти, заплутане (це не завжди було так). Я поняття не маю, в чому причина.

Оновлення

Спочатку у цій публікації було посилання на сторінку, де ви можете переглянути проблему, але зараз посилання розірвано, тому я її видалив.

Ваш CSS зіпсував це. Видаліть max-width: 100%;у рядку 814 і регулювання масштабування знову виглядатимуть добре. Щоб уникнути таких помилок, використовуйте більш специфічні селектори у вашій CSS.

#myMap_canvas img {
    max-width: none;
}

виправили це для мене, але я також хотів вказати на коментар до питання @Ben: "Ця проблема не виникає з Bootstrap, якщо ви використовуєте is_ map_canvas як ідентифікатор div map". Він правий. Я не використовую Bootstrap, але проблема почала виникати після того, як я змінив ідентифікатор div.

Повернення його до map_canvas виправлено без зміни максимальної ширини.

<div id="map_canvas"></div>

Якщо ви використовуєте Bootstrap, просто дайте йому клас "google-maps". Це працювало для мене.

Як альтернативу, ви можете скинути все для діла Google map як своєрідне рішення в останню чергу:

HTML:

<div class="mappins-map"><div> 

CSS:

.mappins-map img { 
    max-width: none !important; 
    height: auto !important; 
    background: none !important;
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

Просто поділіться відповіддю @ Макс-Фавіллі:

З останньою версією Google Maps api вам потрібно це:

<style>
.gm-style img { max-width: none; }
.gm-style label { width: auto; display: inline; }
</style>

Завдяки @ Max-Favilli

https://stackoverflow.com/a/19339767/3070027

Якщо ви користувач Twitter Bootstrap, вам слід додати цей рядок до CSS:

.gmnoprint img { max-width: none; } 

У мене була ця проблема також і з використанням

.google-maps img {
    max-width: none;
}

не працювало. Я врешті-решт використав

.google-maps img {
    max-width: none !important;
}

і це спрацювало як шарм.

Якщо ви використовуєте чистий CSS Yahoo, дайте своєму діві клас "google-maps", як Bootstrap, і введіть це правило у свій CSS:

.google-maps img {
    max-width: none;
    max-height: none;
}

Наскільки я можу сказати, Pure CSS не має можливості вирішити цю проблему самостійно.

Хлопці, які ви сказали мені, не працюють для мого веб-сайту.

Я використовую Bootstrap V3 і зосередився на функціональності. Основна причина полягала в тому, що я дав своїй карті інший ідентифікатор, а потім CSS-файл, який використовується для відображення масштабування з жовтим хлопцем з Streetvieuw

Я перейменував map_canvas на власника карти, і тоді він працював на мене! Все одно дякую за підказки, що я повинен заглянути у файли CSS!

Я спробував усі вищеперелічені рішення та інші з інших форумів безрезультатно. це було дуже прикро, тому що у мене є ще один не-Wordpress сайт, де код працював ідеально. (Я намагався відобразити карту Google на сторінці Wordpress, але елементи масштабування та Streetview були спотворені).

Я вирішив: створити новий файл html (скопіюйте весь код у Блокнот і назвіть його xyz.html, збережіть як тип "всі файли"). Потім завантажте / ftp його до веб-сайту, а також встановіть нову сторінку Wordpress і використовуйте функцію вбудовування. Під час редагування сторінки перейдіть до текстового редактора (не візуального редактора) та скопіюйте / введіть:

http: // URL-адреса сторінки width = "900" висота = "950">

Якщо ви змінюєте параметри, не забудьте змінити їх в обох аргументах, наведених вище, або ви отримаєте дивні результати.

Туди ми йдемо - можливо, не так розумно, як деякі інші відповіді, але це працювало для мене! Докази тут: http://a-bc.co.uk/latitude-longitude-finder/