Permalink
Browse files

Use feature-specific icons for markers.

Add listener to change location on map click.
Restyle about link.
  • Loading branch information...
1 parent 26ae6ff commit a121c4eb6c916ffe045178dc89464b0da096f88f @chip-rosenthal committed Mar 14, 2012
Showing with 53 additions and 11 deletions.
  1. +3 −2 public/about.html
  2. +33 −7 public/findit.js
  3. +17 −2 public/index.html
View
@@ -51,10 +51,11 @@
<p>Here are some things you can do with the map:</p>
<ul>
- <li>Type an address in the field at the bottom of the screen to
- map that location.</li>
+ <li>Click at a location on the map to see what features are nearby.</li>
<li>Drag the red "you are here" marker around, to explore a
different area.</li>
+ <li>Type an address in the field at the bottom of the screen to
+ map that location.</li>
</ul>
<p>
View
@@ -53,6 +53,15 @@ function FindIt(map_id, opts) {
* List of google.maps.InfoWindow instances for all the markers (both me and features).
*/
r.info_windows = [];
+
+ var micon = function(url, width) {
+ return new google.maps.MarkerImage(
+ url,
+ new google.maps.Size(width, 32), // size
+ new google.maps.Point(0,0), // origin
+ new google.maps.Point(16, 32) // anchor
+ );
+ };
/**
* Pre-built marker images that are used in the application.
@@ -61,8 +70,18 @@ function FindIt(map_id, opts) {
* * https://sites.google.com/site/gmapsdevelopment/
* * http://duncan99.wordpress.com/2011/09/25/google-maps-api-adding-markers/
*/
- var marker_images = {
-
+ var marker_images = {
+
+ 'fire' : micon("http:///maps.google.com/mapfiles/kml/pal2/icon0.png", 32),
+ 'fire_shadow' : micon("http:///maps.google.com/mapfiles/kml/pal2/icon0s.png", 59),
+ 'postoffice' : micon("http://maps.google.com/mapfiles/ms/micons/postoffice-us.png", 32),
+ 'postoffice_shadow' : micon("http://maps.google.com/mapfiles/ms/micons/postoffice-us.shadow.png", 59),
+ 'library' : micon("http:///maps.google.com/mapfiles/kml/pal3/icon56.png", 32),
+ 'library_shadow' : micon("http:///maps.google.com/mapfiles/kml/pal3/icon56s.png", 59),
+ 'feature' : micon("http:///maps.google.com/mapfiles/kml/pal3/icon40.png", 32),
+ 'feature_shadow' : micon("http:///maps.google.com/mapfiles/kml/pal3/icon40s.png", 59),
+
+
'blue_dot' : new google.maps.MarkerImage(
"http://maps.google.com/mapfiles/ms/micons/blue-dot.png",
new google.maps.Size(32, 32), // size
@@ -96,10 +115,10 @@ function FindIt(map_id, opts) {
*/
r.recognized_features = {
ME : {title: null, marker: marker_images.red_dot, marker_shadow: marker_images.shadow},
- LIBRARY : {title: "library", marker: marker_images.blue_dot, marker_shadow: marker_images.shadow},
- POST_OFFICE : {title: "post office", marker: marker_images.blue_dot, marker_shadow: marker_images.shadow},
- FIRE_STATION : {title: "fire station", marker: marker_images.blue_dot, marker_shadow: marker_images.shadow},
- MOON_TOWER : {title: "moon tower", marker: marker_images.blue_dot, marker_shadow: marker_images.shadow}
+ FIRE_STATION : {title: "fire station", marker: marker_images.fire, marker_shadow: marker_images.fire_shadow},
+ LIBRARY : {title: "library", marker: marker_images.library, marker_shadow: marker_images.library_shadow},
+ MOON_TOWER : {title: "moon tower", marker: marker_images.feature, marker_shadow: marker_images.feature_shadow},
+ POST_OFFICE : {title: "post office", marker: marker_images.postoffice, marker_shadow: marker_images.postoffice_shadow},
};
@@ -197,6 +216,8 @@ FindIt.methods = {
*/
displayMapAtLocation : function(loc, address) {
+ var that = this;
+
if (this.map) {
this.map.panTo(loc);
} else {
@@ -205,6 +226,10 @@ FindIt.methods = {
center: loc,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
+ var mapClickCallBack = function(event) {
+ that.changeLocation(event.latLng);
+ };
+ google.maps.event.addListener(this.map, 'click', mapClickCallBack);
}
if (this.marker_me) {
@@ -278,7 +303,7 @@ FindIt.methods = {
google.maps.event.addListener(marker, 'dragend', dragCallBack);
- this.makeInfoWindow(marker, "<b>You are here</b><br /><i>Drag this marker to explore the city.</i>");
+ this.makeInfoWindow(marker, "<b>You are here</b>");
return marker;
},
@@ -293,6 +318,7 @@ FindIt.methods = {
* marker to a different place.
*/
changeLocation : function(loc) {
+ this.marker_me.setPosition(loc);
this.findAddress(loc);
this.searchNearby(loc);
},
View
@@ -22,6 +22,21 @@
position: absolute;
top: 0;
right: 0;
+ color: black;
+ font-size: 8pt;
+ padding-left: 4px;
+ padding-right: 4px;
+}
+
+a#about_link:hover {
+ background: #e8e8e8;
+}
+
+a#zabout_link {
+ display: block;
+ position: absolute;
+ top: 0;
+ right: 0;
margin-top: 4px;
margin-right: 4px;
padding-left: 4px;
@@ -32,7 +47,7 @@
text-decoration: none;
}
-a#about_link:hover {
+a#zabout_link:hover {
color: yellow;
background: #333;
}
@@ -111,7 +126,7 @@
<div id="messages"></div>
<div id="map_canvas"></div>
<form id="controls" action="#" onsubmit="findit.displayMapAtAddress(this.address_field.value); return false;">
-<a id="about_link" href="about.html">ABOUT</a>
+<a id="about_link" href="about.html">About</a>
<input type="text" id="address_field" value="enter an address here" onclick="removePrompt(this)" />
</form>
</body>

0 comments on commit a121c4e

Please sign in to comment.