Permalink
Browse files

adding project files

  • Loading branch information...
1 parent 3078963 commit 6a9bc0a8841aa4093f85f7e9ff797fb2a61ba360 @chanind committed Feb 17, 2012
Showing with 502 additions and 0 deletions.
  1. +106 −0 application.coffee
  2. +161 −0 application.js
  3. +43 −0 index.html
  4. +69 −0 mootools-more.js
  5. BIN purple.png
  6. +123 −0 styles.css
  7. BIN textured_black_bg.jpg
  8. BIN yellow.png
View
@@ -0,0 +1,106 @@
+window.MeetInTheMiddle =
+ setup: ->
+ @geocoder = new google.maps.Geocoder()
+ document.addEvent 'domready', =>
+ new OverText('js_place1')
+ new OverText('js_place2')
+ @loadMap()
+ $('js_searchform').addEvent 'submit', (evt) =>
+ evt.stop()
+ @performSearch()
+ loadMap: ->
+ mapOptions =
+ center: new google.maps.LatLng(-34.397, 150.644)
+ zoom: 11
+ mapTypeId: google.maps.MapTypeId.ROADMAP
+ @map = new google.maps.Map($('js_map'), mapOptions)
+ @infoWindow = new google.maps.InfoWindow()
+ @placesService = new google.maps.places.PlacesService(@map)
+ google.maps.event.addListener @map, 'dragend', => @loadPlaces()
+ google.maps.event.addListener @map, 'zoom_changed', => @loadPlaces()
+ document.body.addEvent 'mouseover', =>
+ @hlmarker.setMap(null) if @hlmarker
+
+ performSearch: ->
+ @hideErrors()
+ address1 = $('js_place1').value.trim()
+ address2 = $('js_place2').value.trim()
+ if address1 == '' || address2 == ''
+ @error("You can't leave place1 or place2 blank")
+ else
+ @geocode address1, (loc1) =>
+ if loc1
+ @geocode address2, (loc2) =>
+ if loc2
+ @searchNearCenter(loc1, loc2)
+ else
+ @error("Can't find #{address2}")
+ else
+ @error("Can't find #{address1}")
+
+ searchNearCenter: (loc1, loc2) ->
+ $('js_results').setStyle('visibility', 'visible')
+ @centerMarker.setMap(null) if @centerMarker
+ centerLat = (loc1.lat() + loc2.lat()) / 2
+ centerLng = (loc1.lng() + loc2.lng()) / 2
+ @centerPoint = new google.maps.LatLng(centerLat, centerLng)
+ @map.setCenter @centerPoint
+ @map.setZoom 11
+ @centerMarker = new google.maps.Marker
+ map: @map
+ position: @centerPoint
+ icon: 'purple.png'
+ @loadPlaces()
+
+ loadPlaces: ->
+ if @placeMarkers
+ @placeMarkers.each (marker) => marker.setMap(null)
+ @placeMarkers = []
+ $('js_list').empty()
+ request =
+ bounds: @map.getBounds()
+ types: ['restaurant','movie_theater', 'bowling_alley', 'bakery', 'cafe', 'zoo']
+ @placesService.search request, (results, status) =>
+ if status == google.maps.places.PlacesServiceStatus.OK
+ results.each (place) =>
+ marker = new google.maps.Marker
+ map: @map
+ position: place.geometry.location
+ @placeMarkers.push(marker)
+ listElmWrapper = new Element('div').inject($('js_list'))
+ listElm = new Element('div.resultelm').inject(listElmWrapper)
+ new Element('img', {src: place.icon}).inject(listElm)
+ new Element('div.header', {text: place.name}).inject(listElm)
+ new Element('div.types', {text: place.types.join(', ')}).inject(listElm)
+ new Element('div.rating', {text: "rating: #{place.rating} / 5"}).inject(listElm)
+ showPopup = () =>
+ @infoWindow.setContent(listElmWrapper.innerHTML)
+ @infoWindow.open(@map, marker)
+ google.maps.event.addListener marker, 'click', showPopup
+ listElm.addEvent 'click', showPopup
+ listElm.addEvent 'mouseover', (evt) =>
+ evt.stop()
+ @hlmarker.setMap(null) if @hlmarker
+ @hlmarker = new google.maps.Marker
+ map: @map
+ position: marker.getPosition()
+ icon: 'yellow.png'
+ zIndex: 1000
+ else if status == google.maps.places.PlacesServiceStatus.ZERO_RESULTS
+ $('js_list').grab(new Element('div', {text: '0 results :('}))
+
+ hideErrors: ->
+ $('js_errors').setStyle('display', 'none')
+
+ error: (msg) ->
+ $('js_errors').innerHTML = msg
+ $('js_errors').setStyle('display', 'block')
+
+ geocode: (address, callback) ->
+ @geocoder.geocode {'address': address}, (results, status) =>
+ if status == google.maps.GeocoderStatus.OK
+ callback(results[0].geometry.location)
+ else
+ callback(false)
+
+MeetInTheMiddle.setup()
View

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
View
@@ -0,0 +1,43 @@
+<!DOCTYPE HTML>
+
+<html>
+ <head>
+ <title>Meet in the Middle</title>
+ <link rel="stylesheet" type="text/css" href="styles.css" />
+ </head>
+ <body>
+ <div class="main">
+ <div class="title">
+ Meet <span class="small">in the</span> Middle
+ </div>
+ <div class="subtitle">
+ Enter 2 addresses and we'll show you can meet in the middle
+ </div>
+ <div class="searchbox">
+ <form id="js_searchform" action="/" method="post">
+ <div class="half">
+ <div class="label">Place 1</div>
+ <input type="text" id="js_place1" title="Address, street, or city"/>
+ </div>
+ <div class="half">
+ <div class="label">Place 2</div>
+ <input type="text" id="js_place2" title="Address, street, or city" />
+ </div>
+ <input type="submit" class="search_button" value="Go" />
+ <div class="cleared"></div>
+ </form>
+ </div>
+ <div id="js_errors" class="errors" style="display:none">Could not find that location</div>
+ <div class="results" id="js_results" style="visibility:hidden">
+ <div class="map" id="js_map"></div>
+ <div class="list" id="js_list">
+ </div>
+ </div>
+ </div>
+ <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
+ <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
+ <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/mootools/1.4.4/mootools-yui-compressed.js"></script>
+ <script type="text/javascript" src="mootools-more.js"></script>
+ <script type="text/javascript" src="application.js"></script>
+ </body>
+</html>
Oops, something went wrong.

0 comments on commit 6a9bc0a

Please sign in to comment.