Custom icons

[msurguy]

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

[eschwartz]

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)

[msurguy]

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

[eschwartz]

That's sweet!

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

[msurguy]

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.

[Routhinator]

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?

[Routhinator]

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

[liorbrauer]

@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).

[Routhinator]

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.

[eschwartz]

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);
    }
    });