google map js api 自个笔记

   http://code.google.com/intl/zh-CN/apis/maps/documentation/javascript/basics.html

自己标记一下：

var GoogleMapConfig = {
    scrollwheel:false,
    adzoom:5,
    showzoom:13,
    center:[39.917,116.397]
};
/**
 * google 地图展示类
 * 可显示单个点或地址，也可通过addMarker方法显示多个点或地址
 * 参数 container 必填：地图显示区域, String
 * center： 显示的位置 默认[39.917,116.397]
 * showzoom: 显示标记点时，地图的放大比例
 * scrollwheel:是否能用鼠标滚轮放大缩小地图 默认false
 * addMark：地图类新建的时候 是否添加标记显示，默认不显示, true or false
 * title: 标记移上去显示的名字 addMark=true时前效
 * adress:当center为空时，使用这个地址查询 并标记 addMark=true时前效, String
 * callback:地址解析后的回调函数 function(id,marker){}, marker.getPosition().lat() 得到纬度值，
 *              marker.getPosition().lng() 得到经度值
 */
var GoogleMapShow=Class.create({
    initialize:function(config){
        this.config = {};
        Object.extend(this.config,GoogleMapConfig);
        Object.extend(this.config,config);
        this.hasCenter=false;
        this.container = $(this.config['container']);
        this.center=this.config['center'];
        this.callback=this.config['callback'];
        if(config['center']==null||this.center[0]==0||this.center[1]==0){
            this.center=GoogleMapConfig.center;
            this.zoom=this.config['adzoom'];
            
        }else{
           this.zoom =this.config['showzoom'];
           this.hasCenter=true;
        }
        if(this.container==null) {
            alert("map_canvas is null");
            return;
        }
        this.zIndex=1;
        this.latlng = new google.maps.LatLng(this.center[0], this.center[1]);
        var myOptions = {
            scrollwheel:this.config['scrollwheel'],
            zoom: this.zoom,
            center: this.latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        this.map = new google.maps.Map(this.container, myOptions);
        this.overlay = new google.maps.OverlayView;
        this.overlay.draw = function(){
        };
        this.overlay.setMap(this.map)
            
        if(this.config["addMark"]){
            if(this.hasCenter){
                this.addMarker(this.center[0], this.center[1],this.config["title"],this.config["address"]);
            }else {//没有坐标点，按地址标记
                this.addMarker(0, 0,this.config["title"],this.config["address"]);
            }
        }
    },
    addMarker:function(lat,lng,title,address,id){
         if(lat==null||lat==0||lng==null||lng==0){
             if(address!=null&&address!=""){//没有坐标点，按地址标记
                 this.codeAddress(title,address,id);
             }
            return null;
         }
         var latlng = new google.maps.LatLng(lat, lng);
         var marker = new google.maps.Marker({
            position: latlng,
            map: this.map,
            zIndex: this.zIndex
          });
          marker.name=title;
          this.bindMarkerEvent(marker);
          return marker;
    },
    bindMarkerEvent: function(a) {
           var c = this;
           if(a.name!=null&&a.name!=""){//如果没有标记名，不做展示
               google.maps.event.addListener(a, "mouseover",
                  function() {
                      a.setZIndex(c.zIndex++);
                      c.showToolTip(a, a.name)
                });
               google.maps.event.addListener(a, "mouseout",
                   function() {
                     a.setZIndex(1);
                     c.hideToolTip();
                     
               });
           }
                
          google.maps.event.addListener(a, 'click', function() {
                this.map.setZoom(this.zoom++);
          }.bindAsEventListener(this));
    },
   codeAddress:function(title,address,id){
        if(address=="") return;
        if(!this.geocoder){
            this.geocoder = new google.maps.Geocoder();
        }
        this.geocoder.geocode( { 'address': address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
              var latlng =results[0].geometry.location;
              if(this.center==GoogleMapConfig.center){//如果是默认的
                    this.map.setCenter(latlng);
                    this.map.setZoom(8);
              }
              var marker = new google.maps.Marker({
                  map: this.map,
                  position: latlng
              });
              marker.name=title;
              this.bindMarkerEvent(marker);
              if(this.callback){
                     this.callback.call(this,id,marker);
              }                         
        } else {
          //alert("google api was not successful for the following reason: " + status);
        }
      }.bind(this));
    },
    setCenter:function(lat,lng){
        if(lat==null||lat==0||lng==null||lng==0){
            return;
        }
        this.latlng = new google.maps.LatLng(lat, lng);
        this.map.panTo(this.latlng);
    },
    showToolTip: function(marker, text) {
//          if (!this._toolTip) {
//                this._toolTip= new Element("div",{"class":"tooltip"});
//                this._toolTip.update('<div  class="tt-bd"><span></span></div>\t<span class="arrow"></span>');
//                this.container.appendChild(this._toolTip);
//           }
//           this._toolTip.select(".tt-bd>span")[0].update(text);
//           this._toolTip.setStyle({"width":"auto"});
//           var c = this._toolTip.getWidth();
//           var b = this._toolTip.getHeight();
//           
//           var point = this.overlay.getProjection().fromLatLngToContainerPixel(marker.getPosition());
//           this._toolTip.setStyle({
//               top: (point.y - b - 14 - 10)+"px",
//               left: (point.x - c / 2 + 12)+"px"
//           });
//           this._toolTip.show();
        if (!this._toolTip) {
            this._toolTip =new google.maps.InfoWindow({
                content:"<br />"+text,
                maxWidth:150
            });
        }
        this._toolTip.setContent("<br />"+text);
        this._toolTip.open(this.map,marker);
    },
    hideToolTip:function(){
        if (this._toolTip) {
            //this._toolTip.hide();
            this._toolTip.close();
        }
    }
});

调用：

new GoogleMapShow({
                     container:"agency_map",
                     center:[<ww:property value="agencyContact.lat"/>,<ww:property value="agencyContact.lng"/>],
                     addMark:true,
                     showzoom:8,
                     address:"<ww:property value="agencyContact.addressStr"/>",
                     callback:function(id,marker){
                     if(marker!=null&&marker!="undefined"){
                         DwrAgency.initAdressLatlng(<ww:property value="agencyContact.id"/>,marker.getPosition().lat(),marker.getPosition().lng(),function(){});
                      }
                    }
          });