title: Using Google Maps custom overlays to create custom icons (with Raphael JS)
body: <p>I'm using Google Maps OverlayView class to create custom markers (with Raphael JS) and am having issues accessing certain properties of my new subclass when calling a public method.</p>
  
  <p>I followed Google's fairly straightforward example here ~ <a href="https://developers.google.com/maps/documentation/javascript/overlays#CustomOverlays" rel="nofollow">https://developers.google.com/maps/documentation/javascript/overlays#CustomOverlays</a> ~ to create a custom marker class, including its 'hide' and 'show' methods.</p>
  
  <pre><code>function MapCustomMarker(opts){
  this.pos_ = opts.position;
  this.map_ = opts.map;
  this.div_ = null;
  this.color_ = (!opts.color ? '#e32636' : opts.color);
  this.height_ = 32;
  this.width_ = 32;
  this.scale_ = 1.2;
  
  this.icons_ = {
      pinpoint:'M16,3.5c-4.142,0-7.5,3.358-7.5,7.5c0,4.143,7.5,18.121,7.5,18.121S23.5,15.143,23.5,11C23.5,6.858,20.143,3.5,16,3.5z M16,14.584c-1.979,0-3.584-1.604-3.584-3.584S14.021,7.416,16,7.416S19.584,9.021,19.584,11S17.979,14.584,16,14.584z',
      help: 'M12.558,15.254c2.362,0,4.277-1.916,4.277-4.279s-1.916-4.279-4.277-4.279c-2.363,0-4.28,1.916-4.28,4.279S10.194,15.254,12.558,15.254zM15.662,15.224c-0.875,0.641-1.941,1.031-3.103,1.031c-1.164,0-2.231-0.391-3.105-1.031c-0.75,0.625-1.498,1.519-2.111,2.623c-1.422,2.563-1.578,5.192-0.35,5.874c0.55,0.312,1.127,0.078,1.723-0.496c-0.105,0.582-0.166,1.213-0.166,1.873c0,2.938,1.139,5.312,2.543,5.312c0.846,0,1.265-0.865,1.466-2.188c0.201,1.311,0.62,2.188,1.462,2.188c1.396,0,2.544-2.375,2.544-5.312c0-0.66-0.062-1.291-0.167-1.873c0.598,0.574,1.174,0.812,1.725,0.496c1.228-0.682,1.069-3.311-0.353-5.874C17.159,16.742,16.412,15.849,15.662,15.224zM19.821,3.711l-1.414,1.414c1.499,1.499,2.428,3.569,2.428,5.851c0,2.283-0.929,4.353-2.428,5.853l1.413,1.412c1.861-1.86,3.015-4.43,3.015-7.265C22.835,8.142,21.683,5.572,19.821,3.711zM16.288,14.707l1.413,1.414c1.318-1.318,2.135-3.138,2.135-5.145c0-2.007-0.816-3.827-2.134-5.145l-1.414,1.414c0.956,0.956,1.547,2.275,1.547,3.731S17.243,13.751,16.288,14.707zM21.941,1.59l-1.413,1.414c2.042,2.042,3.307,4.862,3.307,7.971c0,3.11-1.265,5.93-3.308,7.972l1.413,1.414c2.405-2.404,3.895-5.725,3.895-9.386C25.835,7.315,24.346,3.995,21.941,1.59z'
  }
  
  this.popup_ = 'M16,5.333c-7.732,0-14,4.701-14,10.5c0,1.982,0.741,3.833,2.016,5.414L2,25.667l5.613-1.441c2.339,1.317,5.237,2.107,8.387,2.107c7.732,0,14-4.701,14-10.5C30,10.034,23.732,5.333,16,5.333z';
  
  this.icon_ = this.icons_[opts.icon];
  this.setMap(opts.map);
  }
  
  MapCustomMarker.prototype = new google.maps.OverlayView();
  
  MapCustomMarker.prototype.onAdd = function() {
  // Create the DIV and set some basic attributes.
  var div = document.createElement('div');
  div.style.border = "none";
  div.style.borderWidth = "0px";
  div.style.position = "absolute";
  div.style.cursor = "pointer";
  div.style.width = this.width_+"px";
  div.style.height = this.height_+"px";
  
  var paper = Raphael(div,this.height_, this.width_);
  var el = paper.path(Raphael.transformPath(this.icon_, 's'+this.scale_)).attr({fill: this.color_, stroke: "#333333"});   
  
  // Set the overlay's div_ property to this DIV
  this.div_ = div;
  
  // We add an overlay to a map via one of the map's panes.
  // We'll add this overlay to the overlayImage pane.
  var panes = this.getPanes();
  panes.overlayMouseTarget.appendChild(div);
  }
  MapCustomMarker.prototype.draw = function() {
  
  // Size and position the overlay. 
  var overlayProjection = this.getProjection();
  
  // We'll use these coordinates to position the DIV.
  var o = overlayProjection.fromLatLngToDivPixel(this.pos_);  
  var l = o.x - Math.round(this.width_ / 2);
  var t = o.y - this.height_;
  
  this.div_.style.left = l + 'px';
  this.div_.style.top = t + 'px';
  }
  MapCustomMarker.prototype.onRemove = function() {
    this.div_.parentNode.removeChild(this.div_);
    this.div_ = null;
  }
  MapCustomMarker.prototype.hide = function() {
    console.log(this.div_);
    console.log(this.color_);
    if (this.div_) {
     this.div_.style.visibility = "hidden";
    }
  }
  
  MapCustomMarker.prototype.show = function() {
    if (this.div_) {
      this.div_.style.visibility = "visible";
    }
  }
  
  MapCustomMarker.prototype.toggle = function() {
    if (this.div_) {
      if (this.div_.style.visibility == "hidden") {
        this.show();
      } else {
        this.hide();
      }
    }
  }
  </code></pre>
  
  <p>This class creates markers on my map with the Raphael icons very nicely.
  The problem comes when I want to hide or show any specific marker. </p>
  
  <pre><code>var marker = new MapCustomMarker({position: pos, map: self.map, icon:'help', color:'#e32636'});
  marker.hide();
  </code></pre>
  
  <p>marker.hide() is not hiding the markers.</p>
  
  <p>You'll notice in the "hide" method, I have two console.log commands testing the values of this.color_ and this.div_. console.log(this.color_) returns the color set when the object is initiated.  console.log(this.div_) returns null even though it was obviously altered in the 'onAdd' and 'draw' methods when the marker was created.</p>
  
  <p>I'm not sure if this is a misunderstanding of public and private properties in javascript or something else.  I used the google maps custom overlay example almost exactly.</p>
  
  <p>If anyone has any ideas, please pass them along. (And aside from this one issue, I hope this code will assist others who want to merge Raphael JS capabilities with Google Maps.)
  Thanks!</p>