Download FormMapper Address Autocomplete with Geolocation

An advanced jQuery plugin that utilizes the Google Maps API’s Geocoding and Places Autocomplete services. You simply provide a single input field that lets you search for locations with an autocomplete dropdown. Optionally: you can add a map container that will display an interactive map with drag and drop location finding capabilities and a form that will be populated with the complete address details including the latitude and longitude coordinates

An advanced jQuery plugin that utilizes the Google Maps API’s Geocoding and Places Autocomplete services. You simply provide a single input field that lets you search for locations with an autocomplete dropdown. Optionally: you can add a map container that will display an interactive map with drag and drop location finding capabilities and a form that will be populated with the complete address details including the latitude and longitude coordinates.

Although the demo site is built on the bootstrap framework it is just for demonstrative purposes and is not required for the .formMapper() to work. You could integrate the.formMapper() plugin into practically any theme, template, webpage…etc.

Installation is quick and simple to do and the files include 10 awesome examples of various uses and configuration methods to use the plugin.

Be sure to checkout the various demos to see some of the options and variations of this extremely versatile and useful plugin.

The Basic Use

You can find a demo of the Basic Use here: http://cre84.me/formmapper/index.html

When you begin typing a location a dropdown of matching locations will begin to appear. Just keep typing until you see the desired location and then select it from the list. The remaining details will be completed for you and if you include additional form elements or a map container they will be filled in with the appropriate content.

Auto-Geolocate

You can find a demo of the Auto Geo-locate here: http://cre84.me/formmapper/geolocate.html

Most of the demo pages have a big blue button that says, “Try and find me” on it. If you click that button the site should first ask for your permission to locate you (if you haven’t already approved it) and then the site will automatically attempt to find your location, as close as possible and map it and fill in the form.

You could also choose to request the user’s location as soon as the page loads instead of waiting for a button to be clicked. If the user’s location is found the .formMapper() will run, the form address elements will be filled in, and the map will be shown.

Multiple Results

You can find a demo of the Multiple Results here: http://cre84.me/formmapper/multiple.html

Sometimes a search will return multiple results if a specific location is not given. For instance if the input given was only “Paris” google would return the following locations:

• Paris, France
• Paris, TX, USA
• Paris, TN 38242, USA
• Paris, IL 61944, USA
• Paris, KY 40361, USA

By conguring the form slightly you can handle multiple results.

Draggable

You can find a demo of the Draggable Marker here: http://cre84.me/formmapper/drag.html

This example includes the option for the marker to be draggable and each time the marker is dragged the map zooms in a little more until it reaches the set maximum zoom level.

Points of Interest (POI)

You can find a demo of the POI Search here: http://cre84.me/formmapper/poi.html

In addition to being able to fill in the form by entering an address, you could also search for the location of a Point of Interest (POI). It could be the name of a place like: Graceland, the Highest Mountain, the Nashville Parthenon, the White House … or even the house from A Christmas Story (as seen below). The address will be generated for that POI.

Google will return the results that it finds for any location search. It could be an address, a POI, just a zip code, the name of a business, ...just about anything you could find on Google.

More Details

You can find a demo for More Details here: http://cre84.me/formmapper/details.html

You can include additional Address Component Types. Some searches can return additional information such as the location’s name, phone number, website, etc. Just remeber different searches return different results. A search for the White House returns the below additional results:

Limit Area

You can find a demo for Limit Area here: http://cre84.me/formmapper/bounds.html

In this demo the option was set to limit the map to a certain area and the results will give priority to that region. The option to only locate establishments was also set in this example. So if a user was to search for “Ford” the top result would be The Ford’s Theatre if the area was limited to Washington DC.

If you would search for “Ford” without limiting the area the top result would probably been a Ford Dealership or a street/city named Ford.

Limit Country

You can find a demo for Country Limit here: http://cre84.me/formmapper/country.html

Just like limiting the search to a certain region you can limit a location search to give priority to a country.

The settings in the Limit Country demo enables if you were to search for a location search like “Google” your results would be found in India rather than California like you might expect.

Find

You can find a demo for Find shortcut here: http://cre84.me/formmapper/api_call.html

The find shortcut makes it easy to load a location with a single command.

The location to search for can be just about anything you can search for on google. Address, Zip/Postal Code, Company Name, a POI, ... etc.

Demo Contact Form

The final example can be found at: http://cre84.me/formmapper/demo.html

This page is unique in the fact that it has multiple variations of .formmapper() items.

There is the usual form on the left that searches for a location and fills in the input items and has a smaller map included.

Then there is the demo contact form on the right with a map that displays the location of the restaurant (as shown below.) The map is generated by the .formMapper() plugin but is not attached to any form (since you wouldn’t want to change the display of where you can be found.)

The third .formMapper element on the page is found in the contact form itself. If you would like to gather your visitor’s location you can provide a single field with a simplified autocomplete method of entering an address instead of adding multiple fields for Address, City, State, Zip/Postal Code, Country…etc.

This particular use of the formMapper() plugin does not update a map and does not have a list of form inputs for the various address components. However, if you fill out the form and click submit (it will not send the email in the demo)  it will just display the email content for you to view.

By adding a list of hidden fields that each have address component names the form will have the various address items inserted without being visible to the end user and will be able to be sent along with the other (visible) form elements.

Possible options that can be included in the .formMapper()

• bounds (Whether to snap geocode search to map bounds)
• country (Results will give priority to results found in the selected country)
• map (A selector, a jQuery object or a DOM element that will contain the map)
• details (The container that should be populated with the form data)
• detailsAttribute (The attribute’s name to use as an indicator)
• useViewport (Should map zoom to the google suggested viewport)
• location (Location to initialize the map on. If not set the map will be blank until a location is entered)
• satelliteOnZoom (Switch to satellite view when zoomed in.)
• findme (If set the page will ask the user to access their geolocation and automatically fill in details based on the result)
• mapOptions (Options to pass to the google.maps.Map constructor)
  • You can see the full list of options at http://code.google.com/apis/maps/documentation/javascript/reference.html#MapOptions
    • zoom (initial zoom level)
    • minZoom (the smallest zoom level the user is allowed achieve with the controls)
    • maxZoom (the maximum zoom level the user is allowed achieve with the controls)
    • scrollwheel (allows zooming with mouse scrollwheel or not)
    • panControl (allows dragging the map to a new location or not)
    • mapTypeId (the type of map to display: roadmap, satellite, etc.)
• markerOptions
  • draggable (determines if location should be able to be determined by dragging and dropping the marker at the desired location)
• maxZoom (the maximum zoom level to zoom in to after a geocoding response not by the controls)
• types (an array containing one or more of the supported types for the places request)
  • See the full list of options at http://code.google.com/apis/maps/documentation/javascript/places.html#place_search_requests
• blur (triggers on blur event)
• dragged (default state of marker to determine if map should zoom in steps)

In addition to simplifing your form’s address input for your site’s visitors there are so many uses for this plugin.

• Admin panel that requires input of event locations
• Websites that need to get lat & lng coordinates
• Business search
• Registration website
• the list could go on and on…

Thank you for checking out my item! If you have any questions let me know. Be sure to follow me either here on this site or on facebook to be updated when I post new items!