RichMarker - add HTML/DOM to a map

A RichMarker that allows any HTML/DOM to be added to a map and be draggable.

Example:

marker = new RichMarker({
          position: mapCenter,
          map: map,
          draggable: true,
          content: '<div class="my-marker"><div>This is a nice image</div>' +
            '<div><img src="http://farm4.static.flickr.com/3212/3012579547_' +
            '097e27ced9_m.jpg"/></div><div>You should drag it!</div></div>'
          });

        var div = document.createElement('DIV');
        div.innerHTML = '<div class="my-other-marker">I am flat marker!</div>';

        marker2 = new RichMarker({
          map: map,
          position: new google.maps.LatLng(30, 50),
          draggable: true,
          flat: true,
          anchor: RichMarkerPosition.MIDDLE,
          content: div
        });

        google.maps.event.addListener(marker, 'position_changed', function() {
          log('Marker position: ' + marker.getPosition());
        });

        google.maps.event.addDomListener(document.getElementById('set-content'),
          'click', function() {
          setMarkerContent();
        });

        google.maps.event.addDomListener(document.getElementById('toggle-map'),
          'click', function() {
          toggleMap();
        });

        google.maps.event.addDomListener(document.getElementById('toggle-anchor'),
          'click', function() {
          toggleAnchor();
        });

        google.maps.event.addDomListener(document.getElementById('toggle-flat'),
          'click', function() {
          toggleFlat();
        });
        google.maps.event.addDomListener(document.getElementById('toggle-visible'),
          'click', function() {
          toggleVisible();
        });

        google.maps.event.addDomListener(document.getElementById('toggle-draggable'),
          'click', function() {
          marker.setDraggable(!marker.getDraggable());
        });
}

class RichMarker

This class extends google.maps.OverlayView.

Constructor

Methods

Events