app/controllers/chap_four_controller.rb
app/helpers/chap_four_helper.rb
app/models/store.rb
app/views/chap_four/map.html.erb
db/migrate/20080627051703_create_stores.rb
lib/tasks/geocoding_tasks.rake
public/javascripts/application_chap_three.js
test/fixtures/stores.yml
test/functional/chap_four_controller_test.rb
test/unit/store_test.rb
@@ -1,7 +1,11 @@
-Sample codes from the book [Beginning Google Maps Applications with Rails and Ajax: From Novice to Professional](http://www.amazon.com/Beginning-Google-Maps-Applications-Rails/dp/1590597877)
+Sample codes from the book [Beginning Google Maps Applications with Rails and Ajax: From Novice to Professional](http://www.amazon.com/Beginning-Google-Maps-Applications-Rails/dp/1590597877).
-This sample is of Rails 2.1, using Sqlite3.
+The book's site is http://googlemapsbook.com/ .
-The source code from the book has some typos, and some of them don't work. I've tried my best to make the it work.
+This sample uses Rails 2.1 and Sqlite3.
+
+The source code from the book has some typos, and some of them don't work. I've tried my best to make it work.
+
+Thanks to the authors of the book, for bringing us this book, and for allowing me to use the source code and make it public on github.
The Chinese translation of the book sucks, see http://blog.ashchan.com/archive/2008/06/25/professional-book/ .
\ No newline at end of file
README
@@ -1,2 +1,15 @@
+# == Schema Information
+# Schema version: 20080627051703
+#
+# Table name: markers
+#
+# id :integer not null, primary key
+# lat :decimal(, )
+# lng :decimal(, )
+# found :string(100)
+# left :string(100)
+# icon :string(100) default("")
+#
+
class Marker < ActiveRecord::Base
end
app/models/marker.rb
@@ -7,7 +7,7 @@
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAApuqJ-ievoI8n0KBpKtZuyxTJQa0g3IQ9GZqIMmInSLzwtGDKaBSt40PUewe_UUsm_5pWXNbz5adklA"
type="text/javascript"></script>
- <%= javascript_include_tag 'prototype', 'application' %>
+ <%= javascript_include_tag 'prototype', 'application_chap_three' %>
</head>
<body>
<div id="map" style="width: 800px; height: 500px"></div>
app/views/chap_three/map.html.erb
db/development.sqlite3
@@ -9,7 +9,7 @@
#
# It's strongly recommended to check this file into your version control system.
-ActiveRecord::Schema.define(:version => 20080626030014) do
+ActiveRecord::Schema.define(:version => 20080627051703) do
create_table "markers", :force => true do |t|
t.decimal "lat"
@@ -19,4 +19,16 @@ ActiveRecord::Schema.define(:version => 20080626030014) do
t.string "icon", :limit => 100, :default => ""
end
+ create_table "stores", :force => true do |t|
+ t.string "name", :limit => 50
+ t.string "address", :limit => 100
+ t.string "address2", :limit => 100
+ t.string "city", :limit => 50
+ t.string "state", :limit => 2
+ t.string "zip", :limit => 9
+ t.string "phone", :limit => 15
+ t.string "lat", :limit => 20
+ t.string "lng", :limit => 20
+ end
+
end
db/schema.rb
@@ -1,108 +1,21 @@
var map;
-var centerLatitude = 37.4419;
-var centerLongitude = -122.1419;
-var startZoom = 12;
-
-function createMarker() {
- var lng = $('longitude').value;
- var lat = $('latitude').value;
- var formValues = Form.serialize('geocache-input');
- new Ajax.Request('create',
- {
- parameters: formValues,
- onComplete: function(request) {
- res = eval("(" + request.responseText + ")");
-
- if (!res.success) {
- alert(res.content);
- }
- else {
- var latlng = new GLatLng(parseFloat(lat), parseFloat(lng));
- var marker = addMarkerToMap(latlng, res.content, res.icon);
- map.addOverlay(marker);
- map.closeInfoWindow();
- }
- }
- });
-
- return false;
-}
-
-function listMarkers() {
- var request = GXmlHttp.create();
- request.open('GET', 'list', true);
- request.onreadystatechange = function() {
- if (request.readyState == 4) {
- markers = eval("(" + request.responseText + ")");
- for (var i = 0; i < markers.length; ++i) {
- var marker = markers[i].marker;
- var lat = marker.lat;
- var lng = marker.lng;
-
- if (lat && lng) {
- var latlng = new GLatLng(parseFloat(lat), parseFloat(lng));
-
- var html = '<div><strong>Found</strong> '
- + marker.found
- + '</div><div><strong>Left</strong> '
- + marker.left
- + '</div>';
-
- map.addOverlay(addMarkerToMap(latlng, html, marker.icon));
- }
- }
- }
- }
-
- request.send(null);
-}
-
-function addMarkerToMap(latlng, html, iconImage) {
- if (iconImage != "") {
- var icon = new GIcon();
- icon.image = iconImage;
- icon.iconSize = new GSize(25, 25);
- icon.iconAnchor = new GPoint(14, 25);
- icon.infoWindowAnchor = new GPoint(14, 14);
- var marker = new GMarker(latlng, icon);
- }
- else {
- var marker = new GMarker(latlng);
- }
+var centerLatitude = 40.6897;
+var centerLongitude = -95.0446;
+var startZoom = 3;
+
+var RonJonLogo = new GIcon();
+RonJonLogo.image = "http://book.earthcode.com/chapter4/StoreLocationMap/ronjonsurfshoplogo.png"
+RonJonLogo.iconSize = new GSize(48, 24);
+RonJonLogo.iconAnchor = new GPoint(24, 14);
+RonJonLogo.infoWindowAnchor = new GPoint(24, 24);
+
+function addMarker(latitude, longitude, description) {
+ var marker = new GMarker(new GLatLng(latitude, longitude), RonJonLogo);
+ GEvent.addListener(marker, 'click',
+ function() { marker.openInfoWindowHtml(description); }
+ );
- GEvent.addListener(marker, 'click', function() {
- var markerHTML = html;
- marker.openInfoWindowHtml(markerHTML);
- });
- return marker;
-}
-
-function onMapClick(overlay, latlng) {
- /* click on a marker also tiggers this event, but without a latlng value*/
- if (!latlng)
- return;
-
- var inputForm = document.createElement("form");
- inputForm.setAttribute("action", "");
- inputForm.onsubmit = function() { createMarker(); return false; }
- inputForm.id = 'geocache-input';
-
- var lng = latlng.lng();
- var lat = latlng.lat();
-
- inputForm.innerHTML = '<fieldset style="width:150px;">'
- + '<legend>New Marker</legend>'
- + '<label for="found">Found</label>'
- + '<input type="text" id="found" name="m[found]" style="width: 100%;" />'
- + '<label for="left">Left</label>'
- + '<input type="text" id="left" name="m[left]" style="width: 100%;" />'
- + '<label for="icon">Icon URL</label>'
- + '<input type="text" id="icon" name="m[icon]" style="width: 100%" />'
- + '<input type="submit" value="Save" />'
- + '<input type="hidden" id="longitude" name="m[lng]" value="' + lng + '" />'
- + '<input type="hidden" id="latitude" name="m[lat]" value ="' + lat + '" />'
- + '</fieldset>';
- map.openInfoWindow(latlng, inputForm);
+ map.addOverlay(marker);
}
function init() {
@@ -110,12 +23,12 @@ function init() {
return;
map = new GMap2(document.getElementById("map"));
- listMarkers();
map.addControl(new GSmallMapControl());
- map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(centerLatitude, centerLongitude), startZoom);
- GEvent.addListener(map, 'click', onMapClick);
+ for (i = 0; i < stores.length; ++i) {
+ addMarker(stores[i].lat, stores[i].lng, stores[i].name)
+ }
}
window.onload = init;
public/javascripts/application.js
@@ -1,3 +1,16 @@
+# == Schema Information
+# Schema version: 20080627051703
+#
+# Table name: markers
+#
+# id :integer not null, primary key
+# lat :decimal(, )
+# lng :decimal(, )
+# found :string(100)
+# left :string(100)
+# icon :string(100) default("")
+#
+
# Read about fixtures at http://ar.rubyonrails.org/classes/Fixtures.html
# one:
test/fixtures/markers.yml
07c19300fb7716ae1e886f401f7a83108e969fb6
ashchan
ashchan@gmail.com
http://github.com/ashchan/google_maps_example/commit/b6b175b31a09c60363f1122f832c44ce52b3b49c
b6b175b31a09c60363f1122f832c44ce52b3b49c
2008-06-27T00:09:29-07:00
2008-06-27T00:09:29-07:00
chapter four
360d34bd2a4a850c3cbcf23beaa72e27921f9496
ashchan
ashchan@gmail.com