Display information such as place names on Google Maps, similar to Infowindow

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.