jQuery Plugin For Google Maps Geocoding & Place Autocomplete - Geocomplete

Geocomplete is a simple yet customizable jQuery Geocoding & Place Autocomplete plugin for easily find and select a location on the Google map. Based on Google Maps' Geocoding and Places API.

Basic Usage:

1. Load the necessary jQuery library and Google Maps API in your web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=places&sensor=false"></script>

2. Load the jQuery Geocomplete plugin after jQuery library.

<script src="jquery.geocomplete.js"></script>

3. Create a text input for Geocoding & Place Autocomplete.

<input type="text">

4. Create a DIV element to place the Google Map.

<div id="google-map">
</div>

5. Call the function on the text field to enable the Geocoding & Place Autocomplete.

$('input').geocomplete({
  map: '#google-map'
});

6. Default plugin options.

$('input').geocomplete({

  // Whether to snap geocode search to map bounds.
  bounds: true,
  country: null,

  // Might be a selector, an jQuery object or a DOM element
  map: false,

  // The container that should be populated with data.
  details: false,

  // The attribute's name to use as an indicator.
  detailsAttribute: "name",

  // Automatically selects the highlighted item or the first item from the suggestions list on Enter.
  autoselect: true,

  // Location to initialize the map on.
  location: false,

  // Options to pass to the 'google.maps.Map' constructor. 
  mapOptions: {

    // The inital zoom level. 
    zoom: 14,

    // Whether to enable the scrollwheel to zoom the map.
    scrollwheel: false,

    // The map type.
    mapTypeId: "roadmap"
  },

  // The options to pass to the `google.maps.Marker` constructor.
  markerOptions: {

    // If the marker is draggable.
    draggable: false
  },

  // The maximum zoom level too zoom in after a geocoding response.
  maxZoom: 16,

  // An array containing one or more of the supported types for the places request.
  types: ['geocode'],

  // Trigger geocode when input loses focus.
  blur: false,

  // If blur is set to true, choose whether to geocode if user has explicitly selected a result before blur.
  geocodeAfterResult: false

});

---

This awesome jQuery plugin is developed by wehelie. For more Advanced Usages, please check the demo page or visit the official website.