616 lines
23 KiB
JavaScript
616 lines
23 KiB
JavaScript
/**
|
|
* jQuery Geocoding and Places Autocomplete Plugin - V 1.7.0
|
|
*
|
|
* @author Martin Kleppe <kleppe@ubilabs.net>, 2016
|
|
* @author Ubilabs https://ubilabs.net, 2016
|
|
* @license MIT License <https://www.opensource.org/licenses/mit-license.php>
|
|
*/
|
|
|
|
// # $.geocomplete()
|
|
// ## jQuery Geocoding and Places Autocomplete Plugin
|
|
//
|
|
// * https://github.com/ubilabs/geocomplete/
|
|
// * by Martin Kleppe <kleppe@ubilabs.net>
|
|
|
|
(function ($, window, document, undefined) {
|
|
|
|
// ## Options
|
|
// The default options for this plugin.
|
|
//
|
|
// * `map` - Might be a selector, an jQuery object or a DOM element. Default is `false` which shows no map.
|
|
// * `details` - The container that should be populated with data. Defaults to `false` which ignores the setting.
|
|
// * 'detailsScope' - Allows you to scope the 'details' container and have multiple geocomplete fields on one page. Must be a parent of the input. Default is 'null'
|
|
// * `location` - Location to initialize the map on. Might be an address `string` or an `array` with [latitude, longitude] or a `google.maps.LatLng`object. Default is `false` which shows a blank map.
|
|
// * `bounds` - Whether to snap geocode search to map bounds. Default: `true` if false search globally. Alternatively pass a custom `LatLngBounds object.
|
|
// * `autoselect` - Automatically selects the highlighted item or the first item from the suggestions list on Enter.
|
|
// * `detailsAttribute` - The attribute's name to use as an indicator. Default: `"name"`
|
|
// * `mapOptions` - Options to pass to the `google.maps.Map` constructor. See the full list [here](https://code.google.com/apis/maps/documentation/javascript/reference.html#MapOptions).
|
|
// * `mapOptions.zoom` - The inital zoom level. Default: `14`
|
|
// * `mapOptions.scrollwheel` - Whether to enable the scrollwheel to zoom the map. Default: `false`
|
|
// * `mapOptions.mapTypeId` - The map type. Default: `"roadmap"`
|
|
// * `markerOptions` - The options to pass to the `google.maps.Marker` constructor. See the full list [here](https://code.google.com/apis/maps/documentation/javascript/reference.html#MarkerOptions).
|
|
// * `markerOptions.draggable` - If the marker is draggable. Default: `false`. Set to true to enable dragging.
|
|
// * `markerOptions.disabled` - Do not show marker. Default: `false`. Set to true to disable marker.
|
|
// * `maxZoom` - The maximum zoom level too zoom in after a geocoding response. Default: `16`
|
|
// * `types` - An array containing one or more of the supported types for the places request. Default: `['geocode']` See the full list [here](https://code.google.com/apis/maps/documentation/javascript/places.html#place_search_requests).
|
|
// * `blur` - Trigger geocode when input loses focus.
|
|
// * `geocodeAfterResult` - If blur is set to true, choose whether to geocode if user has explicitly selected a result before blur.
|
|
// * `restoreValueAfterBlur` - Restores the input's value upon blurring. Default is `false` which ignores the setting.
|
|
|
|
var defaults = {
|
|
bounds: true,
|
|
strictBounds: false,
|
|
country: null,
|
|
map: false,
|
|
details: false,
|
|
detailsAttribute: "name",
|
|
detailsScope: null,
|
|
autoselect: true,
|
|
location: false,
|
|
|
|
mapOptions: {
|
|
zoom: 14,
|
|
scrollwheel: false,
|
|
mapTypeId: "roadmap"
|
|
},
|
|
|
|
markerOptions: {
|
|
draggable: false
|
|
},
|
|
|
|
maxZoom: 16,
|
|
types: ['geocode'],
|
|
blur: false,
|
|
geocodeAfterResult: false,
|
|
restoreValueAfterBlur: false
|
|
};
|
|
|
|
// See: [Geocoding Types](https://developers.google.com/maps/documentation/geocoding/#Types)
|
|
// on Google Developers.
|
|
var componentTypes = ("street_address route intersection political " +
|
|
"country administrative_area_level_1 administrative_area_level_2 " +
|
|
"administrative_area_level_3 colloquial_area locality sublocality " +
|
|
"neighborhood premise subpremise postal_code natural_feature airport " +
|
|
"park point_of_interest post_box street_number floor room " +
|
|
"lat lng viewport location " +
|
|
"formatted_address location_type bounds").split(" ");
|
|
|
|
// See: [Places Details Responses](https://developers.google.com/maps/documentation/javascript/places#place_details_responses)
|
|
// on Google Developers.
|
|
var placesDetails = ("id place_id url website vicinity reference name rating " +
|
|
"international_phone_number icon formatted_phone_number").split(" ");
|
|
|
|
// The actual plugin constructor.
|
|
function GeoComplete(input, options) {
|
|
|
|
this.options = $.extend(true, {}, defaults, options);
|
|
|
|
// This is a fix to allow types:[] not to be overridden by defaults
|
|
// so search results includes everything
|
|
if (options && options.types) {
|
|
this.options.types = options.types;
|
|
}
|
|
|
|
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 () {
|
|
this.initMap();
|
|
this.initMarker();
|
|
this.initGeocoder();
|
|
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.
|
|
initMap: function () {
|
|
if (!this.options.map) {
|
|
return;
|
|
}
|
|
|
|
if (typeof this.options.map.setCenter == "function") {
|
|
this.map = this.options.map;
|
|
return;
|
|
}
|
|
|
|
this.map = new google.maps.Map(
|
|
$(this.options.map)[0],
|
|
this.options.mapOptions
|
|
);
|
|
|
|
// add click event listener on the map
|
|
google.maps.event.addListener(
|
|
this.map,
|
|
'click',
|
|
$.proxy(this.mapClicked, this)
|
|
);
|
|
|
|
// add dragend even listener on the map
|
|
google.maps.event.addListener(
|
|
this.map,
|
|
'dragend',
|
|
$.proxy(this.mapDragged, this)
|
|
);
|
|
|
|
// add idle even listener on the map
|
|
google.maps.event.addListener(
|
|
this.map,
|
|
'idle',
|
|
$.proxy(this.mapIdle, this)
|
|
);
|
|
|
|
google.maps.event.addListener(
|
|
this.map,
|
|
'zoom_changed',
|
|
$.proxy(this.mapZoomed, this)
|
|
);
|
|
},
|
|
|
|
// 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});
|
|
|
|
if (options.disabled) {
|
|
return;
|
|
}
|
|
|
|
this.marker = new google.maps.Marker(options);
|
|
|
|
google.maps.event.addListener(
|
|
this.marker,
|
|
'dragend',
|
|
$.proxy(this.markerDragged, this)
|
|
);
|
|
},
|
|
|
|
// Associate the input with the autocompleter and create a geocoder
|
|
// to fall back when the autocompleter does not return a value.
|
|
initGeocoder: function () {
|
|
|
|
// Indicates is user did select a result from the dropdown.
|
|
var selected = false;
|
|
|
|
var options = {
|
|
types: this.options.types,
|
|
bounds: this.options.bounds === true ? null : this.options.bounds,
|
|
componentRestrictions: this.options.componentRestrictions,
|
|
strictBounds: this.options.strictBounds
|
|
};
|
|
|
|
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',
|
|
$.proxy(this.placeChanged, this)
|
|
);
|
|
|
|
// Prevent parent form from being submitted if user hit enter.
|
|
this.$input.on('keypress.' + this._name, function (event) {
|
|
if (event.keyCode === 13) {
|
|
return false;
|
|
}
|
|
});
|
|
|
|
// Assume that if user types anything after having selected a result,
|
|
// the selected location is not valid any more.
|
|
if (this.options.geocodeAfterResult === true) {
|
|
this.$input.bind('keypress.' + this._name, $.proxy(function () {
|
|
if (event.keyCode != 9 && this.selected === true) {
|
|
this.selected = false;
|
|
}
|
|
}, this));
|
|
}
|
|
|
|
// Listen for "geocode" events and trigger find action.
|
|
this.$input.bind('geocode.' + this._name, $.proxy(function () {
|
|
this.find();
|
|
}, this));
|
|
|
|
// Saves the previous input value
|
|
this.$input.bind('geocode:result.' + this._name, $.proxy(function () {
|
|
this.lastInputVal = this.$input.val();
|
|
}, this));
|
|
|
|
// Trigger find action when input element is blurred out and user has
|
|
// not explicitly selected a result.
|
|
// (Useful for typing partial location and tabbing to the next field
|
|
// or clicking somewhere else.)
|
|
if (this.options.blur === true) {
|
|
this.$input.on('blur.' + this._name, $.proxy(function () {
|
|
if (this.options.geocodeAfterResult === true && this.selected === true) {
|
|
return;
|
|
}
|
|
|
|
if (this.options.restoreValueAfterBlur === true && this.selected === true) {
|
|
setTimeout($.proxy(this.restoreLastValue, this), 0);
|
|
} else {
|
|
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;
|
|
}
|
|
|
|
if (this.options.detailsScope) {
|
|
var $details = $(this.input).parents(this.options.detailsScope).find(this.options.details);
|
|
} else {
|
|
var $details = $(this.options.details);
|
|
}
|
|
|
|
var 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.
|
|
initLocation: function () {
|
|
|
|
var location = this.options.location, latLng;
|
|
|
|
if (!location) {
|
|
return;
|
|
}
|
|
|
|
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 (this.map) {
|
|
this.map.setCenter(latLng);
|
|
}
|
|
if (this.marker) {
|
|
this.marker.setPosition(latLng);
|
|
}
|
|
}
|
|
},
|
|
|
|
destroy: function () {
|
|
if (this.map) {
|
|
google.maps.event.clearInstanceListeners(this.map);
|
|
google.maps.event.clearInstanceListeners(this.marker);
|
|
}
|
|
|
|
this.autocomplete.unbindAll();
|
|
google.maps.event.clearInstanceListeners(this.autocomplete);
|
|
google.maps.event.clearInstanceListeners(this.input);
|
|
this.$input.removeData();
|
|
this.$input.off(this._name);
|
|
this.$input.unbind('.' + this._name);
|
|
},
|
|
|
|
// Look up a given address. If no `address` was specified it uses
|
|
// the current value of the input.
|
|
find: function (address) {
|
|
this.geocode({
|
|
address: address || this.$input.val()
|
|
});
|
|
},
|
|
|
|
// Requests details about a given location.
|
|
// Additionally it will bias the requests to the provided bounds.
|
|
geocode: function (request) {
|
|
// Don't geocode if the requested address is empty
|
|
if (!request.address) {
|
|
return;
|
|
}
|
|
if (this.options.bounds && !request.bounds) {
|
|
if (this.options.bounds === true) {
|
|
request.bounds = this.map && this.map.getBounds();
|
|
} else {
|
|
request.bounds = this.options.bounds;
|
|
}
|
|
}
|
|
|
|
if (this.options.country) {
|
|
request.region = this.options.country;
|
|
}
|
|
|
|
this.geocoder.geocode(request, $.proxy(this.handleGeocode, this));
|
|
},
|
|
|
|
// Get the selected result. If no result is selected on the list, then get
|
|
// the first result from the list.
|
|
selectFirstResult: function () {
|
|
//$(".pac-container").hide();
|
|
|
|
var selected = '';
|
|
// Check if any result is selected.
|
|
if ($(".pac-item-selected")[0]) {
|
|
selected = '-selected';
|
|
}
|
|
|
|
// Get the first suggestion's text.
|
|
var $span1 = $(".pac-container:visible .pac-item" + selected + ":first span:nth-child(2)").text();
|
|
var $span2 = $(".pac-container:visible .pac-item" + selected + ":first span:nth-child(3)").text();
|
|
|
|
// Adds the additional information, if available.
|
|
var firstResult = $span1;
|
|
if ($span2) {
|
|
firstResult += " - " + $span2;
|
|
}
|
|
|
|
this.$input.val(firstResult);
|
|
|
|
return firstResult;
|
|
},
|
|
|
|
// Restores the input value using the previous value if it exists
|
|
restoreLastValue: function () {
|
|
if (this.lastInputVal) {
|
|
this.$input.val(this.lastInputVal);
|
|
}
|
|
},
|
|
|
|
// 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.
|
|
handleGeocode: function (results, status) {
|
|
if (status === google.maps.GeocoderStatus.OK) {
|
|
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) {
|
|
this.map.setZoom(this.options.maxZoom);
|
|
}
|
|
} else {
|
|
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 geocoding 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];
|
|
|
|
$.each(object.types, function (index, name) {
|
|
data[name] = object.long_name;
|
|
data[name + "_short"] = object.short_name;
|
|
});
|
|
});
|
|
|
|
// 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,
|
|
location_type: geometry.location_type || "PLACES",
|
|
viewport: viewport,
|
|
bounds: bounds,
|
|
location: geometry.location,
|
|
lat: geometry.location.lat(),
|
|
lng: geometry.location.lng()
|
|
});
|
|
|
|
// Set the values for all details.
|
|
$.each(this.details, $.proxy(function (key, $detail) {
|
|
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
|
|
// 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);
|
|
},
|
|
|
|
mapClicked: function (event) {
|
|
this.trigger("geocode:click", event.latLng);
|
|
},
|
|
|
|
// Fire the "geocode:mapdragged" event and pass the current position of the map center.
|
|
mapDragged: function (event) {
|
|
this.trigger("geocode:mapdragged", this.map.getCenter());
|
|
},
|
|
|
|
// Fire the "geocode:idle" event and pass the current position of the map center.
|
|
mapIdle: function (event) {
|
|
this.trigger("geocode:idle", this.map.getCenter());
|
|
},
|
|
|
|
mapZoomed: function (event) {
|
|
this.trigger("geocode:zoom", this.map.getZoom());
|
|
},
|
|
|
|
// Restore the old position of the marker to the last knwon 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();
|
|
this.selected = true;
|
|
|
|
if (!place.geometry) {
|
|
if (this.options.autoselect) {
|
|
// Automatically selects the highlighted item or the first item from the
|
|
// suggestions list.
|
|
var autoSelection = this.selectFirstResult();
|
|
this.find(autoSelection);
|
|
}
|
|
} else {
|
|
// Use the input text if it already gives geometry.
|
|
this.update(place);
|
|
}
|
|
}
|
|
});
|
|
|
|
// 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 parameter
|
|
// it returns the corresponding property or calls the method with the
|
|
// following arguments.
|
|
if (typeof options == "string") {
|
|
|
|
var instance = $(this).data(attribute) || $(this).geocomplete().data(attribute),
|
|
prop = instance[options];
|
|
|
|
if (typeof prop == "function") {
|
|
prop.apply(instance, Array.prototype.slice.call(arguments, 1));
|
|
return $(this);
|
|
} else {
|
|
if (arguments.length == 2) {
|
|
prop = arguments[1];
|
|
}
|
|
return prop;
|
|
}
|
|
} else {
|
|
return this.each(function () {
|
|
// Prevent against multiple instantiations.
|
|
var instance = $.data(this, attribute);
|
|
if (!instance) {
|
|
instance = new GeoComplete(this, options);
|
|
$.data(this, attribute, instance);
|
|
}
|
|
});
|
|
}
|
|
};
|
|
|
|
})(jQuery, window, document);
|