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

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

Ми зіткнулися з тією ж проблемою. Дизайнер 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 ...

З останньою версією google maps api вам потрібно це:

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

Схоже на проблему з контролем масштабування. Спробуйте додати zoomControl:falseдо своїх опцій.

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

Ну, я отримав виправлення для цього:

У своєму CSS ви додали щось на зразок:

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

намагайтеся не робити це глобальним, і це повинно виправити вас :)

Це спрацювало для мене:

#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>

якщо ви використовуєте функцію сіткової рідини 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%;
}

просто замініть код таким, який він є.

Bootstrap (станом на версію 2.3.2) псує зображення так само, як у прийнятій відповіді.

Насправді, я підозрюю, що дизайн, який використовується на веб-сайті Гарольдо, використовує Bootstrap.

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

Я зіткнувся з цією проблемою на своєму веб-сайті 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>