自动填写城市名称无效

Question

I am trying to get city names in auto complete text box using google places api. I don't know what is wrong with my code i am not getting city names in my autocomplete text box.

Here is my code:

 <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&language=en"></script> <script type="text/javascript"> google.maps.event.addDomListener(window, 'load', function () { var options = { types: ['(cities)'], componentRestrictions: { country: "us" } }; var input = document.getElementById('City'); var places = new google.maps.places.Autocomplete(input, options); }); </script> 

  <div> @Html.EditorFor(model => model.City, new { AllowHtmlAttribute = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.City) </div> 

Answer 1

You need to use Apı key for your googleapis.com reference.

You should be seeing the following error at your console:

Google Maps API error: MissingKeyMapError

Go to https://developers.google.com/maps/documentation/javascript/get-api-key

Use your script reference like this:

 <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key={YOUR_APIKEY};libraries=places&language=en"></script>

I tried and it's working fine.