JSFiddle - React, Tailwind, and code Playground

by ghayes

HTML

<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
<form id="bbForm" action="https://boatbound.co/boat-rentals" target="_blank">
    <input id="bbForm-near" name="near" text="text">
    <input type="submit" value="Find boats in my area">
    <div>
        <a href="https://boatbound.co">
            <strong>Powered by Boatbound</strong>
            <img src="https://boatbound.co/touch-icon-ipad.png" alt="Boatbound.  Boat Rentals, Charter Boat Rentals, House Boat Rentals on Boatbound">
        </a>
    </div>
</form>

JavaScript

var form = document.getElementById('bbForm');
var near = document.getElementById('bbForm-near');

autocomplete = new google.maps.places.Autocomplete(near, {
    types: ['(cities)'],
    componentRestrictions: {country: 'us'}
});

google.maps.event.addListener(autocomplete, 'place_changed', function() {
    var place = autocomplete.getPlace();
    if (place.geometry) {
        coords = place.geometry.location
        window.location.href = "https://boatbound.co/boat-rentals?lat="+coords.lat()+"&lng="+coords.lng()+"&near="+encodeURIComponent(near.value);
    }
});