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

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

Обновить

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

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

#myMap_canvas img {
    max-width: none;
}

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

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

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

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

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

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

Просто поделитесь ответом @ Max-Favilli:

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

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

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

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, присвойте своему div класс google-maps, такой как Bootstrap, и вставьте это правило в свой CSS:

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

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

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

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

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

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

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

http: // page URL width = "900" height = "950">

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

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