Example code for my DragMarkers project (part 2)

2-markers_controller.js.coffee

$ = jQuery.sub()
Marker = App.Marker

class App.MarkersController extends Spine.Controller
  elements:
    "#map" : "mapEl"
    ".marker" : "markerIcons"

  constructor: ->
    super
    @html JST["views/markers/index"]
    @createMap()
    @createMapOverlay()
    @makeIconsDraggable()
    @placeExistingMarkers()

create map.coffee

  createMap: ->
    options = {
      zoom: 6
      center: new google.maps.LatLng(39.828175, -98.5795)
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    @map = new google.maps.Map(@mapEl[0], options)

create overlay.coffee

  createMapOverlay: ->
    @overlay = new google.maps.OverlayView()
    @overlay.draw = ->
    @overlay.setMap(@map)

dragend.coffee

  dragEnd: (event) ->
    @updateAttributes({
      latitude: @gmarker.getPosition().lat()
      longitude: @gmarker.getPosition().lng()
    })

draggable icons.coffee

  makeIconsDraggable: ->
    @markerIcons.draggable({
      helper: 'clone'
      containment: 'parent'
      stop: (event, ui) => @placeNewMarker(event, ui)
    })

  placeNewMarker: (event, ui) ->
    offset = @mapEl.position()
    x = event.pageX - offset.left
    y = event.pageY - offset.top
    point = new google.maps.Point(x,y)
    latlng = @overlay.getProjection().fromContainerPixelToLatLng(point)
    icon = ui.helper[0].src
    marker = Marker.create({
      latitude: latlng.lat()
      longitude: latlng.lng()
      icon: icon
    })
    marker.setMap(@map)

final-markers_controller.js.coffee

$ = jQuery.sub()
Marker = App.Marker

class App.MarkersController extends Spine.Controller
  elements:
    "#map" : "mapEl"
    ".marker" : "markerIcons"

  constructor: ->
    super
    @html JST["views/markers/index"]
    @createMap()
    @createMapOverlay()
    @makeIconsDraggable()
    @placeExistingMarkers()

  createMap: ->
    options = {
      zoom: 6
      center: new google.maps.LatLng(39.828175, -98.5795)
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    @map = new google.maps.Map(@mapEl[0], options)

  createMapOverlay: ->
    @overlay = new google.maps.OverlayView()
    @overlay.draw = ->
    @overlay.setMap(@map)

  makeIconsDraggable: ->
    @markerIcons.draggable({
      helper: 'clone'
      containment: 'parent'
      stop: (event, ui) => @placeNewMarker(event, ui)
    })

  placeNewMarker: (event, ui) ->
    offset = @mapEl.position()
    x = event.pageX - offset.left
    y = event.pageY - offset.top
    point = new google.maps.Point(x,y)
    latlng = @overlay.getProjection().fromContainerPixelToLatLng(point)
    icon = ui.helper[0].src
    marker = Marker.create({
      latitude: latlng.lat()
      longitude: latlng.lng()
      icon: icon
    })
    marker.setMap(@map)

  placeExistingMarkers: ->
    Marker.bind 'refresh', (markers) => 
      marker.setMap(@map) for marker in markers
    Marker.fetch()

google marker.coffee

  constructor: ->
    super
    @gmarker = new google.maps.Marker(
      position: new google.maps.LatLng(@latitude, @longitude)
      icon: @icon
      draggable: true
    )

markers.css.scss

#map {
  border: 1px solid #333;
  height: 400px;
  width: 600px;
  padding: 25px;
}
.marker {
  margin-top: 10px;
  margin-left: 26px;
}

place existing.coffee

  placeExistingMarkers: ->
    Marker.bind 'refresh', (markers) => 
      marker.setMap(@map) for marker in markers
    Marker.fetch()

setmap.coffee

setMap: (map) -> @gmarker.setMap(map)