Question

我按照http://maplacejs.com/#Setup上的设置说明操作。在我的服务器上加载maplace.js以及以下代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>minimal maplace</title>
<script src="//maps.google.com/maps/api/js?sensor=false&amp;libraries=geometry&amp;v=3.7"></script>
<script src="//code.jquery.com/jquery-1.9.0.min.js"></script>
<script src="/js/maplace-0.1.3.js"></script>
<script type="text/javascript">
$(function() {
    new Maplace({
        locations: [
            {
                lat: 45.9, 
                lon: 10.9,
                zoom: 8
            }
        ],
        controls_on_map: false
    }).Load(); 
});
</script>
</head>

<body>
<div id="gmap"></div>
<div id="controls"></div>
</body>

</html>

问题：没有地图显示。

html代码通过了W3C验证器。

浏览器开发者工具不会显示javascript或网络错误。

Answer 1

谷歌地图div

<div id="gmap"></div>

需要一个大小，例如：

<div id="gmap" style="width: 600px; height: 400px"></div>

不工作演示：http://jsfiddle.net/9u1cuh2w/47/

工作演示，另外包含css：http://jsfiddle.net/9u1cuh2w/46/

Answer 2

从MapPlace.JS library，我发现了这个 -

divs 必须有一些宽度和高度。

所以代码应该是这样的 -

＆＃13;

$(function() {
	new Maplace({
		locations: [
			{
				lat: 22.8167, 
				lon: 89.5500,
				zoom: 7
			}
		],
        controls_on_map: false
	}).Load(); 
});

＆＃13;

#gmap {
    width: 400px; 
    height: 400px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//maps.google.com/maps/api/js?sensor=false&amp;libraries=geometry&amp;v=3.7"></script>
<script src="//maplacejs.com/dist/maplace.min.js"></script>

<div id="gmap"></div>
<div id="controls"></div>

＆＃13;

重新 -

＆amp; key = YOUR_API_KEY （从here添加生成的API密钥）部分是可选的。如果你使用任何API密钥所需的服务，如寻找路线，找到距离等，将需要它。

maplace.js没有显示谷歌地图

2 个答案:

重新 -