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

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

карта создается с помощью:

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

а сбой - тот же, даже без маркеров.

Ответ 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...

Ответ 2

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

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

Ответ 3

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

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

Ответ 4

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

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

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

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

Ответ 5

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

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

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

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

Ответ 6

, если вы используете функцию сетки сетки 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%;
}

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

Ответ 7

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

На самом деле, я подозреваю, что дизайн, используемый на веб-сайте Haroldo, использует Bootstrap.

Я просто публикую это, потому что никто не упомянул Bootstrap, и кто-то может искать решение, зависящее от Bootstrap.

Ответ 8

Я столкнулся с этой проблемой на моем сайте 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>