Google API V3 Custom icon or information box

Recently made a PC-side list page and map to find hotel pages, two pages need to use the Google Map API V3 maps.
There are two places that spend a lot of time, including custom icons and custom information boxes, and share my experience here. Because it is the first time to use, so write a problem place please point out.
Here are two ways to do this:
The first method is to use the Markerimage object in the Google Map API V3 to generate the custom image;
method Two uses the Overlayview layer in the Google Map API V3 to generate a custom icon, which is more powerful than the Markerimage,overlayer function. One, custom icon method One (more stupid)

The final results show: The main function is to get the list of all hotels in the list after the completion of the latitude and longitude, and other information, on the map to display. And for all the icons marker Click event binding, you also need to slide a hotel in the list to the center of the screen on the map of the marker changed to activate the state, as shown in Figure No. 1th.

    Here we only say how to implement the marker custom style. As shown in the figure, this custom marker icon has the following requirements:
    (1), marker is a dynamic picture, showing a small picture containing the number 1-30
    (2), in the active state color to yellow color.

At the time when dealing with this problem because of the API did not understand, so the first to find the stupid way. is to use the APIs in the
The Markerimage object generates a custom icon. Here is a picture of my resources, using the Markerimage object can be used to generate the image with different colors and labels of the icon.

*
* Generate custom tag picture
* @param i List of the
* @param col activation
*
/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),
     new Google.maps.Point (I*20,COL*25)
  //' undefined ',
  //new google.maps.Size
  Google.maps.scaledSize
    );
return markerimage;
}

When we need an active (yellow) icon labeled 1, we call Markerimage (0,0), which gets the area marked in the picture, and the background image in the CSS, as shown in the picture:

So we can get the icons on the big picture.
In a real project, after the DOM is loaded, the data for the entire list is retrieved, the data object is recycled, and all maker are generated as an array.

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 = {};
                Image = Map_box.markerimage (i,1);//unchecked, second column
                marker = new Google.maps.Marker ({
                    position:latlng,//Latitude position lat,lng
                    Map:map,
                    icon:image,
                    title:i,
                    zindex:parseint (i)
                });
                Markerlist.push (marker);
            }
            Map_box.markerlist = markerlist;
        }

Then we just need to pass through the I (currently need to activate the icon index) can manipulate the icon. When an icon is required to be activated, our husband becomes a new picture, and then replaces the picture with Marker.seticon ().

* *
        Add style to marker
        * addorremove ture Add * * * *
        addorremovemarkercss:function (marker,i,addorremove) {
            if (addorremove) {
                image = Map_box.markerimage (i,0);//checked, first column
                Marker.seticon (image);
                Marker.setzindex (9999);
            } else{
                image = Map_box.markerimage (i,1);//unchecked, second column
                * * Here IE8 and the following version are incompatible with the Google API (SetIcon setzindex)
                * Reset method, will error, affect more with the floating click event
                * * * *
                /if (! ($.browser.msie) && (parsefloat ($.browser.version) <= 8.0)) {
                    Marker.seticon (image);
                    Marker.setzindex (parseint (i));}}
        

Method Two:

Use the Overlayview object. The specific code is as follows:

 
two ways to compare: 
Markimage than overlayview more convenient and efficient, if the display information is relatively single, only with a picture can be replaced, easy to use, but also very fast (the first implementation of the above mentioned method, and then I used Overlayview to rewrite) Overlayview methods are more powerful and can achieve multiple requirements, but are more complex to organize. There is a clear definition of two objects and methods in the document.

markerimage (url:string,size?:size,origin:P oint,anchor:P oint,scaledsize?:size)
Defines a picture that is used as a marker icon or shadow. "Origin" and "size" are used to select tiles that flatten an image, and anchor overrides the middle position at the bottom of the anchor point by default. The anchor point of the image is the pixel that the system refers to when it tracks the location of the image. By default, the anchor point is set to the middle of the bottom of the image (coordinate width/2, height). Therefore, when the tag is placed on the specified latlng, the pixel defined as the anchor point is positioned on the specified latlng. To scale an image, set the value of the scaledsize to the size of the entire image, regardless of whether the image is a flattened image, and set the size, origin, and anchor points with the conversion values. Markerimage cannot be changed after the construction is complete.

Overlayview class : You can use this class if you want to display the overlay object of a custom type on a map. This type of extension
The Mvcobject.
Constructors : Overlayview ()



 
    The 
   
 
 
  
 
   
 
    
Action
 
    
returnvalue
 
    
explain
 
   
 
  
 
 
  
 
    
 Draw () 
 
    
 None 
 
    
 implements this method to draw or update the overlay layer. This method is called when the Onadd () is implemented and the location of the Projection.fromlatlngtopixel () returns the new value for the specified latlng. This method is called when the Zoom, center, or map type changes. You do not need to invoke this method when dragging or resizing. 
 
   
 
   
 
    
 getmap () 
 
    
 Map 
 
    
 
 
   
 
   
 
    
 getpanes () 
 
    
 Mappan Es 
 
    
 returns the panes in which this overlayview can be displayed. Available only after calling the draw function. 
 
   
 
   
 
    
 getprojection () 
 
    
 mapcanvasprojection 
 
    
 returns associated with the corresponding Overlayview Mapcanvasproje Ction object. Available only after calling the draw function. The 
 
   
 
   
 
    
 onadd () 
 
    
 None 
 
    
 implements this method to initialize the overlay DOM element. After calling Setmap () on a valid map, call the method once. The panes and projections are initialized. The 
 
   
 
   
 
    
 onremove () 
 
    
 None 
 
    
 implements this method to remove your elements from the DOM. Call this method immediately after calling Setmap (null). The overlay layer is added to a map or panorama by the 
 
   
 
   
 
    
 setmap (Map:map (OR) Streetviewpanorama) 
 
    
 None 
 
    
.