jquery-placepicker

A simple placepicker component for the google-maps api.

Demo

Usage

Include dependencies. Be sure to add Google Places.

<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?sensor=true&libraries=places"></script>
<script src="js/jquery.placepicker.min.js"></script>

<input class="placepicker" size="40"/>

$(".placepicker").placepicker();

Advanced usage

Integrating a map view

This example shows how to integrate a collapsible map-view using bootstrap.

Include Bootstrap Collapsible and styles.

<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="form-group">
  <input class="placepicker form-control" data-map-container-id="collapseOne"/>
</div>
<div id="collapseOne" class="collapse">
  <div class="placepicker-map thumbnail"></div>
</div>

$(".placepicker").placepicker();

.placepicker-map {
  min-height: 250px;
}

Options

Type	Name	Description
HTML	data-latitude	Preset the map's latitude
HTML	data-longitude	Preset the map's longitude
HTML	data-latitude-input	Set the DOM ID of the input field to populate with the latitude
HTML	data-longitude-input	Set the DOM ID of the input field to populate with the longitude
HTML	data-map-container-id	Set the ID of the element containing the map's destination element. Configuring this will automatically inject an open/close button to show/hide the map. The container must have Bootstrap's "collapse" CSS class.
JavaScript	map	Map selector or map-element
JavaScript	mapOptions	An object with google maps api options
JavaScript	placeChanged	This callback is fired when location changed

Methods

Name	Description	Return
reload	Reloads map	void
resize	Resizes map	void
geoLocation	Set value to html5 geo-location	void
getLocation	Returns an object containing the current location	void
getLatLng	Returns an object of type google.maps.LatLng containing the current location	LatLng