Google Map API file field with Place-Id

Question

I'm using the latest Google map API v3 and trying to accomplish the following:

1. Center users on the map when the page loads on a mobile device. I have this working in the code below.

2. The ability for users to click/touch a POI from the map and view the info window. This is also working since its a basic feature of google maps.

3. This is were I'm stumped. I need to be able to populate 2 fields with the name of the POI from the Info-Window in the 1st field and the 2nd field the Place-ID.

Here's what I've found so far: https://developers.google.com/maps/documentation/javascript/examples/places-placeid-finder

This link allows searching of places and the marker that is populated produces a Info-Window with the Place-ID of the searched location. But if you click on any of the POIs outside the marker, there are no Place_IDs.

The other close solution: Get placeId on google maps when POI is clicked

This solution allows you to click and see the Place-ID but there are 2 main issues. 1st, the same POI from the first link above produces a different Place-ID than this solution for the exact same location. Additionally it produces a Place-ID for any point on the map regardless if a POI is near.

Here's my code thus far:

 function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: -34.397, lng: 150.644},
        zoom: 17,
        streetViewControl: false,
        mapTypeControl: false
    });
    var infoWindow = new google.maps.InfoWindow({map: map});

    // Try HTML5 geolocation.
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function(position) {
        var pos = {
          lat: position.coords.latitude,
          lng: position.coords.longitude
        };

        infoWindow.setPosition(pos);
        infoWindow.setContent('Location found.');
        map.setCenter(pos);
      }, function() {
        handleLocationError(true, infoWindow, map.getCenter());
      });
    } else {
      // Browser doesn't support Geolocation
      handleLocationError(false, infoWindow, map.getCenter());
    }
  }

  function handleLocationError(browserHasGeolocation, infoWindow, pos) {
    infoWindow.setPosition(pos);
    infoWindow.setContent(browserHasGeolocation ?
                          'Error: The Geolocation service failed.' :
                          'Error: Your browser doesn\'t support geolocation.');
  }

I would greatly appreciate any light that could be shed on why the Place-IDs are always different between these methods and possible solutions on getting the true Place-ID from a click event. Thank you!

Answer 1

You can listen the click events on the map. If you click on the POI icon the IconMouseEvent will be raised.

According to the documentation:

google.maps.IconMouseEvent object specification

This object is sent in an event when a user clicks on an icon on the map. The place ID of this place is stored in the placeId member. To prevent the default info window from showing up, call the stop() method on this event to prevent it being propagated. Learn more about place IDs in the Places API developer guide.

This object extends MouseEvent.

Please have a look at this sample code to figure out how to use events with Place ID:

http://jsbin.com/parapex/10/edit?html,output

Hope it helps!