"Google Maps API Keyboard Shortcuts" pop up opens on "Enter" in Laravel Blade - api

Question

I have been using the same file for over a year and suddenly on my local environment, my Google Maps API keeps opening up a "Keyboard Shortcuts" pop up when hitting enter. Usual when hitting enter, my cursor moves to the next required input field in the form. I have made no changes to my code but I have updated Sublime Text, my Text Editor and it seems to support .blade.php files now.
How my JavaScript looked after the update:
I ended up fixing the code and here is my code currently:
My Form:
Client Address
Search Client Address
</x-slot>
<div class="form-group row">
<div class="col-lg-12">
<label>Physical Address<span style="color: red"> *</span></label>
<input type="search" id="searchmap" class="form-control" placeholder="Search Address..." name="address">
<input hidden type="text" name="lat" id="lat" required>
<input hidden type="text" name="lng" id="lng" required>
<br>
<div class="form-group">
<div id="map-canvas"></div>
</div>
</div>
</div>
<!-- end::Row -->
<div class="form-group row">
<div class="col-md-12">
<label>Address Comments</label>
<textarea class="form-control" name="address_comments" id="address_comments" rows="3"></textarea>
</div>
</div>
</x-card>
My JavaScript:
<script src="https://maps.googleapis.com/maps/api/js?key=MYKEY&libraries=places" type="text/javascript"></script>
<script type="text/javascript">
var map = new google.maps.Map(document.getElementById('map-canvas'),{
center:{
lat: -26.18,
lng: 28.04
},
zoom:9
});
var marker = new google.maps.Marker({
Position: {
lat: -26.18,
lng: 28.04
},
map: map,
draggable: true
});
var searchBox = new google.maps.places.SearchBox(document.getElementById('searchmap'));
google.maps.event.addListener(searchBox,'places_changed',function(){
var places = searchBox.getPlaces();
var bounds = new google.maps.LatLngBounds();
var i, place;
for(i=0; place=places[i];i++){
bounds.extend(place.geometry.location);
marker.setPosition(place.geometry.location); //set marker position new...
}
map.fitBounds(bounds);
map.setZoom(18);
});
google.maps.event.addListener(marker,'position_changed',function(){
var lat = marker.getPosition().lat();
var lng = marker.getPosition().lng();
$('#lat').val(lat);
$('#lng').val(lng);
});
</script>
The pop up window:

Answer 1

If you don't need actual keyboard shortcuts button to display, you could hide it by setting the control options for the google map instance by:
keyboardShortcuts: false
The documentation doesn't specifically show you this, but they do mention the control at: https://developers.google.com/maps/documentation/javascript/controls

Answer 2

I had a similar problem on an older project I have to fix issues on. The Google Maps container is part of a <form>. However, this <form> has no action and in JavaScript there was no listener attached to the submit event.
<form class="some-class">
...
<div id="map-canvas"></div>
...
Send
</form>
The <a> has a click event attached to it, and will gather all data from the form and send it via ajax to an endpoint. There was also a keyup listener event where the "Enter" key was used to submit the data.
So this form breaks all kinds of rules
no action, thus page refreshes if submit event is triggered and nothing will have happened
the <a>-tag should have been a submit button, and the <form> should have a listener for the submit event
keyup event should not be necessary, the form handles the enter key automatically
the form shouldn't have been part of the form in the first place
The above breaks since a recent Maps change, where keyboard features were added. The Maps takes over the "Enter" key, instead showing the kayboard shortcuts of Maps.
We fixed this legacy code by changing the tag in a and attach a event listener to the form that listens for the submit event. We also removed the map out of the form, but this is not the cause of the issue.
Anyhow, another fine example of where native HTML element and JavaScript features should be used for what they are created for.

Answer 3

A bit hacky but you can use:
[class*='-keyboard-shortcuts-dialog-view']{
display:none;
}