Google Maps API 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);

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

8 80
google-maps google-maps-api-3

8 ответов:

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

стиль.css

img {max-width: 100%; }

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

стиль.css:

#map_canvas img { max-width: none; }

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

установка " ИМГ Макс-ширина:100%" метод используемый в отзывчивом / жидком дизайне веб-сайта так что изображения изменяются пропорционально, когда браузер изменяется размер. По-видимому, некоторые системы CSS grid начали устанавливать этот стиль по умолчанию. Больше информации о жидких изображениях здесь:http://www.alistapart.com/articles/fluid-images/ не знаю, почему это конфликтует с картой google...

183

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

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

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

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

8

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

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

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

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

2

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

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

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

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

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

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

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

0

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

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

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

0

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