如何使用Google Map API
最近研究了一下Google Map的使用方法，发现有两种常见的用法，总结一下，以后查起来方便！
一、调用Google团队封装好的地址，简单方便
有一种方法比较简单，进去google的地图页面http://ditu.google.cn/，然后输入目的地址，然后右面有一个分享的链接，点击获取HTML代码，你会得到譬如
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://ditu.google.cn/?ie=UTF8&hq=&hnear=%E4%B8%8A%E6%B5%B7%E5%B8%82&ll=31.601931,121.473083&spn=1.242132,2.705383&t=h&z=9&brcurrent=3,0x35b27040b1f53c33:0x295129423c364a1,1%3B5,0,1&output=embed"></iframe><br /><small><a href="http://ditu.google.cn/?ie=UTF8&hq=&hnear=%E4%B8%8A%E6%B5%B7%E5%B8%82&ll=31.601931,121.473083&spn=1.242132,2.705383&t=h&z=9&brcurrent=3,0x35b27040b1f53c33:0x295129423c364a1,1%3B5,0,1&source=embed" style="color:#0000FF;text-align:left">查看大图</a></small>的代码，
直接把代码黏贴到你页面中，不需要调用任何JS函数，简单吧！
二、调用官方API
http://code.google.com/intl/zh-CN/apis/maps/index.html
根据自己的需求选择不同的API，这里我选用的是第一种Google Maps JavaScript API，进入开发指南后，根据辅导手册我们能得到一下代码
<script src="http://maps.google.com/maps?file=api&v=2&sensor=true_or_false&key=ABQIAAAASxpUwpTIsah0HhFUu4CeXxTRPPg-t4qZV_Pkpf2GWNHxovB6dBSVLQqrNTBL8D2ww-FLdM4esrG8IQ" type="text/javascript">
<head> <script type="text/javascript">function initialize() { var map = new GMap2(document.getElementById("map_canvas")); //加控件 map.addControl(new GSmallMapControl()); map.addControl(new GMapTypeControl()); map.setCenter(new GLatLng(31.188523, 121.436526), 13); // Add 10 markers to the map at random locations var bounds = map.getBounds(); var southWest = bounds.getSouthWest(); var northEast = bounds.getNorthEast(); var lngSpan = northEast.lng() - southWest.lng(); var latSpan = northEast.lat() - southWest.lat(); var point = new GLatLng(31.182385,121.439223); map.addOverlay(new GMarker(point));}</script> </head> <body onload="initialize()" onunload="GUnload()"> <div id="map_canvas" style="width: 500px; height: 300px"></div> </body><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head> <title> New Document </title> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> var geocoder;//地图生成类 var map;//地图 var oldInfoWindow; /*初始化地图*/ function initialize() { geocoder = new google.maps.Geocoder(); geocoder.geocode( { 'address': '上海市长宁区仙霞路317号远东国际广场B2403-2407室'}, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { var myOptions = { zoom: 14, center: results[0].geometry.location, mapTypeId: google.maps.MapTypeId.ROADMAP } map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); varnewMarker = new google.maps.Marker({position: results[0].geometry.location,title:'日清纺织(上海)有限公司',map:map}); } else { alert("错误状态" + status); }});}</script> </head> <body onLoad="initialize();"> <div id="map_canvas" style="height: 305px; width: 330px;"></div> </body></html>