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

user_9593488 0
Viewed 1044

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: enter image description here

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: enter image description here

window maps api
3 Answers
user_29656940

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>
    ...
    <a href="#" class="btn btn--primary js-send">Send</a>
</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.

user_112222980

A bit hacky but you can use:

[class*='-keyboard-shortcuts-dialog-view']{
    display:none;
}
user_161544130
Related