谷歌地图api你好世界

时间:2013-12-06 15:39:18

标签: html5 google-maps

我正在学习谷歌地图api v3。所以我去了他们的网站,从开发者指南中找到了Helloworld: 链接:here

<!DOCTYPE html>
<html>
 <head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0; padding: 0 }
  #map-canvas { height: 100% }
</style>
<script type="text/javascript"
  src="https://maps.googleapis.com/maps/api/js?key=API_KEY&sensor=SET_TO_TRUE_OR_FALSE">
</script>
<script type="text/javascript">
  function initialize() {
    var mapOptions = {
      center: new google.maps.LatLng(-34.397, 150.644),
      zoom: 8
    };
    var map = new google.maps.Map(document.getElementById("map-canvas"),
        mapOptions);
  }
  google.maps.event.addDomListener(window, 'load', initialize);
 </script>
  </head>
  <body>
 <div id="map-canvas"/>
  </body>
 </html>

我用api键替换了API_KEY,用true替换了SET_TO_TRUE_OR_FALSE。但我的浏览器给了我:

This page contains the following errors:error on line 12 at column 96:
 EntityRef:expecting';'Below is a rendering of the page up to the first error.

有人可以帮帮我吗?

2 个答案:

答案 0 :(得分:0)

我最近不得不处理Google Map API。我绝对不是专家,但是......

如果您同时删除所有API密钥并将 sensor = SET_TO_TRUE_OR_FALSE 替换为 sensor = false ,则它应该“正常”。

我不确定不使用API​​密钥会产生什么后果。

请在此处查看:http://jsbin.com/aHuKiJIm/1/

答案 1 :(得分:0)

请参阅以下链接。

演示: http://jsfiddle.net/8FSWj/

无需在脚本中设置API密钥。请使用上面演示中使用的脚本。

您必须设置div高度和宽度(以像素为单位)。不要以百分比设置div高度和宽度。

另一个带有邮政编码搜索的演示如下。

搜索演示: http://jsfiddle.net/y829C/1/

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

#map_canvas{
    height: 350px;
    width: 500px;
}