Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Example code for my DragMarkers project (part 2)
$ = 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)
dragEnd: (event) ->
@updateAttributes({
latitude: @gmarker.getPosition().lat()
longitude: @gmarker.getPosition().lng()
})
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)
$ = 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()
constructor: ->
super
@gmarker = new google.maps.Marker(
position: new google.maps.LatLng(@latitude, @longitude)
icon: @icon
draggable: true
)
#map {
border: 1px solid #333;
height: 400px;
width: 600px;
padding: 25px;
}
.marker {
margin-top: 10px;
margin-left: 26px;
}
placeExistingMarkers: ->
Marker.bind 'refresh', (markers) =>
marker.setMap(@map) for marker in markers
Marker.fetch()
setMap: (map) -> @gmarker.setMap(map)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.