Created
November 20, 2011 20:16
-
-
Save phaedryx/1380827 to your computer and use it in GitHub Desktop.
Example code for my DragMarkers project (part 2)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$ = 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() |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
createMapOverlay: -> | |
@overlay = new google.maps.OverlayView() | |
@overlay.draw = -> | |
@overlay.setMap(@map) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
dragEnd: (event) -> | |
@updateAttributes({ | |
latitude: @gmarker.getPosition().lat() | |
longitude: @gmarker.getPosition().lng() | |
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$ = 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() |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
constructor: -> | |
super | |
@gmarker = new google.maps.Marker( | |
position: new google.maps.LatLng(@latitude, @longitude) | |
icon: @icon | |
draggable: true | |
) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
#map { | |
border: 1px solid #333; | |
height: 400px; | |
width: 600px; | |
padding: 25px; | |
} | |
.marker { | |
margin-top: 10px; | |
margin-left: 26px; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
placeExistingMarkers: -> | |
Marker.bind 'refresh', (markers) => | |
marker.setMap(@map) for marker in markers | |
Marker.fetch() |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
setMap: (map) -> @gmarker.setMap(map) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment