Получить широту и долготу от имени или zipcode - google API

Question

Я отредактировал мой код ниже и поместил полный JS. Я пытаюсь извлечь список мест рядом с данным zipcode или городом. Мой первый шаг состоял бы в том, чтобы взять имя zipcode или город и получить координаты latlng, а затем получить список мест. Я получаю следующие ошибки: «Невозможно вызвать метод« геокод »неопределенного« & »Невозможно прочитать свойство« offsetWidth »из null« Любая помощь будет принята с благодарностью.

var placesList; 
    var geocoder; 
    var map; 

    function initialize() { 
     map = new google.maps.Map(document.getElementById('map')); 
     geocoder = new google.maps.Geocoder(); 
    } 

    function getLatLng(address, callback) { 
     geocoder.geocode({ 
      address: address 
     }, function (results, status) { 
      if (status === google.maps.GeocoderStatus.OK) { 
       var location = new google.maps.LatLng(result.lat(), result.lng());      
       map.setCenter(location); 
       var marker = new google.maps.Marker({ 
        map: map, 
        position: location 
       }); 
       callback(location); 
      } else { 
       alert('Geocode was not successful for the following reason: ' + status); 
      } 
     }); 
    } 
    google.maps.event.addDomListener(window, 'load', initialize); 
    getLatLng('14235', function (latLngLocation) { 
     var pyrmont = latLngLocation; 
     var request = { 
      location: pyrmont, 
      radius: 5000, 
      types: ['park', 'zoo'] 
     }; 
     placesList = document.getElementById('places'); 
     var service = new google.maps.places.PlacesService(map); 
     service.nearbySearch(request, callback); 
     var request1 = { 
      reference: place.reference 
     }; 
     service.getDetails(request1, createMarkers); 

     function callback(results, status, pagination) { 
      if (status != google.maps.places.PlacesServiceStatus.OK) { 
       return; 
      } else { 
       for (var i = 0; i < results.length; i++) { 
        var markerPlace = results[i]; 
        createMarkers(markerPlace, status); 
       } 

       if (pagination.hasNextPage) { 
        var moreButton = document.getElementById('more'); 
        moreButton.disabled = false; 
        google.maps.event.addDomListenerOnce(moreButton, 'click', 
         function() { 
          moreButton.disabled = true; 
          pagination.nextPage(); 
         }); 
       } 
      } 
     } 


     function createMarkers(place, status) { 
      if (status == google.maps.places.PlacesServiceStatus.OK) { 

       var bounds = new google.maps.LatLngBounds(); 
       var image = { 
        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(25, 25) 
       }; 

       var marker = new google.maps.Marker({ 
        map: map, 
        icon: image, 
        title: place.name, 
        position: place.geometry.location 
       }); 
       placesList.innerHTML += '<li>' + place.name + '<br>' + 
        (place.formatted_address ? place.formatted_address : place.vicinity) + '</li>'; 

       bounds.extend(place.geometry.location); 
       map.fitBounds(bounds); 

      } 
     } 
    }); 

    google.maps.event.addDomListener(window, 'load', initialize); 

Answer 1

Ваш адрес не является строкой, то это число:

var address = 14235; 

В API ожидает "address" in the GeocoderRequest быть строка, которая выглядит как почтовый адрес. Если вы хотите, чтобы быть строкой, заключите его в кавычки (хотя я не уверен, что вы ожидаете геокодировщик вернуться на один номер):

var address = "14235"; 

Если вы даете геокодера то, что больше похож полный адрес, он будет работать лучше.

У вас также возникла проблема с асинхронным характером геокодирования (FAQ), вы не можете вернуть результат асинхронной функции, вам нужно использовать ее в функции обратного вызова.

Answer 2

Что вы должны понимать, так это то, что geocode API является асинхронным; вы пытаетесь присвоить переменную результатов pyrmont, прежде чем она будет готова. Для достижения желаемого вам потребуется использовать обратный вызов. Кроме того, есть некоторые другие проблемы, связанные с тем, как вы имеете дело с атрибутами latLng. В любом случае, вот как я думаю, ваш код должен выглядеть так:

var map, geocoder; // global vars 

// retain your initialize function 
function initialize() { 
    map = new google.maps.Map(document.getElementById('map'), options); 
    geocoder = new google.maps.Geocoder(); 
} 

// but separate out your code into a new function that accepts an address 
// and a callback function. 
function getLatLng(address, callback) { 
    geocoder.geocode({ address: address }, function (results, status) { 
    if (status === google.maps.GeocoderStatus.OK) { 

     // assign a new Google latLng object to `location` 
     var location = new google.maps.LatLng(result.lat(), result.lng(); 

     // set the center of the map and position using the latlng object 
     map.setCenter(location); 
     var marker = new google.maps.Marker({ 
     map: map, 
     position: location; 
     }); 

     // call the callback with the latlng object as a parameter. 
     callback(location); 
    } else { 
     alert('Geocode was not successful for the following reason: ' + status); 
    } 
    }); 
} 

google.maps.event.addDomListener(window, 'load', initialize); 

// call the `getLatLng` function with an address and a callback function 
getLatLng('14235', function (latLngLocation) { 
    var pyrmont = latLngLocation; 
});