Я использую API Карт Google (v.3), чтобы показать карту с несколькими маркерами. Недавно я заметил, что элемент управления, используемый для масштабирования карты, испорчен (это было не всегда так). Я не знаю, в чем причина.
У этого сообщения первоначально была ссылка на страницу, где вы могли просмотреть эту проблему, но ссылка сейчас не работает, поэтому я ее удалил.
Ваш CSS испортил это. Удалите max-width: 100%; в строке 814, а органы управления увеличением снова будут выглядеть отлично. Чтобы избежать таких ошибок, используйте более специфичные селектора в вашем CSS.
#myMap_canvas img {
max-width: none;
}
исправил это для меня, но я также хотел указать на комментарий по вопросу от @Ben: "Эта проблема не возникает с Bootstrap, если вы используете map_canvas как идентификатор карты div". Он прав. Я не использую Bootstrap, но проблема возникла после того, как я изменил идентификатор div.
Установив его обратно на map_canvas, он исправил его без изменения максимальной ширины.
<div id="map_canvas"></div>
Если вы используете 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;
}
Просто поделитесь ответом Макс-Фавилли:
С последней версией google maps api вам нужно это:
<style>
.gm-style img { max-width: none; }
.gm-style label { width: auto; display: inline; }
</style>
Благодаря @Max-Favilli
Если вы являетесь пользователем Bootstrap Twitter, вы должны добавить эту строку в свой CSS:
.gmnoprint img { max-width: none; }
У меня тоже была эта проблема и с помощью
.google-maps img {
max-width: none;
}
не работает. В конечном итоге я использовал
.google-maps img {
max-width: none !important;
}
и он работал как шарм.
Если вы используете Yahoo Pure CSS, дайте вашему div класс "google-maps", например Bootstrap, и поместите это правило в свой CSS:
.google-maps img {
max-width: none;
max-height: none;
}
Насколько я могу судить, Pure CSS не имеет возможности самостоятельно исправлять эту проблему.
Те варианты, которые вы, ребята, сказали мне, не работали на моем сайте.
Я использую Bootstrap V3 и сосредоточен на функциональности. Основная причина заключалась в том, что я дал моей карте другой идентификатор, а затем файл CSS, используемый для отображения панели масштабирования с желтым уличным парнем
Я переименовал map_canvas в держателя карт, а затем он работал у меня! Спасибо anyways за подсказки, что я должен смотреть в файлы CSS!
Я попробовал все вышеперечисленные решения, а другие с других форумов безрезультатно. это было очень раздражающе, потому что у меня есть другой сайт без 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/