Геокодер карт Google не определен

Question

Я кодирую приложение AngularJs 1.x (слишком лениво, чтобы изучать TypeScript).

Первый скрипт в моем index.html -

<script src="http://maps.google.com/maps/api/js?key=xxxxxx"></script>

в моем контроллере, который у меня есть

        var geocoder = new google.maps.Geocoder();

        Object.keys(companies).forEach(function(key) 
        {
            var companyName = key;
            var comapnyLocation = companies[key];

          console.log('Key : ' + key + ', Value : ' + companies[key])

          geocoder.geocode( { 'address': comapnyLocation}, function(results, status) {
          if (status == 'OK') {
              console.log(results[0].geometry.location);
          } else {
            alert('Geocode was not successful for the following reason: ' + status);
          }
        });

Когда я ставлю точку останова на строке после объявления декодера, я вижу, что это объект.Я разделяю точки успеха и неудачи ответного вызова и нажимаю только на ветку OK.Однако к этому моменту геокодер не определен.

Что я делаю неправильно?

Примечание. Я проверил свою панель инструментов Google и у меня включен API.

Answer 1

Прежде всего, мои извинения @CraigWayne. Я уверен, что его ответ поможет другим, но поскольку я не смог дать полную информацию в своем вопросе, он не мог ожидать, что он даст ответ.

Я пишу код в AngularJs 1.x и использую NgMap .

Итак, когда Крейг предлагает дождаться полной загрузки карты, я подозреваю, что директива NgMap <map> об этом позаботится.

Что сработало для меня - хотя я не знаю, как - заменить объявление

var geocoder = new google.maps.Geocoder();

и geocoder.geocode( { 'address': comapnyLocation}, function(results, status) по

var url = 'https://maps.googleapis.com/maps/api/geocode/json?address=' +  
            comapnyLocation +'&key=XXXX';

$http.get(url)

, который дает результаты, указанные Крейгом (в data.results).

Просто оставьте это здесь на случай, если в будущем это кому-нибудь поможет.

Answer 2

Причина, по которой это не работает, заключается в том, что вы пытаетесь использовать Google Maps API СЛИШКОМ РАННЕЕ

Согласно документации: https://developers.google.com/maps/documentation/javascript/tutorial

Атрибут async позволяет браузеру отображать остальную часть вашего веб-сайта во время загрузки JavaScript API Карт. Когда API будет готов, он вызовет функцию, указанную с помощью параметра обратного вызова.

---

Создайте функцию javascript, назовите ее как угодно, затем в теге скрипта, который вы используете для вызова API Google Maps, добавьте следующий параметр:

&callback=YOUR_FUNCTION_NAME_HERE

var map, geocode;
var companies = {
Google: '1600 Amphitheatre Parkway in Mountain View'
};

function initMap(){

map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: -34.397, lng: 150.644},
  zoom: 8
});

geocoder = new google.maps.Geocoder();


Object.keys(companies).forEach(function(key) 
{
  var companyName = key;
  var comapnyLocation = companies[key];
  console.log('Key : ' + key + ', Value : ' + companies[key])
  geocoder.geocode( { 'address': comapnyLocation}, function(results, status) {

  console.log("Results:", results );
      
    if (status == 'OK') {
        console.log(results[0].geometry.location);
    } else {
      alert('Geocode was not successful for the following reason: ' + status);
    }
  });
});
}

<script async defer
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>

Результаты