CODEWITHSUNDEEP
javascriptgoogle-maps-api-3autocomplete
Sebastian
Sebastian

Reputation: 485

google maps api places autofill form onload

Is there a way to fill in a form on load from the google autocomplete, if I have for instance the place.reference

This code works if I type in the business name, and then from the list I select one, and click on it.

But the key part of my question, is to just pass the reference and be able to get the for filled in.

<?   
    if(isset($_GET["ref"])){
    $ref=htmlspecialchars($_GET["ref"]);
    echo $ref;
    }
?>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=places" type="text/javascript"></script>

<script type="text/javascript">
    function initialize() {
        var input = document.getElementById('searchTextField');
        var autocomplete = new google.maps.places.Autocomplete(input);
        google.maps.event.addListener(autocomplete, 'place_changed', function () {
            var place = autocomplete.getPlace();
            document.getElementById('city2').value = place.name;
            document.getElementById('cityLat').value = place.geometry.location.lat();
            document.getElementById('cityLng').value = place.geometry.location.lng();
            //alert("This function is working!");
            //alert(place.name);
           // alert(place.address_components[0].long_name);

        });
    }
    google.maps.event.addDomListener(window, 'load', initialize); 
</script>
<body>
<input id="searchTextField" type="text" size="50" placeholder="Enter a location" autocomplete="on" runat="server" />  
<input type="text" id="city2" name="city2" />
<input type="text" id="cityLat" name="cityLat" />
<input type="text" id="cityLng" name="cityLng" />

EDITED FOLLOWING SUGGESTION (but not working):

<script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=places" type="text/javascript"></script>

<script type="text/javascript">
    function initialize() {
        var input = document.getElementById('searchTextField');
        var autocomplete = new google.maps.places.Autocomplete(input);
var request = {
  reference: 'CnRtAAAAP2oQGVedOeA5z_XkX0-adnnl4hsGlSJNyuJIVEUeBnkrGcfzDw0z0Ffi7GsZBdYtx-Qmbu6ekzUpZpMwJDVVyNDOKwGsd-V5ff_Y9wN4McpGxLJ_u7reNwwlKOEtkoks4dtcpUcuu7w2hI_j0VtnYhIQtfEq0cHTD1Fl1OeL35pzIhoUE8A3wNPUB1jk5lvueDGqwtVpdbo'
};
service = new google.maps.places.PlacesService(map);
/* Here I get this Console Error: Uncaught ReferenceError: map is not defined */
service.getDetails(request, callback);

function callback(place, status) {
  if (status == google.maps.places.PlacesServiceStatus.OK) {
            document.getElementById('city2').value = place.name;
            document.getElementById('cityLat').value = place.geometry.location.lat();
            document.getElementById('cityLng').value = place.geometry.location.lng();
  }
}
    }
    google.maps.event.addDomListener(window, 'load', initialize); 
</script>
<body>
<input id="searchTextField" type="text" size="50" placeholder="Enter a location" autocomplete="on" runat="server" />  
<input type="text" id="city2" name="city2" />
<input type="text" id="cityLat" name="cityLat" />
<input type="text" id="cityLng" name="cityLng" />

Upvotes: 1

Views: 1721

Answers (1)

Dr.Molle
Dr.Molle

Reputation: 117354

You may request the details based on the given reference and set the place-property of the autocomplete to the returned object.(use the set-method of MVCObject, otherwise the autocomplete will not recognize the changes)

As soon as you set the place-property the form-fields (except searchTextField) should automatically be filled.

The value of the searchTextField set to the name-property of the returned object.

The details may also be requested via webservice when you prefer a serverside solution(then you must set the values of all fields on your own)

Upvotes: 1

Related Questions