diff --git a/examples/country_limit.html b/examples/country_limit.html new file mode 100644 index 0000000..1ced31a --- /dev/null +++ b/examples/country_limit.html @@ -0,0 +1,46 @@ + + + + $.geocomplete() + + + + + +
+ + +
+ +
+ +

Try searching for somewhere. All results should be within Germany.
+ For further details on result limiting via country: http://code.google.com/apis/maps/documentation/javascript/places.html#adding_autocomplete and read about 'componentRestrictions'.
+ The Geocoder can also be limited by region: https://developers.google.com/maps/documentation/javascript/reference#GeocoderRequest +

+ + + + + + + + + + + \ No newline at end of file diff --git a/jquery.geocomplete.js b/jquery.geocomplete.js index 06fb697..c30189d 100644 --- a/jquery.geocomplete.js +++ b/jquery.geocomplete.js @@ -33,25 +33,26 @@ var defaults = { bounds: true, + country: null, map: false, details: false, detailsAttribute: "name", location: false, - + mapOptions: { zoom: 14, scrollwheel: false, - mapTypeId: "roadmap" + mapTypeId: "roadmap" }, - + markerOptions: { draggable: false }, - + maxZoom: 16, types: ['geocode'] }; - + // See: [Geocoding Types](https://developers.google.com/maps/documentation/geocoding/#Types) // on Google Developers. var componentTypes = ("street_address route intersection political " + @@ -67,20 +68,20 @@ var placesDetails = ("id url website vicinity reference rating " + "international_phone_number icon formatted_phone_number").split(" "); - // The actual plugin constructor. + // The actual plugin constructor. function GeoComplete(input, options) { this.options = $.extend(true, {}, defaults, options); this.input = input; this.$input = $(input); - + this._defaults = defaults; this._name = 'geocomplete'; this.init(); } - + // Initialize all parts of the plugin. $.extend(GeoComplete.prototype, { init: function(){ @@ -90,10 +91,10 @@ this.initDetails(); this.initLocation(); }, - + // Initialize the map but only if the option `map` was set. - // This will create a `map` within the given container - // using the provided `mapOptions` or link to the existing map instance. + // This will create a `map` within the given container + // using the provided `mapOptions` or link to the existing map instance. initMap: function(){ if (!this.options.map){ return; } @@ -103,27 +104,27 @@ } this.map = new google.maps.Map( - $(this.options.map)[0], + $(this.options.map)[0], this.options.mapOptions ); }, - - // Add a marker with the provided `markerOptions` but only - // if the option was set. Additionally it listens for the `dragend` event + + // Add a marker with the provided `markerOptions` but only + // if the option was set. Additionally it listens for the `dragend` event // to notify the plugin about changes. initMarker: function(){ if (!this.map){ return; } var options = $.extend(this.options.markerOptions, { map: this.map }); this.marker = new google.maps.Marker(options); - + google.maps.event.addListener( - this.marker, - 'dragend', + this.marker, + 'dragend', $.proxy(this.markerDragged, this) ); }, - - // Associate the input with the autocompleter and create a geocoder + + // Associate the input with the autocompleter and create a geocoder // to fall back when the autocompleter does not return a value. initGeocoder: function(){ @@ -132,65 +133,69 @@ bounds: this.options.bounds === true ? null : this.options.bounds }; + if (this.options.country){ + options.componentRestrictions = {country: this.options.country} + } + this.autocomplete = new google.maps.places.Autocomplete( this.input, options ); this.geocoder = new google.maps.Geocoder(); - + // Bind autocomplete to map bounds but only if there is a map // and `options.bindToMap` is set to true. if (this.map && this.options.bounds === true){ this.autocomplete.bindTo('bounds', this.map); } - + // Watch `place_changed` events on the autocomplete input field. google.maps.event.addListener( - this.autocomplete, - 'place_changed', + this.autocomplete, + 'place_changed', $.proxy(this.placeChanged, this) ); - + // Prevent parent form from being submitted if user hit enter. this.$input.keypress(function(event){ if (event.keyCode === 13){ return false; } }); - + // Listen for "geocode" events and trigger find action. this.$input.bind("geocode", $.proxy(function(){ this.find(); }, this)); }, - + // Prepare a given DOM structure to be populated when we got some data. // This will cycle through the list of component types and map the // corresponding elements. initDetails: function(){ if (!this.options.details){ return; } - + var $details = $(this.options.details), attribute = this.options.detailsAttribute, details = {}; - + function setDetail(value){ details[value] = $details.find("[" + attribute + "=" + value + "]"); } - + $.each(componentTypes, function(index, key){ setDetail(key); setDetail(key + "_short"); }); - + $.each(placesDetails, function(index, key){ setDetail(key); }); - + this.$details = $details; this.details = details; }, // Set the initial location of the plugin if the `location` options was set. - // This method will care about converting the value into the right format. + // This method will care about converting the value into the right format. initLocation: function() { var location = this.options.location, latLng; @@ -200,30 +205,30 @@ if (typeof location == 'string') { this.find(location); return; - } + } if (location instanceof Array) { latLng = new google.maps.LatLng(location[0], location[1]); - } + } if (location instanceof google.maps.LatLng){ latLng = location; } - if (latLng){ + if (latLng){ this.geoocode({ latLng: latLng }); } }, - + // Look up a given address. If no `address` was specified it uses // the current value of the input. find: function(address){ - this.geocode({ + this.geocode({ address: address || this.$input.val() }); }, - // Requests details about a given location. + // Requests details about a given location. // Additionally it will bias the requests to the provided bounds. geocode: function(request){ if (this.options.bounds && !request.bounds){ @@ -233,9 +238,14 @@ request.bounds = this.options.bounds; } } + + if (this.options.country){ + request.region = this.options.country; + } + this.geocoder.geocode(request, $.proxy(this.handleGeocode, this)); }, - + // Handles the geocode response. If more than one results was found // it triggers the "geocode:multiple" events. If there was an error // the "geocode:error" event is fired. @@ -244,26 +254,26 @@ var result = results[0]; this.$input.val(result.formatted_address); this.update(result); - + if (results.length > 1){ this.trigger("geocode:multiple", results); } - + } else { this.trigger("geocode:error", status); } }, - + // Triggers a given `event` with optional `arguments` on the input. trigger: function(event, argument){ this.$input.trigger(event, [argument]); }, - + // Set the map to a new center by passing a `geometry`. // If the geometry has a viewport, the map zooms out to fit the bounds. // Additionally it updates the marker position. center: function(geometry){ - + if (geometry.viewport){ this.map.fitBounds(geometry.viewport); if (this.map.getZoom() > this.options.maxZoom){ @@ -273,50 +283,50 @@ this.map.setZoom(this.options.maxZoom); this.map.setCenter(geometry.location); } - + if (this.marker){ this.marker.setPosition(geometry.location); this.marker.setAnimation(this.options.markerOptions.animation); } }, - - // Update the elements based on a single places or geoocoding response + + // Update the elements based on a single places or geoocoding response // and trigger the "geocode:result" event on the input. update: function(result){ if (this.map){ this.center(result.geometry); } - + if (this.$details){ this.fillDetails(result); } - + this.trigger("geocode:result", result); }, - + // Populate the provided elements with new `result` data. // This will lookup all elements that has an attribute with the given // component type. fillDetails: function(result){ - + var data = {}, geometry = result.geometry, viewport = geometry.viewport, bounds = geometry.bounds; - + // Create a simplified version of the address components. $.each(result.address_components, function(index, object){ var name = object.types[0]; data[name] = object.long_name; data[name + "_short"] = object.short_name; }); - - // Add properties of the places details. + + // Add properties of the places details. $.each(placesDetails, function(index, key){ data[key] = result[key]; }); - + // Add infos about the address and geometry. $.extend(data, { formatted_address: result.formatted_address, @@ -333,45 +343,45 @@ var value = data[key]; this.setDetail($detail, value); }, this)); - + this.data = data; }, - + // Assign a given `value` to a single `$element`. - // If the element is an input, the value is set, otherwise it updates + // If the element is an input, the value is set, otherwise it updates // the text content. setDetail: function($element, value){ - + if (value === undefined){ value = ""; } else if (typeof value.toUrlValue == "function"){ value = value.toUrlValue(); } - + if ($element.is(":input")){ $element.val(value); } else { $element.text(value); } }, - + // Fire the "geocode:dragged" event and pass the new position. markerDragged: function(event){ this.trigger("geocode:dragged", event.latLng); }, - + // Restore the old position of the marker to the last now location. resetMarker: function(){ this.marker.setPosition(this.data.location); this.setDetail(this.details.lat, this.data.location.lat()); this.setDetail(this.details.lng, this.data.location.lng()); }, - + // Update the plugin after the user has selected an autocomplete entry. // If the place has no geometry it passes it to the geocoder. placeChanged: function(){ var place = this.autocomplete.getPlace(); - + if (!place.geometry){ this.find(place.name); } else { @@ -380,21 +390,21 @@ } }); - // A plugin wrapper around the constructor. + // A plugin wrapper around the constructor. // Pass `options` with all settings that are different from the default. // The attribute is used to prevent multiple instantiations of the plugin. $.fn.geocomplete = function(options) { - + var attribute = 'plugin_geocomplete'; - + // If you call `.geocomplete()` with a string as the first paramenter // it returns the corresponding property or calls the method with the // following arguments. if (typeof options == "string"){ - + var instance = $(this).data(attribute), prop = instance[options]; - + if (typeof prop == "function"){ return prop.apply(instance, Array.prototype.slice.call(arguments, 1)); } else {