javascript - Google Map marker tooltip on all markers, TypeError: projection is undefined -

ctooltip.prototype = new google.maps.overlayview;  ctooltip.prototype.draw1 = function(pos, content, margin){   var div = this.div_;   div.style.csstext = 'z-index:9999;cursor:pointer;visibility:hidden;position:absolute;text-align:center;margin:'+margin;   if(content){     div.innerhtml = content;   }   if(pos){      $(markers_sets).each(function () {        if (this.id == per.markers_set) {             m_settings = this.settings;        }     });      var markersoffset = (typeof m_settings.markers_offset !== 'undefined' ? parseint(m_settings.markers_offset) : 7);      var width = $('.vipul_'+tooltipcount).outerwidth() / 2;     pin_center = 56 - width;     var projection = this.getprojection();     var position = projection.fromlatlngtodivpixel(pos);     div.style.left = (position.x - 64 + pin_center + markersoffset) + 'px';     div.style.top = (position.y - 40) + 'px';     div.style.visibility = 'visible';   }  tooltipcount++; } 

when call ctooltip on mousehover event, working when call directly inside loop, first tooltip can seen after second loop error coming

div.onmouseover = function() {       if (tool_tip_timeout != null) {         cleartimeout(tool_tip_timeout);         tool_tip_timeout = null;       }       if (display_tip && !this.hasclass('hidetooltip')) {         var tool_tip_html ='';         tool_tip_html += '<div class="maptive-bubble-blue vipul_'+tooltipcount+'">';         tool_tip_html += '<div class="maptive-bubble-pin-container">';         tool_tip_html += '<div class="maptive-bubble-text">' + gettooltip(pos) + '</div>';         tool_tip_html += '<div class="maptive-bubble-pin"></div>';         tool_tip_html += '</div>';         tool_tip_html += '<div class="maptive-bubble-shadow"><img src="/ver4/images/bubble-shadow.png"></div>';         tool_tip_html += '</div>';         tool_tip_timeout = settimeout(function() {           //tooltip.draw1(new google.maps.latlng(parsefloat(l[marker_lat_i]), parsefloat(l[marker_lng_i])), tool_tip_html, '-' + (parseint(md.groups_top)) + 'px 0px 0px ' + math.abs(parseint(md.groups_left) - parseint(md.groups_width) - 3) + 'px');           tooltip.draw1(new google.maps.latlng(parsefloat(l[marker_lat_i]), parsefloat(l[marker_lng_i])), tool_tip_html, '-' + (parseint(md.groups_top) + 6) + 'px 0px 0px 0px');         }, 500);       }       display_tip = false;     }; 

error shown below, above written code inside mousehover event working want show tooltips on marker after loading map instead of using mousehover event.

typeerror: projection undefined  var position = projection.fromlatlngtodivpixel(pos); 

rest of code

function cmarker(opt_options) {   this.setvalues(opt_options);   var group = this.get('group');   var unique_groups = this.get('unique_groups');   var l = this.get('data');   var descr = this.get('description');   var pos = this.get('pos');   var tooltip = this.tooltip = this.get('tooltip');   this.r = pos;   var div = this.div_ = document.createelement('div');   var mb = parseint(md.markers_top) + 40;        div.onmouseover = function() {       if (tip_content != "") {         if (tool_tip_timeout != null) {           cleartimeout(tool_tip_timeout);           tool_tip_timeout = null;         }         if (display_tip && !this.hasclass('hidetooltip')) {         var tool_tip_html ='';         tool_tip_html += '<div class="maptive-bubble-blue vipul_'+tooltipcount+'">';         tool_tip_html += '<div class="maptive-bubble-pin-container">';         tool_tip_html += '<div class="maptive-bubble-text">' + tip_content + '</div>';         tool_tip_html += '<div class="maptive-bubble-pin"></div>';         tool_tip_html += '</div>';         tool_tip_html += '<div class="maptive-bubble-shadow"><img src="/ver4/images/bubble-shadow.png"></div>';         tool_tip_html += '</div>';           tool_tip_timeout = settimeout(function() {             tooltip.draw(new google.maps.latlng(parsefloat(l[marker_lat_i]), parsefloat(l[marker_lng_i])), tool_tip_html, '-' + (parseint(md.markers_top) + 6) + 'px 0px 0px 0px');           }, 500);         }         display_tip=false;       }     }; }  want draw tooltip on markers, why instead of mousehover need call on load event or placing outside mousehover event error projection undefined after displaying 1 tooltip. 

don't call draw-method on own, called automatically when:

1. you add overlay map
2. the viewport of map changes

the workflow when working overlayview following:

1. call constructor (cmarker in case), in constructor set properties of overlay(will done via this.setvalues(opt_options); in code)
2. when set map-property of overlay(should done inside constructor, because want draw overlays initially) , api automatically call onadd-method
3. in onadd- method create node (with desired content , additionally added event-listeners) , add mappane
4. the draw-method called automatically(as said after onadd() or when viewport changes). use method update css-position(or additionally css-size, when want size dependant on map-zoom)

this workflow ensures that: 1. mappanes ready when onadd() called 2. projection available when draw() called

when want break out of predefined execution-order listen panes_changed-event of overlay, when fires panes , projection available, may add overlay map

  google.maps.event.addlisteneronce(youroverlayinstance,'panes_changed',    function(){/*create node content , events ,                  add pane ,                 set position , optinally size*/}); 

but kind of custom implementation makes no sense, because draw-method called automatically when projection available.