I am trying to use google map search box sample. my code based on this example.

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:

I am trying to use google map search box sample. my code based on this example. https://developers.google./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

• javascript
• jquery
• html
• css
• google-maps

• 1 Unfortunately I don't understand what exactly you want. you want a button after the textbox that do something for you, anything more?? – Pedram Commented Feb 8, 2018 at 7:33
• I wanted to add button with text box. thats all – Siful Islam Commented Feb 8, 2018 at 9:21
• So, have you tried my answer? – Pedram Commented Feb 8, 2018 at 9:32
• I try to add on bootstrp tab. but its not working. here is the live link : codepen.io/sifulislam/pen/mXqLOe – Siful Islam Commented Feb 16, 2018 at 9:46
• but this is working for me!! what is the problem exactly? – Pedram Commented Feb 16, 2018 at 9:52

3 Answers 3

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./ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css">
<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://unpkg./[email protected]/dist/umd/popper.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<script src="https://maps.googleapis./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

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 });
};

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