eschwartz / backbone.googlemaps

A Backbone JS extension for interacting with the Google Maps API (v3.10)
MIT License
139 stars 55 forks source link

Richmarker Support #26

Closed halcyonandon closed 10 years ago

halcyonandon commented 10 years ago

Hey,

I need custom markers not bound by a single image reference. Real-world example... the pins must contain dynamic content such as price and the pins must resize according to the value length

I'm able to achieve this with RichMarker http://google-maps-utility-library-v3.googlecode.com/svn/trunk/richmarker/docs/reference.html

new RichMarker({
        map:exports.map,
        title: spot.title,
        id: 'marker' + spotIndex,
        position: newLatLng,
        flat: true,
        anchor: RichMarkerPosition.TOP_LEFT,
        content: pinContent
      });

So my question is, what's the best way for me to implement richmarker support with backbone.googlemaps?

On line 281in backbone.googlemaps.js:

new google.maps.Marker(_.extend({
        position: this.model.getLatLng(),
        map: this.map,
        title: this.model.title,
        animation: google.maps.Animation.DROP,
        visible: false                                      // hide, until render
      }, this.overlayOptions));

I would need to overwrite this.gOverlay with my richmarker instantiation. Where or how should i do so based on the example code?

halcyonandon commented 10 years ago

I ended up modifying this plugin to support richmarkers...

eschwartz commented 10 years ago

One way to approach this would be to refactor the GoogleMaps.MapView class to extract a createView method, which returns a google.maps overlay instance. This method would be called in the constructor, instead of directly creating the object.

You could then extend GoogleMaps.MarkerView, overriding the createView method with your own logic for creating a RichMarker instance.

For example:

// backbone.googlemaps.js
GoolgeMaps.MapView = Backbone.View.extend({
  constructor: function(options) {
    // ...
    this.gOverlay = this._createView(overlayOptions);
    //...
  }
});

// yourApp.js
var RickMarkerView = Backbone.GoogleMaps.MarkerView.extend({
  _createView: function(options) {
    return new google.maps.RichMarker(options);
  }
});

If you want to take a shot at it, I'd be happy to review a pull request.

eschwartz commented 10 years ago

Closing for inactivity. I'd still be open to a pull request on this feature, if you're interested.