.gitmodules example/all_fields.html lib/pdoc @@ -10,7 +10,7 @@ task :doc do output_directory = 'doc' templates_directory = File.join('lib', 'pdoc_templates', 'html') - javascript_files = File.join('src', '**', '*.js') + javascript_files = File.join('src', '**', 'googlemap.js') FileUtils.rm_rf(output_directory) FileUtils.mkdir_p(output_directory) Rakefile @@ -15,6 +15,7 @@ #form { float:left; margin: 0 2em 0 0; + width: 500px; } #form label { @@ -40,4 +41,14 @@ float:left; clear:left; margin: 1em 0 0 0; +} + +#suggests { + float:left; + width: 500px; + +} +#suggests a { + float:left; + width: 100%; } \ No newline at end of file example/basic.css @@ -14,16 +14,14 @@ <body> <form id='form' onsubmit='displayAddress(); return false;'> - <label for='street'>Street</label> + <label for='street'>Addrees</label> <input type='text' name='street' id='street' class='text'/> - - <label for='state'>State</label> - <input type='text' name='state' id='state' class='text'/> - + <div id='suggests' style='display:none'> + </div> <label for='country'>Country</label> <select name='country' id='country'> - <option name='France'>France</option> - <option name='USA'>USA</option> + <option value='France'>France</option> + <option value='USA'>USA</option> </select> <input type='submit' value='Save' id='submit'/> @@ -37,11 +35,23 @@ </div> <script type='text/javascript'> - widget = new Mapeed.AddressForm.Widget({}); + + widget = new Mapeed.AddressForm.Widget() + .onSuggestChanged(onSuggestChanged) + .onInitialized(onInitialized); function displayAddress() { alert(widget.getAddress()) } + + function onSuggestChanged(widget, nbSuggest) { + document.getElementById('suggests').style.display = nbSuggest > 1 ? 'block' : 'none'; + } + + function onInitialized(widget) { + widget.getMap().addControl(new GSmallMapControl()); + } + </script> </body> </html> example/basic.html @@ -21,12 +21,14 @@ Mapeed.AddressForm.DefaultOptions = { map: 'map', city: 'city', state: 'state', country: 'country', + suggests: 'suggests', lat: 'lat', lng: 'lng', auto: true, delay: 1000, showAddressOnMap: true, - mapProxy: Mapeed.Proxy.GoogleMap} + markerDraggable: false, + mapProxy: Mapeed.Proxy.GoogleMap }; // Constructor Mapeed.AddressForm.Widget = function(options) { @@ -42,6 +44,12 @@ Mapeed.AddressForm.Widget = function(options) { this.options = $extend({}, Mapeed.AddressForm.DefaultOptions); $extend(this.options, options); + this.callbacks = { + onSuggestChanged: function(){}, + onInitialized: function(){} + }; + + // Initialize proxy with init callback this.mapProxy = new this.options.mapProxy($element(this.options.map), this.initialize, this); }; @@ -50,9 +58,9 @@ Mapeed.AddressForm.Widget = function(options) { // Instance methods Mapeed.AddressForm.Widget.prototype = (function() { var $element = Mapeed.AddressForm.$element, - addressKeys = ['street', 'city', 'state', 'country'], - locationKeys = ['lat', 'lng']; - allKeys = ['lat', 'lng', 'street', 'city', 'state', 'country'], + addressIDs = ['street', 'city', 'state', 'country'], + locationIDs = ['lat', 'lng']; + allIDs = ['lat', 'lng', 'street', 'city', 'state', 'country', 'suggests']; // Get event to listen for an element. INPUT and SELECT are allowed @@ -66,17 +74,24 @@ Mapeed.AddressForm.Widget.prototype = (function() { return element.value; } else { - return element.options[element.selectedIndex].getAttribute('name'); + return element.options[element.selectedIndex].value; } } + + function createLink(text) { + var a = document.createElement('a'); + a.href = '#'; + a.innerHTML = text; + return a; + } // Initialize Widget function initialize() { var options = this.options; // Get html elements for read/write values - for (var i = allKeys.length-1; i>=0; --i){ - var k = allKeys[i]; + for (var i = allIDs.length-1; i>=0; --i){ + var k = allIDs[i]; this[k] = $element(options[k]); } @@ -88,11 +103,12 @@ Mapeed.AddressForm.Widget.prototype = (function() { // Connect event listener for auto mode if (options.auto) { var callback = function() {this.updateMap(this.options.delay)}; - for (var i = addressKeys.length-1; i>=0; --i) { - var k = addressKeys[i]; + for (var i = addressIDs.length-1; i>=0; --i) { + var k = addressIDs[i]; if (this[k]) this.mapProxy.addEventListener(this[k], eventForElement(this[k]), this, callback); } } + this.callbacks.onInitialized(this); } // Update map with current address @@ -111,8 +127,8 @@ Mapeed.AddressForm.Widget.prototype = (function() { function getAddress() { var address = []; - for (var i = addressKeys.length-1; i>=0; --i) { - var k = addressKeys[i]; + for (var i = addressIDs.length-1; i>=0; --i) { + var k = addressIDs[i]; if (this[k]) { var value = valueForElement(this[k]); // Strip string @@ -127,20 +143,52 @@ Mapeed.AddressForm.Widget.prototype = (function() { return this.mapProxy; } + function getMap() { + return this.mapProxy.getMap(); + } + + function onSuggestChanged(callback) { + this.callbacks.onSuggestChanged = callback; + return this; + } + + function onInitialized(callback) { + this.callbacks.onInitialized = callback; + return this; + } + // Callback when placemarks are found function _placemarksReceived(placemarks) { if (placemarks) { + if (placemarks.length > 1 && this.suggests) { + this.suggests.innerHTML = ''; + for (var i = 0; i < placemarks.length; i++) { + var p = placemarks[i], + link = createLink(this.mapProxy.getAddress(p)); + + link.p = p; + this.suggests.appendChild(link); + this.mapProxy.addEventListener(link, 'click', this, _selectPlacemark); + } + this.callbacks.onSuggestChanged(this, placemarks.length); + } this.mapProxy.showPlacemark(placemarks[0], this.options.showAddressOnMap); - this.lat.value = placemarks[0].lat; - this.lng.value = placemarks[0].lng; + this.lat.value = this.mapProxy.getLat(placemarks[0]); + this.lng.value = this.mapProxy.getLng(placemarks[0]); } } + + function _selectPlacemark(event) { + this.mapProxy.showPlacemark(event.target.p, this.options.showAddressOnMap); + } return { initialize: initialize, updateMap: updateMap, getAddress: getAddress, - getMapProxy: getMapProxy - + getMap: getMap, + getMapProxy: getMapProxy, + onInitialized: onInitialized, + onSuggestChanged: onSuggestChanged } })(); \ No newline at end of file src/address_form.js @@ -1,10 +1,30 @@ +/** + * == proxy == + * The proxy section +**/ + // Namespace if (typeof Mapeed == 'undefined') { Mapeed = {}; } Mapeed.Proxy = {}; -// Proxy object to google map +/** section: proxy + * class Mapeed.Proxy.GoogleMap + * + * Proxy class to handle Google Map API + * + **/ + + + /** + * new Mapeed.Proxy.GoogleMap(element, callback, context) + * - element (Element): element used to create GMap2 object + * - callback (Function): callback called when map is ready + * - context (Object): context for calling callback + * + * Creates a new Mapeed.Proxy.GoogleMap used by Mapeed.Address.Plugin + **/ Mapeed.Proxy.GoogleMap = function(element, callback, context) { var self = this; @@ -47,12 +67,34 @@ Mapeed.Proxy.GoogleMap.prototype = (function() { this.geocoder.getLocations(address.join(', '), function(response){_onGeocodingCompleted(response, callback, context)}); } - + + // Return map (GMap2) object + function getMap() { + return this.map; + } + + // Returns address of a placemark + function getAddress(placemark) { + return placemark.address; + } + + // Returns latitude of a placemark + function getLat(placemark) { + return placemark.Point.coordinates[1]; + } + + // Returns longitude of a placemark + function getLng(placemark) { + return placemark.Point.coordinates[0]; + } + function showPlacemark(placemark, showAddress) { - var latLng = new GLatLng(placemark.lat, placemark.lng) - zoom = 17; - if (placemark.accuracy < 7) zoom = 10; - if (placemark.accuracy < 5) zoom = 5; + var latLng = new GLatLng(placemark.Point.coordinates[1], placemark.Point.coordinates[0]) + accuracy = placemark.AddressDetails.Accuracy, + zoom = 8; + if (accuracy >= 9) zoom = 17; + else if (accuracy >= 6 ) zoom = 14; + else if (accuracy >= 4) zoom = 12; this.map.setCenter(latLng, zoom); if (this.gmarker) { @@ -68,15 +110,9 @@ Mapeed.Proxy.GoogleMap.prototype = (function() { } function _onGeocodingCompleted(response, callback, context) { - // Placemark found + // Placemark(s) found if (response.Status.code == 200) { - var placemarks = []; - for (var i=0; i < response.Placemark.length; i++) { - var p = response.Placemark[i]; - placemarks.push({lat: p.Point.coordinates[1], lng: p.Point.coordinates[0], - address: p.address, accuracy: p.AddressDetails.Accuracy}); - } - callback.call(context, placemarks); + callback.call(context, response.Placemark); } // Placemark not found else { @@ -87,7 +123,12 @@ Mapeed.Proxy.GoogleMap.prototype = (function() { return { addEventListener: addEventListener, removeEventListener: removeEventListener, + getMap: getMap, getPlacemarks: getPlacemarks, - showPlacemark: showPlacemark + showPlacemark: showPlacemark, + + getAddress: getAddress, + getLat: getLat, + getLng: getLng } })(); \ No newline at end of file src/googlemap.js 7c6c17cf3580d5c1f0d0a1c2105c79856052eabb sgruhier sgruhier@mac.com http://github.com/mapeed/addresschooser/commit/5f4047ed45a6024ecfa1193d41db71f30c0c5357 5f4047ed45a6024ecfa1193d41db71f30c0c5357

2008-12-12T00:53:03-08:00

add auto suggests f6fcd69381980057d5b7b69c2bb074176076d8c8 sgruhier sgruhier@mac.com