JSFiddle - React, Tailwind, and code Playground

by Alfred Mey

HTML

<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
<input id="search_dest_location" name="search[dest_location]" type="text" size="50"/>

JavaScript

/**
 * jQuery Geocoding and Places Autocomplete Plugin - V 1.6.1
 *
 * @author Martin Kleppe <[email protected]>, 2014
 * @author Ubilabs http://ubilabs.net, 2014
 * @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 <[email protected]>
$(function() {
    $("#search_origin_location").geocomplete();
    $("#search_dest_location").geocomplete();
});


(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.
    // * `location` - Location to initialize the map on. Might be an address `string` or an `array` with [latitude, longitude] or a `google.maps.LatLng`object. 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](http://code.google.com/apis/maps/documentation/javascript/reference.html#MapOptions).
    // * `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...