CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
Hakan Fıstık
Hakan Fıstık

Reputation: 19491

Google maps api place_changed event not Firing

I am using google maps API v3 on my ASP.NET MVC project.
I want to show a map to the user which could search for someplace on it and then select that place, then submit it (very simple).
Everything is going ok in this scenario, except getting the suggested places when the user type in map search box.
Here is how I included the google maps API

<script src="https://maps.googleapis.com/maps/api/js?key=Correct_Key_Dot_Worry&libraries=places&callback=initMap" async defer></script>

html

<body>
    <input id="pac-input" class="controls" type="text" placeholder="Search Box">
    <input type="button" value="hakam" id="btntest" />
    <div id="map" style="width:500px; height:500px; margin-top:400px"></div>
</body>

javascript

 window.initMap = function(){
     var map = new google.maps.Map(document.getElementById('map'), {
         center: { lat: -33.8688, lng: 151.2195 },
         zoom: 13
     });
     var input = (document.getElementById('pac-input'));

     map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

     var autocomplete = new google.maps.places.Autocomplete(input);
     autocomplete.bindTo('bounds', map);

     var infowindow = new google.maps.InfoWindow();
     var marker = new google.maps.Marker({
         map: map,
         anchorPoint: new google.maps.Point(0, -29)
     });

     google.maps.event.addListener(autocomplete, 'place_changed', function () {
         infowindow.close();
         marker.setVisible(false);
         var place = autocomplete.getPlace();
         if (!place.geometry) {
             window.alert("Autocomplete's returned place contains no geometry");
             return;
         }

         // If the place has a geometry, then present it on a map.
         if (place.geometry.viewport) {
             map.fitBounds(place.geometry.viewport);
         } else {
             map.setCenter(place.geometry.location);
             map.setZoom(17);  // Why 17? Because it looks good.
         }
         marker.setIcon(({
             url: place.icon,
             size: new google.maps.Size(71, 71),
             origin: new google.maps.Point(0, 0),
             anchor: new google.maps.Point(17, 34),
             scaledSize: new google.maps.Size(35, 35)
         }));
         marker.setPosition(place.geometry.location);
         marker.setVisible(true);


         var address = '';
         if (place.address_components) {
             address = [
               (place.address_components[0] && place.address_components[0].short_name || ''),
               (place.address_components[1] && place.address_components[1].short_name || ''),
               (place.address_components[2] && place.address_components[2].short_name || '')
             ].join(' ');
         }

         //infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address);
         infowindow.setContent('<div><strong>' + "Location(" + place.geometry.location.lat() + "," + place.geometry.location.lng() + ")" + '</strong><br>');
         infowindow.open(map, marker);
     });

 }

Problem

the handler of the place_changed is not firing, and the code of the handler is not called when I start to write inside the text box of the google maps search.

after about 6 hours of searching and mind spinning, I read the documentation of the google maps API about this event, which was as the following

This event is fired when a PlaceResult is made available for a Place the user has selected. If the user enters the name of a Place that was not suggested by the control and presses the Enter key, or if a Place detail request fails, a place_changed event will be fired that contains the user input in the name property, with no other properties defined.

as the documentation says exactly when I click 'enter' key I really make this event place_changed firing, and again, exactly as the documentation says I got the response which contains the user input.

Question Why in the hell the a PlaceResult is NOT made available for a Place the user has selected. (according to the google documentation) What am I doing wrong to make google prevent me from this event?

NOTE 1
Please do not suggest me any question on StackOverflow about this topic, because I have been reading all of them, one by one, from the morning (more than 6 hours) and Nothing helped me.

NOTE 2
The example of javascript has been taken from google maps API documentation.

NOTE 3
As suggested in comments below, setting the language and region while loading the google maps library as the following :

<script src="https://maps.googleapis.com/maps/api/js?key=mykey&&language=ar&region=EG&libraries=places&callback=initMap" async defer></script>

did not solve my problem.

Upvotes: 4

Views: 6492

Answers (1)

Hakan Fıstık
Hakan Fıstık

Reputation: 19491

This question has been answered in the comments and I will summarize that.
Everything above (in the question) was correct, no error at all I just had to enable Google Places API from google developer console

Here is a similar question on SO : Google Map Autocomplete API not adding address options

By the way: the place_changed event is not necessary to trigger as you typing in the search box, as I was thinking.

Upvotes: 2

Related Questions