Управление масштабированием карт Google не работает

Question

Я использую Google Maps API (v.3), чтобы показать карту с парой маркеров. Недавно я заметил, что элемент управления, используемый для масштабирования карты, испорчен (это не всегда было так). Я понятия не имею, в чем причина.

Обновление

В этом сообщении изначально была ссылка на страницу, где вы могли просмотреть проблему, но ссылка теперь не работает, поэтому я удалил ее.

Answer 1

Ваш CSS испортил это.Удалите max-width: 100%; в строке 814, и элементы управления масштабированием снова будут выглядеть хорошо.Чтобы избежать таких ошибок, используйте более конкретные селекторы в вашем CSS.

Answer 2

#myMap_canvas img {
    max-width: none;
}

исправил это для меня, но я также хотел отметить комментарий на вопрос @Ben: «Эта проблема не возникает с Bootstrap, если вы используете is map_canvas в качестве идентификатора карты div». Он прав. Я не использую Bootstrap, но проблема начала возникать после того, как я изменил div id.

Установка обратно в map_canvas исправлена ​​без изменения максимальной ширины.

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

Answer 3

Если вы используете Bootstrap, просто дайте ему класс "google-maps".Это сработало для меня.

В качестве альтернативы вы можете сбросить все для div карты Google как своего рода последнее решение:

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;
}

Answer 4

Просто поделись @ Макс-Фавилли ответ:

В последней версии API Google Maps вам нужно это:

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

Благодаря @ Макс-Фавилли

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

Answer 5

Если вы пользователь Twitter Bootstrap, вы должны добавить эту строку в свой CSS:

.gmnoprint img { max-width: none; } 

Answer 6

У меня тоже была эта проблема, и я использовал

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

не работает. Я в конце концов использовал

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

и это сработало как шарм.

Answer 7

Если вы используете чистый CSS от Yahoo, присвойте своему div класс google-maps, такой как Bootstrap, и вставьте это правило в свой CSS:

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

Насколько я могу судить, Pure CSS не может самостоятельно решить эту проблему.

Answer 8

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

Я решил создать новый html-файл (скопируйте, вставьте весь код в Блокнот и назовите его xyz.html, сохраните как «все файлы»). Затем загрузите / ftp на сайт, настройте новую страницу Wordpress и используйте функцию встраивания. При редактировании страницы перейдите в текстовый редактор (не визуальный редактор) и скопируйте / введите:

http://page Ширина URL = "900" высота = "950">

Если вы измените размеры, не забудьте изменить его в обоих приведенных выше аргументах, иначе вы получите странные результаты.

Итак, мы можем быть не такими умными, как некоторые другие ответы, но у меня это сработало! Доказательства здесь: http://a -bc.co.uk / latitude-longitude-finder /

Answer 9

Те варианты, которые вы, ребята, сказали мне, не работают для моего сайта.

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

Я переименовал map_canvas в mapholder, и тогда он сработал для меня! В любом случае, спасибо за подсказки, которые я должен изучить в файлах CSS!