Google Map v3 Инициализация с горизонтальной серой линией w/Основание в Chrome

Ответ 1

Для всех, кто ищет временное решение для этой ошибки:

CSS

.map *, .map *:before, .map *:after {
    -webkit-transform: none !important; 
}

SASS

.map {
  *, *:before, *:after {    
    -webkit-transform: none!important;
  }  
}

Ответ 2

Кажется, это ошибка рендеринга с Chrome (я могу воспроизвести ее в версии 34.0.1847.131), а не с вашим CSS. Это было зафиксировано в Канарских островах (v 36.0.1973.2 канарейка).

В соответствии с этот поток ошибок в gmaps-api-issues:

Исправление находится в Chrome 35, который в настоящее время планируется выпустить в середине мая (вы можете перейти на бета-канал, чтобы получить исправление сейчас или проверить его в Canary build - http://www.chromium.org/getting-involved/dev-channel).

До тех пор, как предположил @user699242, удаление любых тегов заголовков (h1, h2 и т.д.) на вашей странице, похоже, исправить. Конечно, это семантически непривлекательное, хотя, может быть, лучше просто подождать.

Ответ 3

Похоже, что это имеет какое-то отношение к следующему, добавленному встроенными изображениями Google:

-webkit-transform: translateZ(0px)

Наконец сузился до тэгов. Если я удалил все теги h (h1, h2 и т.д.), Серая линия исчезнет. Итак, это похоже на ошибку Chrome (v 34.0.1847.116).

Ответ 4

.gm-style div div *{ 
    -webkit-transform: none !important;
}

Примечание. То же самое, что и решения Nathans, но также гарантирует, что карты по-прежнему можно перетаскивать. Однако это просто временное решение.

Ответ 5

Это происходит для меня на моем сайте http://www.shortwave.am/, но только в новейшей версии Chrome (у меня была версия 33. x, перед которым по какой-то причине не обновлялось, и проблемы там не было, но поскольку я изменился на новый, у меня возникла проблема).

В Firefox все нормально.

Можете ли вы разместить ссылку на свой сайт в качестве примера?

Ответ 6

Я столкнулся с этой проблемой, но с вертикальной серой линией, и это была проблема округления.

Это связано с тем, что div, содержащий холст карты, был установлен на ширину жидкости (50% в моем случае) и чаще всего не приводил к ширине подпикселя.

Чтобы исправить мою проблему, мне пришлось прислушиваться к событию изменения размера холста карты, извлекать и окружать внутреннюю ширину контейнера холста (тот, который имеет ширину, равную 50%), и установить округлую ширину обратно на карту canvas - все это в JavaScript, конечно.

Вот моя разметка HTML:

<div id="mapContainer">
    <div id="mapCanvas"></div>
</div>

Вот мои правила CSS:

#mapContainer {
  width: 50%;
}

#mapCanvas {
  height: 100%;
  width: 100%;
  float: right;
}

Вот исправление JavaScript:

var isResizing = false;

var fixMapCanvasRoundingIssue = function () {
    if (isResizing == false) {
        isResizing = true;

        var width = Math.floor(document.getElementById("mapContainer").getBoundingClientRect().width);

        $("#mapCanvas").width(width);

        // is this needed ?
        google.maps.event.trigger(map, "resize");

        isResizing = false;
    }
}

И вот инициализация карты Google:

var mapCanvas = document.getElementById("mapCanvas");

google.maps.event.addDomListener(mapCanvas, "resize", function () {
    fixMapCanvasRoundingIssue();
});

map = new google.maps.Map(mapCanvas , {
    ...
});

fixMapCanvasRoundingIssue();

Обратите внимание, что я установил холст карты, чтобы плавать вправо, чтобы предотвратить любую проблему разрыва при изменении размера. Это может не понадобиться в вашем случае.

Ответ 7

.gmap-container,
.gmap-container > div.gm-style,
.gmap-container > div.gm-style > div:first-child,
.gmap-container > div.gm-style > div:first-child > div > div:last-child,
.gmap-container > div.gm-style > div:first-child > div > div:last-child * {
    -webkit-transform: none!important;
}

Ответ 8

Если -webkit-transform: none !important; не работает, убедитесь, что ваш браузер не увеличен. Увеличение на 110% вызывает ту же серая линия.

Ответ 9

Просто переключитесь на новую версию API:

<script src="http://maps.googleapis.com/maps/api/js?v=3.14&sensor=false"></script>

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

Ответ 10

Решение, предложенное Optimiertes, кажется несправедливо отмеченным, поскольку оно сработало для меня.

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

#map .gm-style div div *:not(.something-that-needs-transforming){
  -webkit-transform: none !important;
}

Я уверен, что со временем это будет исправлено в Chrome, но мне до сих пор надоело исправлять его.

Другие решения, которые я пробовал, не позволяли карте панорамироваться.

Ответ 11

В моем случае мне нужен был простой способ показать место для ресторана. Все решения не работали для меня, и поэтому я пошел на следующее решение, используя iFrame, с размерами, указанными в моем классе css:

<div class="fluid google_maps">
    <iframe
      width="100%"
      height="100%"
      frameborder="0" style="border:0"
      src="https://www.google.com/maps/embed/v1/place?key=PLACE_APIKEY_HERE
        &q=eiffel tower">
    </iframe>
</div>

Это все, без javascript или что-то еще, всего несколько строк html. Поскольку я не ожидаю более 2kk посетителей в день (бесплатный лимит Google), он идеально подходит для меня. Вам нужно создать ключ API Google, но это 1 минута работы.

Эйфелева башня может быть любым адресом или известным местом, вы обычно заполняете веб-сайт google maps.

Ответ 12

#map *, #map *:before, #map *:after { 
    -webkit-transform: none !important;
}

это правильно, если вы не используете эффект параллакса, но если вы хотите скрыть горизонтальную линию с эффектом параллакса, здесь исправить:

.gm-style > div:first-child {
    background-color: #000000;
}

color # 000000, если ваш цвет фона карты google черный, если другой - измените этот цвет.

отлично работает с эффектом parallax google maps