Custom icons about backbone.googlemaps HOT 9 CLOSED

Does a polar bear defecate atop rapidly vanishing arctic ice sheets?

Why yes -- you can apply an icon to a Marker View using the overlayOptions object:

var view = new Backbone.GoogleMaps.MarkerView({
  overlayOptions: {
    icon: '/images/myIcon.png'
  }
});

Let me know if you have any trouble with this, or any ideas on how to improve this functionality.

(And sorry for being a smart ass.... I've been filling out boring paperwork all evening)

from backbone.googlemaps.

Haha, thanks for the concise answer, sorry for the boring paperwork stuff and sorry for silly question, gentleman. At least this gave you a chance to be a smart ass =)
PS, wanna see what I'm doing with this? Get distracted for a minute here: d.pr/v/6coU

from backbone.googlemaps.

That's sweet!

If you publish it, let me know. I'll give you shout-out on the readme.

from backbone.googlemaps.

Thanks!

The service will be free to use but not open source at this point, I would appreciate the link though! I will let you know when it's live.

from backbone.googlemaps.

I've been trying to figure out how to use your example here to change a markers colour but I'm not getting anywhere.
I want to change 1 marker in a collection to a different color - but it doesn't seem like the overlayOptions gets passed in a collection?

Can you get a more fleshed out example please?

from backbone.googlemaps.

Well, I managed to get it to do what I wanted, but I had to change line 226:

from: }, this.overlayOptions));

to: }, this.model.attributes.overlayOptions));

so it would accept the colour and icon settings per marker

from backbone.googlemaps.

@routh are you happy with that solution? I am also looking to have a different icon per marker, but I don't like the idea of putting my view logic (custom marker icon) inside my model (though I have yet to think of a better solution).

from backbone.googlemaps.

I don't feel its the best option but it works for now. Perhaps the ability to define icon types in the config of the this module and then being able to simply pass an icon: varName in the models would be best.

from backbone.googlemaps.

Currently, the MarkerCollection doesn't accept overlay options. @routh Can you explain more (or show me) what you're trying to accomplish.

I updated the example file to use custom icons. Let me know if this clarifies anything for you:

    App.MarkerView = Backbone.GoogleMaps.MarkerView.extend({
        infoWindow: App.InfoWindow,

        initialize: function() {
            _.bindAll(this, 'handleDragEnd');
        },

        mapEvents: {
            'dragend'   : 'handleDragEnd'
        },

        handleDragEnd: function(e) {
            alert('Dropped at: \n Lat: ' + e.latLng.lat() + '\n lng: ' + e.latLng.lng());
        }
    });

  App.MuseumMarker = App.MarkerView.extend({
    overlayOptions: {
      draggable: true,
      icon: 'assets/museum.png'
    }
  });

  App.BarMarker = App.MarkerView.extend({
    overlayOptions: {
      draggable: true,
      icon: 'assets/beer.png'
    }
  });

    App.MarkerCollectionView = Backbone.GoogleMaps.MarkerCollectionView.extend({
        markerView: App.MarkerView,

    addChild: function(model) {
      this.markerView = model.get('type') === 'museum' ?
              App.MuseumMarker:
              App.BarMarker;

      Backbone.GoogleMaps.MarkerCollectionView.prototype.addChild.apply(this, arguments);
    }
    });

from backbone.googlemaps.