Javascript Execution - Google Api

Question

This is the code I'm working from:

The weird thing is, the autosuggest only seems to activate on the last input box after I click on the geocode button. This is the code im working from:

<html>
<head>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
<script>
function getLatLng() {
    var geocoder = new google.maps.Geocoder();
    var address = document.getElementById('address').value;

    var input = document.getElementById('searchTextField');
    var options = {
    types: [],
    };

var autocomplete = new google.maps.places.Autocomplete(input, options);

    geocoder.geocode({
        'address': address
    }, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            var latLng = results[0].geometry.location;
            $('#lat').val(results[0].geometry.location.lat());
            $('#lng').val(results[0].geometry.location.lng());
        } else {
            alert("Geocode was not successful for the following reason: " + status);
        }
    });
}
</script>
</head>
    <body>
        <div>
            <input id="address" type="textbox" value="Sydney, NSW">
            <input type="button" value="Geocode" onclick="getLatLng()">
            <input id="lat" type="textbox" value="lat">
            <input id="lng" type="textbox" value="lng">
            <input id="searchTextField" type="text" size="50" value="">

           </div>
      </body>
</html>

What gives? I've never had this before, but this is the first script I have tried to put together.

Daniel Li · Accepted Answer · 2012-11-03 21:36:39Z

1

This is due to the following line:

var autocomplete = new google.maps.places.Autocomplete(input, options);

input links it to:

var input = document.getElementById('searchTextField');

which is the last input box.

In addition, you have to click on the geocode button before Google autocomplete links because you have bound the getLatLng() call to the click of the Geocode button:

<input type="button" value="Geocode" onclick="getLatLng()">

Because the Google autocomplete activates from within this function, you cannot initialize it without pressing the button.

answered Nov 3, 2012 at 21:36

Daniel Li

15.6k6 gold badges45 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

James Willson Over a year ago

But why do I have to click on geocode button before the searchTextField acts as an autosuggest

James Willson Over a year ago

Ah I see, could you explain how I can put it in its own function so I dont have to click the button?

charlietfl · Accepted Answer · 2012-11-03 21:41:32Z

0

You are initializing the autocomplete within the getLatLng function so it isn;'t available until the button is clicked and the function gets called

answered Nov 3, 2012 at 21:41

charlietfl

172k14 gold badges125 silver badges154 bronze badges

3 Comments

James Willson Over a year ago

Ah I see, could you explain how I can put it in its own function so I dont have to click the button?

charlietfl Over a year ago

you never call the function. Needs to be in an onload handler so the input exists when the function is called. BTW. Is against Google Maps TOS using geocoder without implementing a map

James Willson Over a year ago

Ive been on their forums and checked it with them, its ok to show it on the next pages since that is where the user actually uses the geocode.

Collectives™ on Stack Overflow

Javascript Execution - Google Api

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related