google map学习
本来也没想到要学习下google map，由于项目需要，所以简单学习了下google map。
首先要加载google maps api，不然一切无从谈起，
<script type="text/javascript" src="http://maps/api/js?sensor=false"></script>
必须要设置 sensor 参数，以指明此应用程序是否使用传感器确定用户的位置。
然后编写地图函数，在进行加载。
simple map：
<html><head><script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script><script type="text/javascript">var map;var marker;var infowindow;function initialize() {var latlng = new google.maps.LatLng(30.33,120.23);var myOption = {zoom:8,center:latlng,mapTypeId:google.maps.MapTypeId.ROADMAP};map = new google.maps.Map(document.getElementById('myMap'), myOption);}</script></head><body onload="initialize()"><div id="myMap" style="width:600px;height:400px"></div></body></html>也可以通过js事件加载：google.maps.event.addDomListener(window, 'load', initialize);
latlng对象是经纬度，mapTypeId有多种，具体google的挨批中有，一般主要使用ROADMAP。map就是地图对象，zoom参数指定显示地图的详细程度。
还可以为地图添加标记，信息窗口，事件等。
simple marker map：
<html><head><script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script><script type="text/javascript"> function initialize() { var latlng = new google.maps.LatLng(30.3, 120.2); var myOptions = { zoom: 15, center: latlng, disableDefaultUI: true, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);var markerOption = {position:latlng,map:map,title:"good"}var marker = new google.maps.Marker(markerOption);google.maps.event.addListener(marker, 'click', function() {if(map.getZoom() == 15) {map.setZoom(10);}else {map.setZoom(15);}});google.maps.event.addListener(map, 'click', function(event) {placeMarker(event.latLng, map);});function placeMarker(position, map) {var marker = new google.maps.Marker({position:position,map:map});map.panTo(position);} }</script></head><body onload="initialize()"> <div id="map_canvas" style="width:100%; height:100%"></div></body></html>此代码可以在地图上任意添加marker。
simple window info map：
<html><head><script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script><script type="text/javascript">var map;var marker;var infowindow;function initialize() {var latlng = new google.maps.LatLng(30.33,120.23);var myOption = {zoom:8,center:latlng,mapTypeId:google.maps.MapTypeId.ROADMAP};map = new google.maps.Map(document.getElementById('myMap'), myOption);marker = new google.maps.Marker({position:latlng,map:map});var content = "good";infowindow = new google.maps.InfoWindow({content:content,});}google.maps.event.addDomListener(window, 'load', initialize);function hide() {var cmd = document.getElementById("show").value;if(cmd == "hide") {infowindow.close();document.getElementById("show").value = "show";}else {infowindow.open(map, marker);document.getElementById("show").value = "hide";}}</script></head><body onload="initialize()"><div id="myMap" style="width:600px;height:400px"></div><div><input type="button" onclick="hide()" value="show" id="show"/></div></body></html>此代码点击按钮可以显示marker上边的info window，也可以隐藏。
标记也可以通过自定义。
其实对于google map的学习，google maps api中已经提供相当的例子，可以通过解读源代码来学习。
http://code.google.com/intl/zh-CN/apis/maps/documentation/javascript/