未捕获到的TypeError：无法读取Google Map API中未定义的属性“ PlacesService”

Question

   doctype html
        html
          head
            title= title
            link(rel='stylesheet', href='/stylesheets/style.css')
          body
            script(src='/javascripts/jquery.min.js')
            script(src='http://maps.google.com/maps/api/js?key=AIzaSyD6MCxtDJOnbE1T6Y09k8Uca1rXHTQ3Bqg&v=3.exp&sensor=true&libraries=place‌​s')
            script(src='/javascripts/global.js')
            h1= title
            #loading
              p Loading your location
            br
            #map

            input#my-address(type='text')
        button#getCords(onclick='codeAddress();') getLat&Long

I write above code in jade template for display the map ie 'index.jade' and following file ie 'global.js' is script file

 //Calling the locateme function when the document finishes loading
 $(document).ready(function() {
    locateMe();
});

//Function to locate the user
var locateMe = function(){
    var map_element= $('#map');
    if (navigator.geolocation) {
       var position= navigator.geolocation.getCurrentPosition(loadMap);
    } else {
      map_element.innerHTML = "Geolocation is not supported by this browser.";
    }
};

//Lets load the mop using the position
var loadMap = function(position) {
  var loading= $('#loading');
  var latitude=position.coords.latitude;
  var longitude=position.coords.longitude;
  var myLatlng = new google.maps.LatLng(latitude, longitude);
        //Initializing the options for the map
        var myOptions = {
         center: myLatlng,
         zoom: 15,
         mapTypeId: google.maps.MapTypeId.ROADMAP,
      };
        //Creating the map in teh DOM
      var map_element=document.getElementById("map");
      var map = new google.maps.Map(map_element,myOptions);
        //Adding markers to it
      var marker = new google.maps.Marker({
          position: myLatlng,
          map: map,
          title: 'You are here'
      });
        //Adding the Marker content to it
      var infowindow = new google.maps.InfoWindow({
          content: "<h2>You are here:</h2>",
            //Settingup the maxwidth
          maxWidth: 300
      });
        //Event listener to trigger the marker content
      google.maps.event.addListener(marker, 'click', function() {
          infowindow.open(map,marker);});
};

//get lat and log 
function codeAddress() {
  alert('inside')
    geocoder = new google.maps.Geocoder();
    var address = document.getElementById("my-address").value;
    geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
      var lat=results[0].geometry.location.lat();
      var lng=results[0].geometry.location.lng();
      var pyrmont={lat:lat,lng:lng};
     var lat=results[0].geometry.location.lat();
      var lng=results[0].geometry.location.lng();
      var pyrmont={lat:lat,lng:lng};

      var map = new google.maps.Map(document.getElementById("my-address"),{
        center:pyrmont,
        zoom:15
      });

      //Adding the Marker content to it
      var infowindow = new google.maps.InfoWindow();
      alert(infowindow);
      var service = new google.maps.places.PlacesService(map);
        service.nearbySearch({
          location: pyrmont,
          radius: 500,
          type: ['store']
        }, callback);


      function callback(results, status) {
        if (status === google.maps.places.PlacesServiceStatus.OK) {
          for (var i = 0; i < results.length; 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);
          infowindow.open(map, this);
        });
    };

       } else {
        alert("Geocode was not successful for the following reason: " + status);
      }
    });
  }

Uncaught TypeError: Cannot read property 'PlacesService' of undefined in google map api

Answer 1

You are doing Place Search which doesnt return all of the fields that you are using: http://code.google.com/apis/maps/documentation/javascript/places.html#place_search_responses

In order to get the address, website, etc, you'll also need to call place.getDetails(), passing the Place's reference .

Below is a sample code snippet how to get Places details:

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

var request = { reference: place.reference };
service.getDetails(request, function(details, status) {
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(details.name + "<br />" + details.formatted_address +"<br />" + details.website + "<br />" + details.rating + "<br />" + details.formatted_phone_number);
infowindow.open(map, this);
});
});
}