Инструменты Google Maps api v3: визуальные искажения?

Я только заметил, что инструменты просмотра gMap отображаются... довольно необычно. Их регионы по-прежнему кажутся правильно определенными - я могу взаимодействовать с ними просто прекрасно, это просто их внешний вид, который выглядит испорченным.

Я не применял какой-либо CSS к какой-либо части карты, и только css, который я применил к контейнеру карты, width:100%; height:100%; z-index:0; (что я обычно делаю).

У меня есть другие элементы на странице с position:absolute; и position:fixed; и некоторые высокие z-index (500 и 1000). Возможно ли, что они вызывают визуальное искажение инструментов Карты?

Я вижу то же самое странное визуальное искажение в последних версиях Chrome, Chrome Canary, Ffx, Safari и Opera (на Mac OSX).

Я проверил dev tools/firebug, и никакой неожиданный CSS не применяется к контейнеру карты или непосредственно к его инструментам.

Вот точный HTML (я удалил другие элементы и css и странность все еще происходит):

<html style="width:100%;height:100%;">
    <head>
        <link rel="stylesheet" href="shared/bootstrap/css/foundation.min.css">
        <link rel="stylesheet" href="shared/bootstrap/css/v2.2.2.min.css">
        <script
            type="text/javascript"
            src="http://maps.googleapis.com/maps/api/js?key=...">
        </script>
        <script type="text/javascript">
            function ginit() {
                var vancouver = new google.maps.LatLng(49.285415,-123.114982);
                var mapOptions = {
                    center: vancouver,
                    zoom: 15,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                var map = new google.maps.Map(
                    document.getElementById("map"),
                    mapOptions
                );
                var infowindow = new google.maps.InfoWindow(),
                    marker;
            }//ginit()
        </script>
    </head>
    <body onload="ginit();" style="width:100%;height:100%;">
        <div id="map" style="width:100%;height:100%;"></div>
    </body>
</html>

EDIT. Похоже, проблема исходит из комбинации Foundation и Bootstrap: удаление одной проблемы устраняет проблему. Также не имеет значения, что никаких элементов на ссылочных классах страниц из libs это все равно искажает.

Я попытался выложить это на скрипке, но я не мог загрузить jsfiddle.net.

Ответ 1

Для будущих пользователей, которые сталкиваются с одной и той же проблемой, вот исправление.

#map img{max-width: inherit;}

Как и другие ответы, это проблема с max-width.

Ответ 2

Bootstrap и Foundation установите { img max-width:100% } для холстов Google Карт. Это приводит к тому, что элементы управления Maps отображаются на экране. Измените css как max-width:none;. [источник]

Предостережение. По-видимому img { max-width: 100% … } является неотъемлемым для изображений с автоматическим изменением размера для гибких макетов, поэтому используйте с осторожностью. [источник]

Ответ 3

Foundation 5 не только разрывает gmap, но и разбивает MapQuest. К счастью, у Goomap и Quest есть класс, позволяющий нам перегружать F5, работая только для отображения карт.

.google-map {
  height: 400px;  // no default height
  color: #191970; // default color for both text and background is white !!!
}

.quest-map {
  height:400px; 
  color: #191970;
}

// Fix Foundation bug with MapQuest
.mqa-display {
  img {max-width: none;}
  label { width: auto; display: inline; }
}

// Fix Foundation bug with GoogleMap
.gm-style {
  img { max-width: none; }
  label { width: auto; display: inline; }
}