Skip to content

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also compare across forks.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also compare across forks.
...
  • 4 commits
  • 6 files changed
  • 0 commit comments
  • 1 contributor
Showing with 111 additions and 46 deletions.
  1. +4 −1 index.haml
  2. +4 −1 index.html
  3. +44 −23 js/map.coffee
  4. +48 −21 js/map.js
  5. +3 −0 js/onload.coffee
  6. +8 −0 js/onload.js
View
5 index.haml
@@ -4,10 +4,13 @@
%title Fullscreen Maps
%meta{ :name=>"viewport", :content=>"initial-scale=1.0, user-scalable=no" }
%script{ :src=>"http://maps.google.com/maps/api/js?sensor=true", :type=>"text/javascript" }
+ %script{ :src=>"https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js" }
+ / %script{ :src=>"https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.js" }
%script{ :src=>"js/map.js", :type=>"text/javascript" }
+ %script{ :src=>"js/onload.js", :type=>"text/javascript" }
%link{ :rel=>"stylesheet", :href=>"css/map.css", :type=>"text/css" }
- %body{ :onload=>"loadMap('map')" }
+ %body
%div{:id=>"body_div"}
%div{:id=>"map"}
#search
View
5 index.html
@@ -4,10 +4,13 @@
<title>Fullscreen Maps</title>
<meta content='initial-scale=1.0, user-scalable=no' name='viewport' />
<script src='http://maps.google.com/maps/api/js?sensor=true' type='text/javascript'></script>
+ <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js'></script>
+ <!-- %script{ :src=>"https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.js" } -->
<script src='js/map.js' type='text/javascript'></script>
+ <script src='js/onload.js' type='text/javascript'></script>
<link href='css/map.css' rel='stylesheet' type='text/css' />
</head>
- <body onload="loadMap('map')">
+ <body>
<div id='body_div'></div>
<div id='map'></div>
<div id='search'>
View
67 js/map.coffee
@@ -1,21 +1,24 @@
-# compile w/
+ # compile w/
# % coffee -c js/map.coffee
# => js/map.js
-map ={}
+FSMAP = {} # our library
+@FSMAP = FSMAP # add to global
+
+FSMAP.map = {}
# loadMap(map_div_name): initialize a google map on the map DOM element
# input: String, name of map div DOM element
-@loadMap = (map_div_name) ->
+FSMAP.loadMap = (map_div_name) ->
myOptions =
zoom: 12
mapTypeId: google.maps.MapTypeId.ROADMAP
mapTypeControlOptions: { mapTypeIds: [google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.SATELLITE, google.maps.MapTypeId.HYBRID, google.maps.MapTypeId.TERRAIN, 'OSM'] }
- map = new google.maps.Map document.getElementById(map_div_name), myOptions
+ FSMAP.map = new google.maps.Map document.getElementById(map_div_name), myOptions
- map.mapTypes.set "OSM", new google.maps.ImageMapType(
+ FSMAP.map.mapTypes.set "OSM", new google.maps.ImageMapType(
getTileUrl: (coord, zoom) ->
"http://tile.openstreetmap.org/" + zoom + "/" + coord.x + "/" + coord.y + ".png"
tileSize: new google.maps.Size(256, 256)
@@ -23,7 +26,7 @@ map ={}
maxZoom: 18
)
- geolocate map
+ geolocate FSMAP.map
# search(address): search for address, re-center map to first search result
# input: String, address / city, etc.
@@ -36,36 +39,54 @@ map ={}
(results, status) ->
if status is google.maps.GeocoderStatus.OK
- # TODO:
- # if results.size > 1
- # $('#search-results').show()
- # for result in results
- # $('#search-results').append("<div>#{result...}</div>")
-
- location = results[0].geometry.location
- map.setCenter location
- # add marker
- marker = new google.maps.Marker { position: location, map: map }
-
- google.maps.event.addListener marker, 'click', ->
- infoWindow = new google.maps.InfoWindow
- infoWindow.setContent results[0].formatted_address
- infoWindow.open map, marker
+ updateMap results[0]
+
+ if results.length > 1
+ FSMAP.results = results
+
+ $('#search-results').show()
+ for result, i in FSMAP.results
+ resultId = "result-#{i}"
+ resultContent = "<a href='javascript:void(0);' id='#{resultId}'>" + result.formatted_address + '</a>'
+ resultContent = "<div>" + resultContent + "</div>"
+
+ $('#search-results').append resultContent
+
+ $("##{resultId}").click () ->
+ resultId = this.id.replace('result-','')
+ updateMap FSMAP.results[resultId]
+
+ console.log FSMAP.results
+
else
alert "Not found: " + status
return location
+# updateMap(result): re-center map, update marker based on geocoder result
+# input: geocoder result
+updateMap = (result) ->
+
+ location = result.geometry.location
+ FSMAP.map.setCenter location
+ # add marker
+ marker = new google.maps.Marker { position: location, map: FSMAP.map }
+
+ google.maps.event.addListener marker, 'click', ->
+ infoWindow = new google.maps.InfoWindow
+ infoWindow.setContent result.formatted_address
+ infoWindow.open FSMAP.map, marker
+
# geolocate(): attempt to center map by calling browser geolocation
geolocate = () ->
newyork = new google.maps.LatLng(40.69847032728747, -73.9514422416687)
handleNoGeolocation = () ->
- map.setCenter newyork
+ FSMAP.map.setCenter newyork
if navigator.geolocation
navigator.geolocation.getCurrentPosition ( (position) ->
initialLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude)
- map.setCenter initialLocation
+ FSMAP.map.setCenter initialLocation
), ->
handleNoGeolocation()
else
View
69 js/map.js
@@ -1,9 +1,14 @@
+// Generated by CoffeeScript 1.3.1
(function() {
- var geolocate, map;
+ var FSMAP, geolocate, updateMap;
- map = {};
+ FSMAP = {};
- this.loadMap = function(map_div_name) {
+ this.FSMAP = FSMAP;
+
+ FSMAP.map = {};
+
+ FSMAP.loadMap = function(map_div_name) {
var myOptions;
myOptions = {
zoom: 12,
@@ -12,8 +17,8 @@
mapTypeIds: [google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.SATELLITE, google.maps.MapTypeId.HYBRID, google.maps.MapTypeId.TERRAIN, 'OSM']
}
};
- map = new google.maps.Map(document.getElementById(map_div_name), myOptions);
- map.mapTypes.set("OSM", new google.maps.ImageMapType({
+ FSMAP.map = new google.maps.Map(document.getElementById(map_div_name), myOptions);
+ FSMAP.map.mapTypes.set("OSM", new google.maps.ImageMapType({
getTileUrl: function(coord, zoom) {
return "http://tile.openstreetmap.org/" + zoom + "/" + coord.x + "/" + coord.y + ".png";
},
@@ -21,7 +26,7 @@
name: "OpenStreetMap",
maxZoom: 18
}));
- return geolocate(map);
+ return geolocate(FSMAP.map);
};
this.search = function(address) {
@@ -30,20 +35,26 @@
geocoder.geocode({
address: address
}, function(results, status) {
- var location, marker;
+ var i, result, resultContent, resultId, _i, _len, _ref;
if (status === google.maps.GeocoderStatus.OK) {
- location = results[0].geometry.location;
- map.setCenter(location);
- marker = new google.maps.Marker({
- position: location,
- map: map
- });
- return google.maps.event.addListener(marker, 'click', function() {
- var infoWindow;
- infoWindow = new google.maps.InfoWindow;
- infoWindow.setContent(results[0].formatted_address);
- return infoWindow.open(map, marker);
- });
+ updateMap(results[0]);
+ if (results.length > 1) {
+ FSMAP.results = results;
+ $('#search-results').show();
+ _ref = FSMAP.results;
+ for (i = _i = 0, _len = _ref.length; _i < _len; i = ++_i) {
+ result = _ref[i];
+ resultId = "result-" + i;
+ resultContent = ("<a href='javascript:void(0);' id='" + resultId + "'>") + result.formatted_address + '</a>';
+ resultContent = "<div>" + resultContent + "</div>";
+ $('#search-results').append(resultContent);
+ $("#" + resultId).click(function() {
+ resultId = this.id.replace('result-', '');
+ return updateMap(FSMAP.results[resultId]);
+ });
+ }
+ return console.log(FSMAP.results);
+ }
} else {
return alert("Not found: " + status);
}
@@ -51,17 +62,33 @@
return location;
};
+ updateMap = function(result) {
+ var location, marker;
+ location = result.geometry.location;
+ FSMAP.map.setCenter(location);
+ marker = new google.maps.Marker({
+ position: location,
+ map: FSMAP.map
+ });
+ return google.maps.event.addListener(marker, 'click', function() {
+ var infoWindow;
+ infoWindow = new google.maps.InfoWindow;
+ infoWindow.setContent(result.formatted_address);
+ return infoWindow.open(FSMAP.map, marker);
+ });
+ };
+
geolocate = function() {
var handleNoGeolocation, newyork;
newyork = new google.maps.LatLng(40.69847032728747, -73.9514422416687);
handleNoGeolocation = function() {
- return map.setCenter(newyork);
+ return FSMAP.map.setCenter(newyork);
};
if (navigator.geolocation) {
return navigator.geolocation.getCurrentPosition((function(position) {
var initialLocation;
initialLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
- return map.setCenter(initialLocation);
+ return FSMAP.map.setCenter(initialLocation);
}), function() {
return handleNoGeolocation();
});
View
3 js/onload.coffee
@@ -0,0 +1,3 @@
+$ ->
+
+ FSMAP.loadMap('map')
View
8 js/onload.js
@@ -0,0 +1,8 @@
+// Generated by CoffeeScript 1.3.1
+(function() {
+
+ $(function() {
+ return FSMAP.loadMap('map');
+ });
+
+}).call(this);

No commit comments for this range

Something went wrong with that request. Please try again.