Place name getting wrong in Google Places API

Question

I am want to find out place name, so for that what i have done is that : First on google map click i am finding place_id from Geocoder. Now that place_id i am passing into Places API's function PlacesService. Now from there i am getting success request and it is returning place details but its name is not proper name. What i am getting is the name of street.

Below is my code :

<script>
    function initMap() {
        var myLatlng = new google.maps.LatLng(37.3132072, -121.9334579);
        var myOptions = {
            zoom: 10,
            center: myLatlng
        }
        var map = new google.maps.Map(document.getElementById("map"),
            myOptions);
        var geocoder = new google.maps.Geocoder();

        google.maps.event
            .addListener(
                map,
                'click',
                function(event) {
                    geocoder
                        .geocode({
                                'latLng': event.latLng
                            },
                            function(results, status) {
                                if (status == google.maps.GeocoderStatus.OK) {
                                    if (results[0]) {
                                        getname(results[0].place_id);
                                    }

                                }
                            });
                });

        function getname(place_id) {
            var placesService = new google.maps.places.PlacesService(map);
            placesService.getDetails({
                placeId: place_id
            }, function(results, status) {
                alert("NAME: " + results.name);
            });
        }
    }
</script>

When i am running this code what i got is below result :

Instead of getting name(Walmart Supercenter) it is getting street address(5095 Almaden Expy)

Answer 1

If you click on a the "Icons" on the map that are places, you will get an IconMouseEvent (basically a regular MouseEvent with the addition of a placeId property).

Use that placeId for the request rather than the return value from the geocoder.

google.maps.event.addListener(map,'click', function(event) {
  if (event.placeId) {
    getname(event.placeId)
  } else {
    geocoder.geocode({'latLng': event.latLng},
      function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          if (results[0]) {
            getname(results[0].place_id);
          }
        }
    });
  }
});

proof of concept fiddle

code snippet:

function initMap() {
  var myLatlng = new google.maps.LatLng(37.329343, -121.863077);
  var myOptions = {
    zoom: 15,
    center: myLatlng
  }
  var map = new google.maps.Map(document.getElementById("map"),
    myOptions);
  var geocoder = new google.maps.Geocoder();

  google.maps.event
    .addListener(
      map,
      'click',
      function(event) {
        if (event.placeId) {
          getname(event.placeId)
        } else {
          geocoder
            .geocode({
                'latLng': event.latLng
              },
              function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                  if (results[0]) {
                    getname(results[0].place_id);
                  }

                }
              });
        }
      });

  function getname(place_id) {
    var placesService = new google.maps.places.PlacesService(map);
    placesService.getDetails({
      placeId: place_id
    }, function(results, status) {
      alert("NAME: " + results.name);
    });
  }
}
google.maps.event.addDomListener(window, "load", initMap);

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
<div id="map"></div>