Change handler behavior

Principles

You can inject whatever model / builder you want.

Let's see some examples.

Rich Marker

Say you want to use Rich Markers. To do this, we need to change the way the marker is created.

So we'll change the marker builder:

class RichMarkerBuilder extends Gmaps.Google.Builders.Marker #inherit from builtin builder
  #override create_marker method
  create_marker: ->
    options = _.extend @marker_options(), @rich_marker_options()
    @serviceObject = new RichMarker options #assign marker to @serviceObject

  rich_marker_options: ->
    marker = document.createElement("div")
    marker.setAttribute 'class', 'marker_container'
    marker.innerHTML = @args.marker
    { content: marker }

handler = Gmaps.build 'Google', { builders: { Marker: RichMarkerBuilder} } #dependency injection

#then standard use
handler.buildMap { provider: {}, internal: {id: 'map'} }, ->
  markers = handler.addMarkers([
    {"lat": 0, "lng": 0, 'marker': '<span>Here!</span>'}
  ])
  handler.bounds.extendWith(markers)
  handler.fitMapToBounds()

Of course, we'd need to have the rich marker javascript:

<script src='//cdn.rawgit.com/googlemaps/js-rich-marker/gh-pages/src/richmarker-compiled.js' type='text/javascript'></script>

InfoBox

class InfoBoxBuilder extends Gmaps.Google.Builders.Marker # inherit from base builder
  # override method
  create_infowindow: ->
    return null unless _.isString @args.infowindow

    boxText = document.createElement("div")
    boxText.setAttribute('class', 'marker_container') #to customize
    boxText.innerHTML = @args.infowindow
    @infowindow = new InfoBox(@infobox(boxText))
 
    # add @bind_infowindow() for < 2.1
   
  infobox: (boxText)->
    content: boxText
    pixelOffset: new google.maps.Size(-140, 0)
    boxStyle:
      width: "280px"

handler = Gmaps.build 'Google', { builders: { Marker: InfoBoxBuilder} }

Of course, we'd need to have the infobox javascript:

<script src='//cdn.rawgit.com/printercu/google-maps-utility-library-v3-read-only/master/infobox/src/infobox_packed.js' type='text/javascript'></script>