利用Google Map API在BLOG上显示自己的Google Map

杨竹青

第一步
去http://www.google.com/apis/maps/申请一个 Google Maps API key ，当然，你得有顶级域名才行。。。 乱申请的你如果不放到你这个域名下，那这个就根本用不了。。。
Google会给您一段代码，可要保存好哦～

第二步
把http://www.misuisui.com/google_map.htm打开，看一看里面的源化码，我已经写好说明了，大家照猫画虎就行了，HOHO～主要代码在最下面～

第三步
把第一步里申请来的 Google Maps API key 改掉代码中的 ABQIAAAAlwlonOoTX0oPrDaRmH_ALBREKWcFDKg74ezPgAUa79EBKj9z1BTjAKcZV51YfdN2n4xhiJ2lKuvBeA 一样的代码。。。

第四步
代码里的哪个PNG图标不好找，在网上狂搜吧。。。 要不自己做一个  ～
嗯，还有那个坐标不好找，大家请看第四步

第五步
打开http://www.google.com/maps
找啊找啊，找到你所在的地方，然后点那个右上角那个“Link to this page”
得到一个这样的链接http://www.google.com/maps?f=q&hl=en&q=china&ll=35.86166,104.195397&spn=32.116109,88.242188&t=h
注意35.86166, 104.195397这一段数字，这就是当前地图中心点的坐标了
把逗号后面的数字放到逗号前面变成这样104.195397, 35.86166
然后就是把这个数字添加到代码中你想要添加的地方了～

第六步
根据代码里的提示，发挥你的想象力，然后做点啥出来～做出啥来了，也告诉我一下，让我也看看啊～
比如我就要做个友情链接的东东，HOHO～和我友链的朋友们麻烦参考第五步把你想要标在我的友情链接地图上的坐标告诉我啊，HOHO～

第七步
嗯嗯，希望这几天大家要常来这儿了，因为有一个好东东要给大家告诉大家啦～HOHO～

<div id="map" style="width: 600px; height: 400px; border: 1px solid #979797"></div>
<!-- 把以上代码为地图的宽和高，可修改里面的数值，不要改里面的ID -->

<script. src="http://maps.google.com/maps?file=api&v=1&key=ABQIAAAAlwlonOoTX0oPrDaRmH_ALBREKWcFDKg74ezPgAUa79EBKj9z1BTjAKcZV51YfdN2n4xhiJ2lKuvBeA" type="text/javascript"></script>
<!-- 此为Google Map API 的验证码，用到自己的网站要去 http://www.google.com/apis/maps/ 审请一个 -->

<script. type="text/javascript">
  //<![CDATA[

    function createMarker(point, baseIcon, html) {
      var icon = new GIcon(baseIcon);
      var marker = new GMarker(point, icon);

      GEvent.addListener(marker, 'click', function() {
      marker.openInfoWindowHtml(html);
      });

    return marker;
    }

    function loadMap(){
      var map = new GMap(document.getElementById("map"));
      map.addControl(new GLargeMapControl());
      map.setMapType(G_HYBRID_TYPE);
      map.centerAndZoom(new GPoint(116.429114, 39.934322), 0); //在这里116.429114, 39.934322代表地图的中心位置，后面的0是放到最大，数字越大，地图显示的越多
      
      // 以下是定义一些基本信息
      // 阴影，阴影偏移，信息框偏移, 什么什么的
      var icon = new GIcon();
      icon.shadow = "http://www.google.com/mapfiles/shadow50.png";
      icon.shadowSize = new GSize(21, 29);
      icon.iconAnchor = new GPoint(10, 30);
      icon.infoWindowAnchor = new GPoint(9, 5);
      icon.infoShadowAnchor = new GPoint(9, 5);

      //在地图上标一个图标，点击就出现字
      var html = '<s>你这个淫真是的，摸人家干啥啊？</s>'; //这里是显示在信息框里的东东，支持HTML
      icon.image = "http://www.misuisui.com/images/21_29_s5s5.png"; //定义图标，一定要PNG格式的
      icon.iconSize = new GSize(21, 29); //图标的宽和高
      var point = new GPoint(116.429114, 39.934322); //图标标在地图的哪里

      var marker = createMarker(point, icon ,html);
      map.addOverlay(marker);
      //标一个图标完毕

      //在地图上再标一个图标，点击就出现字，改的方法如上
      html = '<i>淫僧法号米随随～</i>';
      icon.image = "http://www.misuisui.com/images/21_29_s5s5.png";
      icon.iconSize = new GSize(21, 29);
      point = new GPoint(116.429424, 39.934322);
      
      marker = createMarker(point, icon ,html);
      map.addOverlay(marker);
      //标一个图标完毕，这段代码复制多少个，就有多少个图标，只要改改里面的东东就可以了

      //在地图上再标一个图标，点击就出现字，改的方法如上
      html = '点击<a href="#" target="_self">这里</a>看看米随随是怎么整出来的～';
      icon.image = "http://www.misuisui.com/images/21_29_s5s5.png";
      icon.iconSize = new GSize(21, 29);
      point = new GPoint(116.429314, 39.934522);

      marker = createMarker(point, icon ,html);
      map.addOverlay(marker);
      //标一个图标完毕，这段代码复制多少个，就有多少个图标，只要改改里面的东东就可以了

      //在地图上再标一个图标，点击就出现字，改的方法如上
      html = '<div ><font color="blue">阿弥陀佛～淫僧米随随哪！～</font></div>';
      icon.image = "http://www.misuisui.com/images/21_29_s5s5.png";
      icon.iconSize = new GSize(21, 29);
      point = new GPoint(116.429714, 39.934522);

      marker = createMarker(point, icon ,html);
      map.addOverlay(marker);
      //标一个图标完毕，这段代码复制多少个，就有多少个图标，只要改改里面的东东就可以了

      //最后一个图标将一开始显示下面的内容
      defaultmsg = '<div><font color="red">点击淫僧米随随哪！～</font></div>'; //这里是显示在信息框里的东东，支持HTML
      marker.openInfoWindowHtml(defaultmsg);

      

    }

   
    loadMap();

  //]]>
</script>