Google Maps API V3: странные проблемы с отображением пользовательского интерфейса (со скриншотом)

Question

Любой, у кого есть идеи о том, что вызывает этот странный сбой с компонентами пользовательского интерфейса карт Google, будет очень рад услышать от вас!

карта создана с:

        var options = {
        zoom: <?php echo $this->zoom ?>,
        center: new google.maps.LatLng(<?php echo $this->centre_lat ?>, <?php echo $this->centre_lon ?>),
            mapTypeControl: false,
            mapTypeId: google.maps.MapTypeId.ROADMAP                
        }; 

        var map = new google.maps.Map(document.getElementById('map_canvas'), options);

и глюк такой же даже без маркеров.

Answer 1

Мы столкнулись с той же проблемой.Дизайнер CSS использовал этот стиль:

style.css

img {max-width: 100%; }

Вместо того, чтобы отключить управление масштабированием, мы исправили проблему, переопределив стиль img для map_canvasтакие элементы как:

style.css:

#map_canvas img { max-width: none; }

Элемент управления масштабированием теперь отображается правильно.

Установка «img max-width: 100%» - это метод, используемый в адаптивном / гибком дизайне веб-сайта, так что изображения изменяются пропорционально при изменении размера браузера.По-видимому, некоторые системы сетки CSS начали устанавливать этот стиль по умолчанию.Более подробная информация о жидких изображениях здесь: http://www.alistapart.com/articles/fluid-images/ Не уверен, почему это противоречит карте Google ...

Answer 2

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

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

Answer 3

Похоже, проблема с управлением масштабированием.Попробуйте добавить zoomControl:false к вашим параметрам.

На самом деле кажется, что обычный слайдер масштабирования расположен слева от страницы (используйте Firebug> Inspect Element).Может ли быть конфликт CSS?

Answer 4

Ну, я получил исправление для этого:

В вашем CSS вы добавили что-то вроде:

img {max-width: 100%; height: auto;}

старайтесь не делать его глобальным, и это должно исправить вас:)

Answer 5

Это сработало для меня:

#map img { max-width: none !important; } (from Patrick's answer)

атрибут "! Important" позволяет переопределить любой другой стиль, #map - это идентификатор, назначаемый при объявлении нового объекта Gmaps:

<script>
    map = new GMaps({
          div: '#map',           <-  your id
          lat:  *******,
          lng:  *******,
          scrollwheel: false,
          panControl: true,
          ....
          ...
</script>

Answer 6

Я столкнулся с этой проблемой на моем сайте Square Space. У меня не было доступа к таблице стилей CSS. Поскольку вы встраиваете HTML-документ, вы можете просто использовать встроенный CSS для решения проблемы. Я изменил стиль контейнера вместо того, чтобы вносить изменения в весь сайт (что я не мог сделать). Вот что я сделал:

<style>
  html, body, #map-canvas {
    height: 600px;
    width: 100%;
    margin: 0px;
    padding: 0px
  }
  #map-canvas img {max-width: none;}
</style>

Answer 7

Bootstrap (начиная с версии 2.3.2) работает с изображениями так же, как и в принятом ответе.

На самом деле, я подозреваю, что дизайн, используемый на веб-сайте Гарольдо, использует Bootstrap.1004 * Я просто публикую это, потому что никто не упомянул Bootstrap, и кто-то может искать решение для Bootstrap.

Answer 8

если вы используете функцию жидкостной сетки Dreamweaver, настройки по умолчанию должны выглядеть следующим образом:

img, object, embed, video {
    max-width: 100%;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
    width:100%;
}

Попробуйте это:

object, embed, video {
    max-width: 100%;
}
#map_canvas img { max-width: none; }
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
    width:100%;
}

просто замените код как есть.