各位好！由于工作关系，自己对Google map api有点自己的心得，在接下来的日子，笔者准备写一系列关于Google map api教程。包括初级、中级、高级，以及自定义Google map api的教程。有兴趣的朋友可以看看，并且有意见及问题可以留言，我会进我最大可能解答各位问题。
首先：说说谷歌开放api的好处吧。从根本上理解开放api对网站、开发者、用户使用都有什么好处。
网站api提供者：这里包括大家熟知的谷歌、FaceBook、[size=x-small;]twitter、国内校内等等[/size]
最终用户：无论网站api提供者、第三方开发者目的都是为了为最终用户提供良好的体验，及粘性。
所以：开发平台是最终的趋势。
开始地图hello world之旅。
先介绍一下代码。下面即使一个事例。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google 地图 JavaScript API 示例: 简单的地图</title>
<script src="http://ditu.google.cn/maps?file=api&v=2&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA&hl=zh-CN"
type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(39.917, 116.397), 14);
}
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 500px; height: 300px"></div>
</body>
</html>
即使在此简单的示例中，也需要注意五点：
1.加载 Google 地图 API
<script src="http://ditu.google.cn/maps?file=api&v=2&key=abcdefg&sensor=true_or_false"
type="text/javascript"></script>
http://ditu.google.cn/maps?file=api&v=2&key=abcdefg 网址指向包含使用 Google 地图 API 所需所有符号和定义的 JavaScript 文件的位置。您的页面必须包含指向此网址的 script 标签，使用注册 API 时收到的密钥。在此示例中，该密钥显示为“abcdefg”。
2.承载地图的容器div。
<div id="map_canvas" style="width: 500px; height: 300px"></div>
3.GMap2 - 基本对象
var map = new GMap2(document.getElementById("map_canvas"));
GMap2 类是表示地图的 JavaScript 类。此类的对象在页面上定义单个地图。（可以创建此类的多个实例，每个对象将在页面上定义一个不同的地图。）我们使用 JavaScript new 操作符创建此类的一个新实例。
关于GMap2的接口请参照
http://code.google.com/intl/zh-CN/apis/maps/documentation/reference.html#GMap2。
4。初始化地图
map.setCenter(new GLatLng(39.9493, 116.3975), 13);
通过 GMap2 构造函数创建地图后，我们需要再做一件事：将其初始化。初始化通过地图的 setCenter() 方法完成。setCenter() 方法要求有 GLatLng 坐标和缩放级别，而且必须先发送此方法，然后再在地图上执行其他任何操作，包括设置地图本身的其他任何属性。
5.最后一步加载地图：
<body onload="initialize()" onunload="GUnload()">
到这里地图应该可以正常运行了。其实谷歌地图很简单，具备javascript及html知识应该可以很快入手。
以上事例地址：http://code.google.com/intl/zh-CN/apis/maps/documentation/examples/map-simple.html
参考，下载都可以。
好的今天就到这里。有问题的朋友可以联系我.或者留言。
Email:stev.wise@gmail.com
QQ:469931718
分享到：
相关推荐
hello world
OpenWrt之helloworld程序开发入门，里面包含helloworld和Makefile
基础知识 正向标注 反向标注 任意多边形 自定义GMarker 地图控件与地图属性 空间数据类型 ...Google 地图的“Hello, World” 加载 Google 地图 API 地图 DOM 元素 GMap2 - 基本对象 初始化地图 加载地图
输出HELLOWORLD然后输出Helloworld最后的最后的输出Helloworld
亲自测试ok，下载下来直接点击 helloworld.html 即可。其他若无法访问，在div 加上 样式即可。简单易上手<div id="map_canvas" style="height:90%;top:30px"></div>
open cascade hello world open cascade hello world open cascade hello world open cascade hello world open cascade hello world open cascade hello world open cascade hello world open cascade hello world
ANTLR之"Hello World",是ANTLR的入门。
c++编写hello world 简单的c++程序
打印HelloWorld ，在Visual Studio的开发环境当中，实现简单的操作。
Android WebView 之Helloworld
helloworld vbs 脚本hellohelloworld vbs 脚本world vbs 脚本helloworld vbs 脚本helloworld vbs 脚本helloworld vbs 脚本
Hello World C源码 Hello World C源码 Hello World C源码 Hello World C源码 Hello World C源码
SpringMVC ---- HelloWorld ---- 代码 SpringMVC ---- HelloWorld ---- 代码 SpringMVC ---- HelloWorld ---- 代码 SpringMVC ---- HelloWorld ---- 代码 SpringMVC ---- HelloWorld ---- 代码 SpringMVC ---- Hello...
我的第一个JSP之helloworld！ 输出helloworld的四中方式。 有详细的图片！
hello world prog for begginer
abc 联系代码hello world hello worldabc 联系代码hello world hello world
包括2个epk组件包，一个是公共包，处理生成应用程序的公共选项，一个是Hello包，为经典的Hello World工程，包括一个名为hello的模板。为博文 http://blog.csdn.net/zoomdy/article/details/12908559 的配套附件。
• 在命令行打印 hello world! 字符 //mkdir nodejs-demo //cd nodejs-demo // https://sample.wangding.in/nodejs/tern-project //mv tern-project .tern-project //mkdir 01-introduction //touch 01-hello-world....
一个简单的qt版helloworld程序
Helloworld，HelloWorld.sln