Google Place Picker For Bootstrap - PlacePicker.js

A responsive, mobile-friendly Google Place Picker plugin (less than 5kb minified) built with jQuery, Font Awesome, Bootstrap modal component and Google Places API.

How it works:

1. Click the Map Icon inside the input field.
2. Type an address in the Place Picker Popup.
3. Click the Select button to insert the Place into the input field.

How to use it:

1. Include the needed jQuery, Bootstrap and Font Awesome on the page.

<link rel="stylesheet" href="/path/to/bootstrap.min.css">
<link rel="stylesheet" href="/path/to/font-awesome.min.css">
<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/bootstrap.min.js"></script>

2. Download and include the PlacePicker.js script after jQuery.

<script src="PlacePicker.js"></script>

3. Create an input field for the Place Picker.

<input type="email" id="pickup_country" class="form-control" placeholder="Address"  autofocus>

4. Call the function on the input field and insert your own Google Maps API.

$("#pickup_country").PlacePicker({
  key:"YOUR API KEY"
});

5. Customize the popup title. Default: Place Picker.

$("#pickup_country").PlacePicker({
  title: "Popup Title Here"
});

6. Customize the button styles.

$("#pickup_country").PlacePicker({
  btnClass: "btn btn-secondary btn-sm"
});

7. Set the position displayed at the center of the map.

$("#pickup_country").PlacePicker({
   center: {lat: -34.397, lng: 150.644}
});

8. Set zoom level. Default: 18.

$("#pickup_country").PlacePicker({
   zoom: 10
});

9. Executa a function when a place is picked.

$("#pickup_country").PlacePicker({
  success:function(data,address){
    //data contains address elements and
    //address conatins you searched text
    //Your logic here
    $("#pickup_country").val(data.formatted_address);
  }
});

---

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