Function tooltip (Options) { this.marker_ = options.marker; this.content_ = options.content; this.map_ = options.marker.get (' map '); this.cssclass_ = options.cssclass | | null; this.is_hidden = options.is_hidden === undefined ? !0 : options.is_hidden; this.div_ = null; this.setmap (THIS.MAP_); var me = this; if (This.is_hidden) { Google.maps.event.addDomListener (me.marker_, ' mouseover ', function () { me.show (); }); googlE.maps.event.adddomlistener (me.marker_, ' mouseout ', function () { me.hide (); }); }} tooltip.prototype = new google.maps.overlayview (); Tooltip.prototype.onadd = function () { var div = Document.createelement (' DIV '); div.style.position = "Absolute"; div.style.visibility = "visible"; if (This.is_hidden) div.style.visibility = "Hidden"; else div.style.visibility = " Visible "; div.innerhtml = this.content_; this.div_ = div; &Nbsp; var panes = this.getpanes (); panes.floatpane.appendchild ( THIS.DIV_); var me = this; Google.maps.event.addDomListener (this.div_, ' click ', function () { if (Me.map_.getZoom () < 18) { me.map_.setzoom (Me.map_.getZoom () + 1); me.map_.setcenter (Me.marker_.getPosition ()); } });} tooltip.prototype.draw = function () { var Overlayprojection = this.getprojection (); var ne = Overlayprojection.fromlatlngtodivpixel (This.marker_.getPosition ()); var div = this.div_; div.style.left = ne.x + ' px '; div.style.top = ne.y + ' px ';} tooltip.prototype.onremove = function () { this.div_. Parentnode.removechild (THIS.DIV_);} tooltip.prototype.hide = function () { if (this.div_) { this.div_.style.visibility = "Hidden"; }}tooltip.prototype.show = function () { if (THIS.DIV_) { this.div_.style.visibility = "Visible"; }}
Start on the marker, display the hint message, use is Infowindow, but Infowindow is too ugly, and position always on top, so found this piece of code.
This is a code written by someone else, I changed two places.
1. Not all of the information is hidden, a part of it is always displayed, such as the focus of the station, the city, part of the mouse is put up display.
2. Click a point to enlarge the map and place the point in the center of the map.
Content can be passed into the HTML code, CssClass, you can set the style.
Display information such as place names on Google Maps, similar to Infowindow