gstackoverflow gstackoverflow - 1 year ago 142
Javascript Question

How to invoke event of enter pressed programatically for google.maps.places.SearchBox?

Research following example:

google map with search box

html + javascipt:

<!DOCTYPE html>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
.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;
padding: 0 11px 0 13px;
width: 400px;
font-family: Roboto;
font-size: 15px;
font-weight: 300;
text-overflow: ellipsis;

#pac-input:focus {
border-color: #4d90fe;
margin-left: -1px;
padding-left: 14px; /* Regular padding-left + 1. */
width: 401px;

.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;

<title>Places search box</title>
<script src=""></script>
// This example adds a search box to a map, using the Google Place Autocomplete
// feature. People can enter geographical searches. The search box will return a
// pick list containing a mix of places and predicted search terms.

function initialize() {

var markers = [];
var 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));

// Create the search box and link it to the UI element.
var input = /** @type {HTMLInputElement} */(

var searchBox = new google.maps.places.SearchBox(
/** @type {HTMLInputElement} */(input));

// [START region_getplaces]
// Listen for the event fired when the user selects an item from the
// pick list. Retrieve the matching places for that item.
google.maps.event.addListener(searchBox, 'places_changed', function() {
var places = searchBox.getPlaces();

if (places.length == 0) {
for (var i = 0, marker; marker = markers[i]; i++) {

// For each place, get the icon, place name, and location.
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)

// Create a marker for each place.
var marker = new google.maps.Marker({
map: map,
icon: image,
position: place.geometry.location



// [END region_getplaces]

// Bias the SearchBox results towards places that are within the bounds of the
// current map's viewport.
google.maps.event.addListener(map, 'bounds_changed', function() {
var bounds = map.getBounds();

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

#target {
width: 345px;
<input id="pac-input" class="controls" type="text" placeholder="Search Box">
<div id="map-canvas"></div>

after I input
I should press 'enter' and after map will focus on another place.

I want press enter programatically on this map.

What should I write in browser console?


I tried this:

var event = new KeyboardEvent('keydown');

But nothing happens


Yes I understood that specifically for link provided above it doesn't work because
is empty But I rewrite this code locally and '$("#pac-input")' is not empty but nothing happens


topic related with last comment:

similar question

Answer Source

You need to first trigger focus on the input element, then trigger a keydown event with code 13 (enter key).

var input = document.getElementById('pac-input');

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

JSFiddle demo

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download