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