加载谷歌地图时显示加载图像

Question

我正在使用Google Maps Javascript API在我的网站上显示带有aditional标记的地图.这是触发器

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>

但图像从未显示,只是地图显示之前的空白页.

图像正常工作,因为如果我禁用地图加载功能,图像就在那里.所以我认为谷歌地图会在加载地图之前清除div.

任何想法如何在等待时向用户显示加载反馈？我在API中找不到函数...

Answer 1

通过CSS将GIF添加到Map DIV的背景更容易.

即

HTML

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

CSS

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

加载GIF将保持可见,直到加载地图.如果您使用传感器获取当前位置非常方便,因为这需要一段时间.一旦谷歌地图准备用它自己的图像填充#map,你将无法再看到加载GIF.

Answer 2

您可能尝试将map div包装在另一个div中,并将包含div的背景设置为具有某种动画图形.一般来说,我发现在谷歌地图用作地图的元素中操纵或放置任何东西都不是一个好主意.