Google API V3自定义图标或信息框

最近做了一个PC端列表页和地图找酒店页，两个页面需要用到Google Map API V3地图件。
其中花了比较多的时间的有两个地方，包括自定义图标和自定义信息框，这里将我的经验分享一下。因为是第一次用，所以写的有问题的地方请指出。
下面介绍了两种方法：
方法一是采用Google Map API V3中的markerImage对象来来生成自定义的图像;
方法二是利用Google Map API V3中的overLayView层来生成自定义的图标，相比于markerImage,overLayer的功能更强大。

一、自定义图标

方法一（比较笨）

最终结果的展示：主要功能是在列表页加载完成后获取列表中所有酒店的经纬度等信息，在地图上展示出来。并且对所有的图标marker进行点击事件绑定，还需要将在列表中的某一个酒店滑到屏幕中央时在地图上将该marker改为激活状态，如图中1号。

    此处只说如何实现marker的自定义样式。如图，该自定义的marker图标有如下需求：
    （1）、marker是动态的图片，展示含有数字1-30的小图片
    （2）、在激活状态颜色变成黄颜色。

当时在处理这个问题的时候因为对API不了解，所以最先找到的是这个笨办法。就是利用API中的
MarkerImage对象生成自定义图标。下面是我的一张图片资源，使用MarkerImage对象就可以用这张图片根据需求生成带有不同颜色和标号的图标了。

/*
* 生成自定义标记图片
* @param i 列表中的第几个
* @param col 是否激活
* */
markerImage:function(i,col){
   
 var imageUrl = 'http://img3.tuniucdn.com/img/201603151117/globalHotel/maplist_icon.png';
 var markerImage = new google.maps.MarkerImage(
     imageUrl,
     new google.maps.Size(20, 25),
     new google.maps.Point(i*20,col*25)
  //'undefined',
  //new google.maps.Size(40, 50)
  //new google.maps.scaledSize(20, 25)
    );
return markerImage;
}

当我们需要标号为1的激活（黄颜色）的图标时，就调用markerImage(0,0),对应的获取了图片中标记出来的区域，和CSS里面的背景图片一样，如图：

这样我们就可以获取这张大图上的各个图标了。
在实际项目中，通过dom加载完成后，获取整个列表的数据，循环该数据对象，将所有maker全部生成存放如一个数组中。

createMarkerList:function(data){
   
            var map = map_box.map;
            var markerList = [];
            for(var i in data){
                var LatLng =  new google.maps.LatLng(data[i].lat,data[i].lng);
                var image = {};
                var marker = {};