eschwartz/backbone.googlemaps

A Backbone JS extension for interacting with the Google Maps API (v3.10)

backbone.googlemaps's Issues

Uncaught Error: bindAll must be passed function names

GoogleMaps.MapView contains a call to bindAll which has no method names, method names are no longer optional.

refresh does not reconstruct marker views

on refresh, it executes:
this.closeChildren();
this.render();

This unbinds the events, but the issue I hit is with collection filtering.

When models are filtered in and out, everything works fine, except

      // Trigger 'selected' and 'deselected' events
      this.on("change:selected", function(model, isSelected) {
        var topic = isSelected ? "selected" : "deselected";
        this.trigger(topic, this);
      }, this);

This never emits the event because its unbound and the constructor never executes again when models are added or removed.

I've been trying to find a good solution to this issue, however no such luck yet.

overlayOptions not copied to MapView.overlayOptions

MapView.overlayOptions is initialized as empty map. The condition "this.overlayOptions || (this.overlayOptions = options.overlayOptions)" for checking always return true if it is an empty map. It is suggested to revised as below. Any other suggestion.

_.extend(this.overlayOptions, options.overlayOptions);

`this.options` undefined in constructor

I'm having a bit of trouble. In the constructor for MapView (and most of your constructors) there are these references to this.options that are coming up undefined in my app. In particular, when the MarkerViewCollection is adding a child,

// in MarkerViewCollection->addChild
var markerView = new this.markerView({
    model: childModel,
    map: this.map
});

My experience is that the View constructor is only applying the model part of the options being passed in. The result is that on the indicated line (below) this.map and this.options are both undefined. Any clues as to why this might be happening? What was this.options intended to refer to? Why might map not be being applied to this?

// in MapView
constructor: function() {
    _.bindAll(this, 'render', 'close');
    Backbone.View.prototype.constructor.apply(this, arguments);
    // Ensure map and API loaded
    if(!google || !google.maps) throw new Error("Google maps API is not loaded.");
--> if(!this.options.map && !this.map) throw new Error("A map must be specified.");
    this.gOverlay = this.map = this.options.map || this.map;
    // Set this.overlay options
    this.overlayOptions || (this.overlayOptions = this.options.overlayOptions);
}, 

The map being passed in, by the way, is certainly defined.

Thanks!

OverLappingMarkerSpiderfier intergration

I have forked and added basic setup for the mentioned above plugin for google map. Hope someone provide better interface for adding any google maps plugin later

Custom icons

Is there a way to pass custom icons to the Marker View without changing the library source code? In other words how can I overwrite the gOverlay properties or if there is no way to do that I can just modify the source and submit a pull request.

The icon documentation on what extra parameter the MarkerView needs is here:
https://developers.google.com/maps/documentation/javascript/examples/icon-simple

Enforce closing infoWindow when another is open

Opening this issue because the default behavior is to continually open infowindows without closing the open ones.

I need the behavior to be the latter. I'm not sure if this should/could be an option or if I should do so on my end using an onClose/Open event or something.

Event for when the pins have been added to the dom

Hi,
I'm using richmarker, but instead of setting the visibility of the pin, I'm adding classes. The purpose of this is to use css transitions for the drop in effect.

Where is the appropriate place to do this? is this onRender?

Error initializing MarkerCollectionView

I'm using the code in the readme:

places = new Backbone.GoogleMaps.LocationCollection([
      {
        title: "Walker Art Center",
        lat: 44.9796635,
        lng: -93.2748776
      }, {
        title: "Science Museum of Minnesota",
        lat: 44.9429618,
        lng: -93.0981016
      }
    ]);
    map = new googlemaps.Map($('.map-canvas')[0], {
      center: new googlemaps.LatLng(44.9796635, -93.2748776),
      zoom: 12,
      mapTypeId: googlemaps.MapTypeId.ROADMAP
    });
    markerCollectionView = new Backbone.GoogleMaps.MarkerCollectionView({
      collection: places,
      map: map
    });

Instantiating markerCollectionView fails with the following error:

"Uncaught TypeError: Cannot read property 'map' of undefined"

at the line

if(!this.options.map && !this.map) throw new Error("A map must be specified on MarkerCollectionView instantiation")

this.options is, in fact, undefined.

Ability to update markerview's position on map

When adding a new "location" in my application, my server-side app asynchronously geocodes the address with longitude and latitude, and then fires a change:lat listener. As such, the markerview gets added somewhere out in Africa.

Right now, there's no way to refresh a single markerview's position on the map, so I'm forced to .addChild() the same location a second time to the map, which produces undesirable behavior.

Can we set up a way to refresh any single markerview's position on the map whenever longitude or latitude change?

Rails Assets compatibility

backbone.googlemaps has no version defined, I'm unable to add this library to any package manager.

MarkerClustererPlus support

Enhancement request: support for MarkerClustererPlus, essential UI component for densely populated maps.

Since we need this capability for a spec project right away, and since activity on your repo is somewhat infrequent, I forked your repo and took an initial pass at integrating myself. Seems to work ok.

However, as a forking n00b, I want to be sure of the following:

• I'm attributing your work properly
• It makes sense to fork rather than issue a pull request (given tight timeline)
• The bower config looks correct, so this could be registered

Any and all feedback welcome. Thanks for the work.

latlng changed before gOverlay not completely created

I try to create MarkerViewCollection with a location added into the collection. It would then trigger addChild to render the MarkerView.gOverlay. Before calling render, another update on the location is triggered and then invoke MarkerView.refreshOverlay before invoking the render. It then throws an exception to reference undefined MarkerView.gOverlay.

It is suggested to add a condition to check gOverlay ready or not before trigger
the action model <--eventhandler--> update overlay. Any other suggestion.

    // update overlay position if lat or lng change
    refreshOverlay: function() {
      // Only update overlay if we're not already in sync
      // Otherwise we end up in an endless loop of
      // update model <--eventhandler--> update overlay
      if(this.gOverlay && !this.model.getLatLng().equals(this.gOverlay.getPosition())) {
        this.gOverlay.setOptions({
          position: this.model.getLatLng()
        });
      }
    },

Unable to get this to work in backbone marionette.

I can get this to work fine using the sample but when I try to incorporate this by rendering within a backbone marionette item view I cant get a map to display.

Richmarker Support

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?

Unbind / Remove Listeners

as most BackboneJs apps are single page application, is there anyway we can manage this event listeners attached to the map

      this.bindMapEvents({
        'position_changed': 'updateModelPosition'
      });

perhaps need a function to unbind it properly

mapEvents handlers should be bound to the object, not the map marker

var CustomView = Backbone.GoogleMaps.MarkerView.extend({
  icons: {
    selected: "icons/map-marker.png"
  },

  mapEvents: {
    'mouseover': 'select'
  },

  select: function (e) {
    e.setIcon(this.icons.selected); // this.icons is undefined
  }
});

The code above doesn't work, and I've had to do some magic to get those icons in there (put the whole thing in an immediate function, scope the icons to the closure, etc...). I'm no JS wizard, but I think we should be able to do the following:

  select: function (e) {
    e.setIcon(this.icons.selected);
    this.trigger('application:event', this);
  }

Maybe I'm missing something, but as it stands it seems like I am going to have a hard time getting my app to know that a marker event has occurred.

Would it be too much to ask that the event handlers be bound to the object, rather than whatever it is they are bound to now (the gOverlay, I guess?). If not, I'm open to suggestions of best practices to get around this (as I said: maybe I've missed something you intended).

Pulling location data via external JSON URL?

What's the recommended way to pull in an external JSON URL as the location data? I've been having some trouble getting my head around how to do this. 😕

Selecting a LocationModel in a LocationCollection Deselects All Other LocationModels in All Other Location Collections

I can't help but notice that the issue from #14 still affects all LocationCollections that you have defined whenever any LocationModel gets selected. I couldn't tell if this was desired behavior or not, as I can see that you may only want one location in a map to be selected. This does leave the edge case of there being multiple maps on the page, each with a maximum of one selectable location.

If you want to only have one be selected for a given collection and have it be limited to that, I can easily send a pull request for that attached to this issue. If the intent is to limit it per map... I'm still trying to think of ways to handle that.

Sorry for all of the pull requests and issues, but I like this library and intend to use it as soon as I can. :D