How can I make my Google Maps api v3 address search bar work by hitting the enter button on the keyboard?

Question

I'm developing a webpage and I would just like to make something more user friendly. I have a functional Google Maps api v3 and an address search bar. Currently, I have to use the mouse to select search to initialize the geocoding function. How can I make the map return a placemark by hitting the enter button on my keyboard and by clicking the search button? I just want to make it as user-friendly as possible.

Here is the javascript and div, respectively, I created for the address bar:

var geocoder;
    function initialize() {
    geocoder = new google.maps.Geocoder (); 
    function codeAddress () {
        var address = document.getElementById ("address").value;
        geocoder.geocode ( { 'address': address}, function(results, status)  {
        if (status == google.maps.GeocoderStatus.OK)  {
            map.setCenter(results [0].geometry.location);
            marker.setPosition(results [0].geometry.location);
            map.setZoom(14);
            } 
        else {
            alert("Geocode was not successful for the following reason: " + status);
                }
        }); 
                            }




           function initialize() {
        document.getElementById("address").focus(); }
    function setFocusOnSearch() {
        document.getElementById("search").focus(); }
    function codeAddress() {
        document.getElementById("address").focus(); }




    <body onload="initialize()">
                    <div id="geocoder">
        <input id="address" type="textbox" value="" "onblur="setFocusOnSearch()">
        <input id="search" type="button" value="Search" onclick="codeAddress()">
    </div>
                  </body>

Thank you in advance for your help

enter image description here

Have you tried binding your handling function to the `submit` event of the form wrapped around the address elements rather than the `click` event of the search button? — rjz, Jun 05 '12 at 04:21

MrUpsidown · Answer 1 · 2014-10-13T20:58:24.823

You want 3 easy steps:

1) Wait for the DOM to be loaded / Initialize the map (you did that already)

<body onload="initialize()">

Then within the initialize function:

2) Set focus to the address field

document.getElementById('address').focus();

3) Listen for the keyup event of the address field and catch the Enter key code / Call the codeAddress function

// Bind key-up event listener for address field
document.getElementById("address").addEventListener('keyup', function (event) {

    // Check the event key code
    if (event.keyCode == 13) {

        // Key code 13 == Enter key was pressed (and released)
        codeAddress();
    }
});

Either use the onlick / onkeyup HTML event attributes or add the event listeners from your javascript but don't do both.

JSFiddle demo

score -1 · Answer 2 · edited May 23 '17 at 12:13

-1

If I was you I would set the focus to the Search button.

So, if I understand correctly you have to enter an address and click search in order to do your geocoding.

So, what I would do to make it as user friendly as possible is during the onload of the body I would setfocus to the address textbox.

Then I would setfocus to the search button after the onleave/onblur event fires when you tab out of the address box. Then you would just hit enter and it would geocode.

All in all you would need to add these two. :

body onload -> setfocus to address textbox

address textbox onblur/onleave -> setfocus to search button

A third recommendation would be to setfocus back to the address textbox after the search button fires to start the process all over without leaving the keyboard.

Here is a link on setting focus on load. On leave is pretty easy to use also.

How do you automatically set the focus to a textbox when a web page loads?

Here is a link about onblur.

http://www.w3schools.com/jsref/event_onblur.asp

Update to help you more.

Ok, here is a demo page on how to use onblur etc. in pure javascript normally I would use jquery but I will keep it simple. I tried pasting it in but that didn't work.

enter image description here

Ok, last and final attempt, your code should look something like this, but the javascript tags need to be changed to be correct.

    <javascript tags>
    var geocoder;

  function initialize() {
    geocoder = new google.maps.Geocoder (); 
    //Set focuse to address textbox
    document.getElementById("address").focus(); 
    }

    function codeAddress () {
        var address = document.getElementById ("address").value;
        geocoder.geocode ( { 'address': address}, function(results, status)  {
        if (status == google.maps.GeocoderStatus.OK)  {
            map.setCenter(results [0].geometry.location);
            marker.setPosition(results [0].geometry.location);
            map.setZoom(14);
            } 
        else {
            alert("Geocode was not successful for the following reason: " + status);
                }
        }); 
        //Either way set focus to address textbox
        document.getElementById("address").focus();
                            }


    function setFocusOnSearch() {
        //Set focus to search button now that you have left address textbox
        document.getElementById("search").focus(); }

    <javascript tags end>

    <body onload="initialize()">
                    <div id="geocoder">
        <input id="address" type="textbox" value="" "onblur="setFocusOnSearch()">
        <input id="search" type="button" value="Search" onclick="codeAddress()">
    </div>
                  </body>

edited May 23 '17 at 12:13

Community

1
1

answered Jun 05 '12 at 22:13

Bill Blankenship

3,316
6
43
73

I tried adding the following, but it didn't work: "window.onload = function() { document.getElementById("address").focus(); };" to my javascript. Then to my input type, I add: "onblur="address" " ? – Gavin Jun 05 '12 at 22:40
The above image shows you how to do your onblur etc. If you just create a page like that the above it will work, but you need to add it into your page. – Bill Blankenship Jun 06 '12 at 22:36
I updated the code in my question as how I think you have set out, but the map doesn't load at all when I run the code. It seems as though there is a problem with "search". I've added a screenshot of the geocoder div as I see it. "search" and "setFocusOnSearch()" are both uncoloured – Gavin Jun 07 '12 at 17:28
You have multiple initialize functions is one of your problems. I will post how I think your code should work. – Bill Blankenship Jun 07 '12 at 18:02
Just updated my answer that is as close as I am going to get you without literally creating the page and sending it to you via email. – Bill Blankenship Jun 07 '12 at 18:07
The map now loads, but hitting the enter key still doesn't do anything. Thank you though, I really do appreciate the help – Gavin Jun 07 '12 at 18:44
Set breakpoints in your javascript and step into the function that your search button should go to. Step through your code. – Bill Blankenship Jun 07 '12 at 18:49
I used firefox's firebug to look through my code. I loaded my page in firefox, opened firebug and under the console tab, I selected 'break on all errors'. One error was found, and it was not in my javascript. It's the line before my script source is defined, which is " LINE: – Gavin Jun 07 '12 at 20:01
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/12275/discussion-between-gavin-and-user-smith) – Gavin Jun 07 '12 at 20:11
can't right now, but can in about 2 hours will you be on then? 6:00 CST USA – Bill Blankenship Jun 07 '12 at 20:36
Well, I looked at your code....it isn't your full page. Anyways, this is probably where you got your code to begin with. : https://google-developers.appspot.com/maps/documentation/javascript/examples/geocoding-simple I would suggest copying the source of this and just adding in my sample code that allows you to shift from textbox to button. If you can't get that to work I am not sure what to do. – Bill Blankenship Jun 07 '12 at 23:32
It is actually my full page, and I used that code when I first started. but thank you anyways for trying – Gavin Jun 08 '12 at 15:20
I didn't try I provided an answer to your question. But your google maps code is also incorrect. You have multiple issues. I would start with just getting one thing to work versus trying to do multiple things at once and then trying to troubleshoot 20 problems at once. – Bill Blankenship Jun 08 '12 at 15:48
I only asked for help with one thing, which wasn't even really a problem, it was just something extra. If my code is in fact incorrect, then how does it run? – Gavin Jun 08 '12 at 16:06
Try pasting your code from your above paste into .htm file. It is not possible for it to work. You don't even have a google map javascript api reference. Anyways good luck. – Bill Blankenship Jun 08 '12 at 16:52
Again, didn't try. Gave you an answer but you are welcome for the answer to your question. – Bill Blankenship Jun 08 '12 at 19:13

How can I make my Google Maps api v3 address search bar work by hitting the enter button on the keyboard?

2 Answers2