jquery.geocomplete.js

jquery.geocomplete.js

/**
 * jQuery Geocoding and Places Autocomplete Plugin - V 1.7.0
 *
 * @author Martin Kleppe <kleppe@ubilabs.net>, 2016
 * @author Ubilabs http://ubilabs.net, 2016
 * @license MIT License <http://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.LatLngobject. 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.
- 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.
- 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.
- 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,
    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 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 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
      };

      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 );

jquery.geocomplete.js

$.geocomplete()

jQuery Geocoding and Places Autocomplete Plugin

Options