maplace.js 没有显示谷歌地图答案

【问题标题】：maplace.js not showing the google mapmaplace.js 没有显示谷歌地图
【发布时间】：2014-12-27 14:07:52
【问题描述】：

我按照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 或网络错误。

【问题讨论】：

标签： jquery html google-maps-api-3

【解决方案1】：

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

div 必须有一些 width 和 height。

所以代码应该是这样的-

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

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

<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>

重新-

&key=YOUR_API_KEY（添加从here 生成的API 密钥）部分是可选的。如果您使用任何 API 密钥所需的服务（例如查找路线、查找距离等），则将需要它。

【讨论】：

问题不在于 API_KEY 而在于 div 大小。这从要求中不清楚
是的，我已经添加了这一点，因为有人可能会因为阅读 API 文档而感到困惑 :)

【解决方案2】：

谷歌地图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/

【讨论】：

库变了，我更新一个当前的
确实，maplace 脚本现在是 //maplacejs.com/dist/maplace.min.js。我将 jsfiddle 演示从 jsfiddle.net/9u1cuh2w/1 更新为 jsfiddle.net/9u1cuh2w/45