показать изображение при загрузке карты Google

Question

Я использую API Карт Google Javascript для отображения карты на моем сайте с дополнительными маркерами. Это триггер

var map = new google.maps.Map(document.getElementById("map_canvas"), settings);

Это отлично работает, но карта отображается в течение нескольких секунд. Я помещаю загрузочное изображение в карту div следующим образом:

<div id="map_canvas" style="width:700px; height:500px"><img src="/image/ajax-loader.gif" /></div>

Но изображение никогда не показывается, только пустая страница, пока не появится карта.

Изображение работает, потому что, если я отключаю функцию загрузки карты, изображение там. Поэтому я думаю, что карта Google очищает div перед загрузкой карты.

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

Answer 1

Проще добавить GIF через CSS на фон Map DIV.

т.е.

html

<div id="map_canvas"></div>

css

#map_canvas {background: transparent url(images/ajax-loading.gif) no-repeat center center;}

GIF загрузки будет отображаться до загрузки карты.Очень удобно, если вы используете датчик для определения текущего местоположения, так как это занимает некоторое время.Как только карты Google будут готовы заполнить #map собственными изображениями, вы больше не сможете видеть загрузочный GIF.

Answer 2

Вы можете попытаться обернуть div карты внутри другого div и установить фон содержащего div, чтобы иметь какую-то анимационную графику. Как правило, я обнаружил, что не стоит манипулировать или помещать что-либо внутри элемента, который Google Карты используют в качестве карты.