Add support for OverlayView (Behavior/Element)

[timeu]

It might be handy to add a Behavior to model Google Maps Custom OverlayView, which allows to create custom marker on a google map.

It could be something along these lines:

<script>
  GoogleMapOverlayViewBehavior = {
    properties: {
        map: {
            type: Object,
            observer: '_mapChanged'
        }
    },
    created : function() {
        this._initOverlay();
    },
    _initOverlay: function() {
      if (typeof google === 'object' && typeof google.maps === 'object')  {
        if (this.overlay && this.overlay instanceof google.maps.OverlayView)
           return;
        this._overlayView.prototype = new google.maps.OverlayView();
        this._overlayView.prototype.onAdd = this.onAdd.bind(this);
        this._overlayView.prototype.draw = this.draw.bind(this);
        this._overlayView.prototype.onRemove = this.onRemove.bind(this);
        this.overlay = new this._overlayView(this.map);
      }
    },
    _overlayView : function(map) {
        if (map && map instanceof google.maps.Map) {
          this.map = map;
        }
    },
    _mapChanged: function(map) {
      this._initOverlay();
      if (this.overlay &&  this.overlay instanceof google.maps.OverlayView) {
          this.overlay.setMap(this.map);
        }
    },
    onAdd : function() {},
    draw : function() {},
    onRemove :function() {}
  };
</script>

Then a simple generic custom implementation could look something like this:

<dom-module id="google-map-overlayview">
    <template >
      <content id="overlayContent"></content>
  </template>
</dom-module>
<script>
    Polymer({
      is: 'google-map-overlayview',
      behaviors: [GoogleMapOverlayViewBehavior],
      onRemove :function() {
        this.parentNode.removeChild(this);
      },
      onAdd : function() {
        var panes = this.overlay.getPanes();
        panes.overlayLayer.appendChild(this);
      },
    });
</script>

To use it:

<google-map latitude="37.779" longitude="-122.3892" min-zoom="9" max-zoom="11" language="en"></google-map>
<google-map-overlayview id="overlay">
  <img class="image" src="http://www.helpinghomelesscats.com/images/cat1.jpg"></img>
</google-map-overlayview>
<script>
  var gmap = document.querySelector('google-map');
  gmap.addEventListener('api-load', function(e) {
    document.querySelector('google-map-overlayview').map = this.map;
  });
</script>

[jjkaelin]

Custom Overlays would indeed be very handy for a project that I am working on. Is anyone working on this (preferably for Polymer 2.0)?

[nik-kor]

@timeu thanks for your solution - it really saved my day! I relied on google-map building Elm app and missed this feature badly.