Adding control (button) to the google map searchbox

Question

I am trying to use google map search box sample. my code based on this example. https://developers.google.com/maps/documentation/javascript/examples/places-searchbox

Now i am trying to add button after search box. when i click on search box everthing is working good. I wanted to trigger it on button and also wanted add button after input box.

HTML

<div class="search-box">
  <input id="pac-input" class="controls" type="text" placeholder="Search Box">
  <button>Search</button>
</div> 

Here is my code: https://codepen.io/sifulislam/pen/qxqvZq

Answer 1

UPDATED: You can add any control you want like this:

function initialize() {
if (typeof map == "undefined") { //this line prevents duplicate initializing
    var markers = [];
    map = new google.maps.Map(document.getElementById('map-canvas'), {
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var defaultBounds = new google.maps.LatLngBounds(
        new google.maps.LatLng(-33.8902, 151.1759),
        new google.maps.LatLng(-33.8474, 151.2631));
    map.fitBounds(defaultBounds);

    var input = document.getElementById('pac-input');
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

    var button = document.getElementById('doSearch');
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(button);
}

google.maps.event.addDomListener(window, 'load', initialize);

document.getElementById('pac-input').addEventListener("input", function () {
    $(".pac-container").remove();
    google.maps.event.clearInstanceListeners(document.getElementById('pac-input'));
});

document.getElementById('doSearch').onclick = function () {
    var input = document.getElementById('pac-input');
    var searchBox = new google.maps.places.SearchBox(input);

    google.maps.event.addListener(searchBox, 'places_changed', function () {

    });

    google.maps.event.addListener(map, 'bounds_changed', function () {
        var bounds = map.getBounds();
        searchBox.setBounds(bounds);
    });

    var places = searchBox.getPlaces();

    setTimeout(function () { $("#pac-input").focus() }, 100);

    if (!places || places.length == 0) {
        return;
    }
    for (var i = 0, marker; marker = markers[i]; i++) {
        marker.setMap(null);
    }

    markers = [];
    var bounds = new google.maps.LatLngBounds();
    for (var i = 0, place; place = places[i]; i++) {
        var image = {
            url: place.icon,
            size: new google.maps.Size(71, 71),
            origin: new google.maps.Point(0, 0),
            anchor: new google.maps.Point(17, 34),
            scaledSize: new google.maps.Size(25, 25)
        };

        var marker = new google.maps.Marker({
            map: map,
            icon: image,
            title: place.name,
            position: place.geometry.location
        });

        markers.push(marker);

        bounds.extend(place.geometry.location);
    }
    map.fitBounds(bounds);
}
}

$('#tvl-ways-tab a').on('click', function (e) {
    e.preventDefault();
    $(this).tab('show');
    if (this.text == "tab 1")
        initialize();  //Initialize map function
});

initialize();

#map-canvas {
    height: 500px;
    margin: 0px;
    padding: 0px
}
.pt {
margin-top: 20px;
}
.controls {
    margin-top: 16px;
    border: 1px solid transparent;
    border-radius: 2px 0 0 2px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    height: 32px;
    outline: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

#pac-input {
    background-color: #fff;
    font-family: Roboto;
    font-size: 15px;
    font-weight: 300;
    margin-left: 12px;
    padding: 0 11px 0 13px;
    text-overflow: ellipsis;
    width: 200px;
}

#pac-input:focus {
    border-color: #4d90fe;
}

.pac-container {
    font-family: Roboto;
}

#type-selector {
    color: #fff;
    background-color: #4d90fe;
    padding: 5px 11px 0px 11px;
}

#type-selector label {
    font-family: Roboto;
    font-size: 13px;
    font-weight: 300;
}
  
#doSearch {
    z-index: 0;
    position: absolute;
    left: 330px !important;
    top: 20px !important;
}

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://unpkg.com/popper.js@1.13.0/dist/umd/popper.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places&.js"></script>

<div class="tvl-ways-nav border-bottom">
                <ul class="nav container nav-pills" id="tvl-ways-tab" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" id="tvl-activities-tab" data-toggle="pill" href="#tvl-activities" role="tab" aria-controls="tvl-activities" aria-selected="true">tab 1</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="tvl-tour-tab" data-toggle="pill" href="#tvl-tour" role="tab" aria-controls="tvl-tour" aria-selected="false">tab 2</a>
                    </li>                
                    <li class="nav-item">
                        <a class="nav-link" id="tvl-hotel-tab" data-toggle="pill" href="#tvl-hotel" role="tab" aria-controls="tvl-hotel" aria-selected="false">tab 3</a>
                    </li>
                </ul>
            </div>
            <div class="tab-content tvl-tab-content mt-3" id="pills-tabContent">
                <div class="tab-pane fade show active" id="tvl-activities" role="tabpanel" aria-labelledby="tvl-activities-tab">
                    <section class="tvl-home-activity-search">
                        <div class="container pl-0 pr-0">
                            <div class="tvl-home-title section-title-small map-search">
                                <div class="tvl-home-search-inner border border-success">
                                    <div class="map-section">
                                        <div class="searchbox">
                                          <input id="pac-input" class="controls" type="text" placeholder="Country, Segment, Activity">  
                                        </div>
                                        <div  id="map-canvas"></div>
                                        <button id="doSearch" class="btn btn-fill map-btn">Search</button>
                                    </div>
                                </div>
                            </div>    
                        </div>
                    </section>
                </div>
                <div class="tab-pane fade" id="tvl-tour" role="tabpanel" aria-labelledby="tvl-tour-tab">
                    <div class="container">
                        <p>Tour Content Here</p>
                    </div>
                </div>
                <div class="tab-pane fade" id="tvl-hotel" role="tabpanel" aria-labelledby="tvl-hotel-tab">
                    <div class="container">
                        <p>Hotel Content Here</p>
                    </div>
                </div>
            </div>

HTML

<button id="doSearch">Search</button>

Javascript

var button = document.getElementById('doSearch');
map.controls[google.maps.ControlPosition.TOP_LEFT].push(button);

And after that you can bind an event to the button's onclick :

document.getElementById('doSearch').onclick = function () {
    var input = document.getElementById('doSearch');

    google.maps.event.trigger(input, 'focus')
    google.maps.event.trigger(input, 'keydown', { keyCode: 13 });
}

Edited code in codepen.io

Answer 2

Note, recent changes to the API require you to pass the final event.trigger argument as well. So update grey.dim's answer to include that parameter while triggering the focus event, like this:

document.getElementById('custom-button').onclick = function () {
   google.maps.event.trigger(input, 'focus', {});
   google.maps.event.trigger(input, 'keydown', { keyCode: 13 });
};

Answer 3

For the layout, Add an id to your Button and a controls class.

 <div class="container pt">
    <div class="search-box">
      <input id="pac-input" class="controls" type="text" placeholder="Search Box">
      <button class="controls" id="custom-button">Search</button>
    </div>
    <div  id="map-canvas"></div>
 </div>

Add the following Styles

.search-box {
  z-index: 1;
  position: relative;
  left: 540px;
  top: 48px;
  height: 32px;
  width: 70px;
  margin: 0;
  display: inline-block;
}

.search-box button {
  margin: 0;
}

For the search function of the button. Bind the button to the triggering events of the input#pac-input using the google maps api.

document.getElementById('custom-button').onclick = function () { google.maps.event.trigger(input, 'focus') google.maps.event.trigger(input, 'keydown', { keyCode: 13 }); };

Useful links: Google Maps - Trigger Search Box on button click