具体效果可以看我主页的About me，这也算是Google Map最简单的玩法了，我就用dancemoon.net作例子，具体介绍一下在Blog添加Google Maps的方法。
首先需要到http://www.google.com/apis/maps/申请一个API key，你需要用你的GmailID登录。申请成功以后你会得到一个API key，和一段添加到网页的事例代码，去掉一些没有用的Html代码以后剩下：
<script src=" http://maps.google.com/maps?file=api&v=1&key= [API key]" type="text/javascript"></script> <div id="map" style="width: 500px; height: 400px"></div> <script type="text/javascript"> //<![CDATA[ var map = new GMap(document.getElementById("map")); map.addControl(new GSmallMapControl()); map.centerAndZoom(new GPoint(-122.1419, 37.4419), 4); //]]> </script>
其中<div id="map" style="width: 500px; height: 400px"></div>
这行可以自定义显示Google Maps的宽（width）和高（height）。
map.centerAndZoom(new GPoint(-122.1419, 37.4419), 4);
这行算是整段代码最重要的部分，可以用来调整Google Maps显示的地理位置（-122.1419, 37.4419）和大小（4）。我们下面要做的就是把这两行代码替换成适合自己的。
到http://maps.google.com在地图上找到自己所在的位置，用鼠标双击，你双击的那点就会显示在地图的中央，然后点击右上角的Link to this page，地址栏里的地址就包含了你的坐标信息，比如我在的大连地址是：
http://maps.google.com/?ll=38.794768,121.294556&spn=1.051049,2.04071
其中38.794768,121.294556，就是大连的坐标，把他们替换到代码里:
map.centerAndZoom(new GPoint(121.294556, 38.794768), 15);
因为Google Maps显示的中国的信息有限，所以不要把最后的数值设得太小，我写的是15（最大到16），具体自己把握就行。
如果想在自己的位置上加个标记，那把下面这段代码加到map.centerAndZoom...这行下面：
map.addOverlay(new GMarker(new GPoint(121.294556, 38.794768)));
还想在标记上加上弹出气泡的功能，就加入下面一段：
var dalian = new GMarker (new GPoint (121.294556, 38.794768)); GEvent.addListener (dalian, "click", function() { dalian.openInfoWindowHtml ("我在大连 Oh!Yeah!"); }); map.addOverlay (dalian);最后的代码就是这些：
<script src="http://maps.google.com/maps?file=api&v=1&key= [API key]" type="text/javascript"></script> <div id="map" style="width: 400px; height: 300px"></div> <script type="text/javascript"> //<![CDATA[ var map = new GMap(document.getElementById("map")); map.addControl(new GSmallMapControl()); map.centerAndZoom(new GPoint(121.294556, 38.794768), 15); var dalian = new GMarker (new GPoint (121.294556, 38.794768)); GEvent.addListener (dalian, "click", function() { dalian.openInfoWindowHtml ("我在大连 Oh!Yeah!"); }); map.addOverlay (dalian); //]]> </script>
1/11/2006 6:19:25 AM Post by[dancemoon.net]
评论