Google Places API - Adding Places Details

Tag: google-maps , google-maps-api-3 , google-places-api Author: hujuku12333 Date: 2012-12-23

I have the following code:

     function getLocation()
                {
                if (navigator.geolocation)
                  {
                  navigator.geolocation.getCurrentPosition(start,showError);

                  }
                else{
                error('Geo Location is not supported');
                }
                }

 function start(position) {

                var mySearch = document.getElementById("search").value;           
               var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

                map = new google.maps.Map(document.getElementById('map'), {
                  mapTypeId: google.maps.MapTypeId.ROADMAP,
                  center: latlng,
                  zoom: 12
                });

                var request = {
                  location: latlng,
                  radius: 500,
                  query: mySearch
                };

                 infowindow = new google.maps.InfoWindow();
                 service = new google.maps.places.PlacesService(map);
                 service.textSearch(request, callback);
                }

                function callback(results, status) {

                  if (status == google.maps.places.PlacesServiceStatus.OK) {
                    for (var i = 0; i < results.length; i++) {
                      var place = results[i];
                      createMarker(results[i]);

                    }
                  }
                }


              function createMarker(place) {

                var placeLoc = place.geometry.location;
                var marker = new google.maps.Marker({
                  map: map,
                  position: place.geometry.location,


                });

                google.maps.event.addListener(marker, 'click', function() {
                  infowindow.setContent(place.name, place.website);
                  infowindow.open(map, this);
                });
              } 

The code works fine however I am trying to retrieve more details about a place. I know about the place details at: https://developers.google.com/maps/documentation/javascript/places#place_details I'm just unsure where and how to adjust my code to say add in the places website. I'm struggling to work out where to get the reference and then how to use it. If someone could write it within my code that would be great.

Best Answer

Adjusted "createMarker" function (not tested):

function createMarker(place) {
    var placeLoc = place.geometry.location;
    if (place.icon) {
      var image = new google.maps.MarkerImage(
            place.icon, new google.maps.Size(71, 71),
            new google.maps.Point(0, 0), new google.maps.Point(17, 34),
            new google.maps.Size(25, 25));
    } else var image = null;

    var marker = new google.maps.Marker({
      map: map,
      icon: image,
      position: place.geometry.location
    });
    var request =  {
      reference: place.reference
    };

    google.maps.event.addListener(marker,'click',function(){
        service.getDetails(request, function(place, status) {
          if (status == google.maps.places.PlacesServiceStatus.OK) {
            var contentStr = '<h5>'+place.name+'</h5><p>'+place.formatted_address;
            if (!!place.formatted_phone_number) contentStr += '<br>'+place.formatted_phone_number;
            if (!!place.website) contentStr += '<br><a target="_blank" href="'+place.website+'">'+place.website+'</a>';
            contentStr += '<br>'+place.types+'</p>';
            infowindow.setContent(contentStr);
            infowindow.open(map,marker);
          } else { 
            var contentStr = "<h5>No Result, status="+status+"</h5>";
            infowindow.setContent(contentStr);
            infowindow.open(map,marker);
          }
        });
    });
}

working example

comments:

Hiya, thanks thats really helped. 1 more thing I am using Geo locate to find my position and I would like my position to be plotted on the map too. Any idea how to do this? Ive updated my code to show the geoLocation
I don't use geolocation and I deny it on any pages I visit. That is an entirely different question.
Ok thanks, I asked as you seem very knowledgeable.
It is still an entirely separate question and should be submitted as such on StackOverflow.