Auto fill state and country by name of city in google map api from php

Question

I have implemented Google map API on search. My code is working properly till auto generated location but I want such facility by which I can get exact location by providing only city name not whole format string.

For ex:

Please check this image http://demo.ncryptedprojects.com/nct_bnb_clone_new/Untitled.png

I'm entering city name Mumbai in search box and Google map API retrieves all values in drop-down. When someone does not choose any value from drop down and directly presses enter after city name I cant get exact search for city Mumbai in map. What I exactly want to do is, when someone enters city name and then search it should automatically search first occurrence from drop-down like "Mumbai Maharashtra,India"

HTML form

<input name="location" id="location" type="text"/>

Google map API

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>

$(function() {
            var e;
            e = $('.search-form input[name="location"]')[0];
            return new google.maps.places.Autocomplete(e, {
                types: ["geocode"]
            })

    });

Check http://stackoverflow.com/questions/14601655/google-places-autocomplete-pick-first-result-on-enter-key and the other links posted within that question — Rohit, Oct 17 '13 at 14:52

score 0 · Accepted Answer · answered Oct 17 '13 at 15:13

This is tricky because by default google places will look up locations nearby the center of the map, regardless the suggestions in the dropdown.

So you must find the first suggestion from the dropdown, document.querySelector('.pac-item') - extract the location and use geocoder to lookup the latlng for that location.

Code for extracting the location :

function extractLocation(item) {
    var text = item.innerText || item.textContent;
    var upper = text.toUpperCase();
    var result='';
    for (var i=0;i<text.length;i++) {
        if (text[i]==upper[i]) {
            result+=' ';
        }
        result+=text[i];
    }
    return result;
}

On searchbox enter, select the first suggestion, extract the location, lookup latlng by geocoder and place marker :

input.onkeyup = function(e) {
   var code = (e.keyCode ? e.keyCode : e.which);
   var places = searchBox.getPlaces();
   if (code == 13 && places!=[]) {
     var firstSuggestion = document.querySelector('.pac-item');
     var query = extractLocation(firstSuggestion);
     geocoder.geocode({"address":query }, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          clearMarkers();   
          var latLng = new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng());
          var marker = new google.maps.Marker({
             map: map,
             title: results[0].address_components[0].long_name,
             position: latLng,
          });
          markers.push(marker);
          map.setCenter(latLng);
          map.setZoom(10);
       }
     });
   } 
}

Working fiddle -> http://jsfiddle.net/cdnT8/

Auto fill state and country by name of city in google map api from php

1 Answers1