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

Ответ 1

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

Ответ 2

#myMap_canvas img {
    max-width: none;
}

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

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

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

Ответ 3

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

В качестве альтернативы вы можете reset все для google map 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;
}

Ответ 4

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

С последней версией google maps api вам нужно это:

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

Благодаря @Max-Favilli

fooobar.com/questions/36531/...

Ответ 5

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

.gmnoprint img { max-width: none; } 

Ответ 6

У меня тоже была эта проблема и с помощью

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

не работает. В конечном итоге я использовал

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

и он работал как шарм.

Ответ 7

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

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

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

Ответ 8

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

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

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

Ответ 9

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

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

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

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

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