Хобрук: Ваш путь к мастерству в программировании

google.maps.places не определен

У меня есть веб-сайт, который загружает 3 отдельных «вида» местоположения через Google Maps, Street и Places.

Пожалуйста, смотрите мой код ниже:

Я, наконец, заставил Карты и Просмотр улиц работать должным образом, но немного борюсь с этим.

У меня есть вкладка, которая отображает то же, что и карта, но с добавленными местами.

<script type="text/javascript" 
  src="http://maps.googleapis.com/maps/api/js?v=3&key=....&sensor=false&callback=initializeMap"></script>

<script type="text/javascript">
var myLattitude = <?php echo $data["lattitude"]; ?>;
var myLongitude = <?php echo $data["longitude"]; ?>;
var poiMap;
var infowindow;

function initializePoi() {
            var poiCentre = new google.maps.LatLng(myLattitude, myLongitude);

            poiMap = new google.maps.Map(document.getElementById('poi-canvas'), {
                center: poiCentre,
                zoom: 15
            });

            var request = {
                location: poiCentre,
                radius: 500,
                types: ['store']
            };
            infowindow = new google.maps.InfoWindow();
            var service = new google.maps.places.PlacesService(poiMap);
            service.nearbySearch(request, 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: poiMap,
                position: place.geometry.location
            });

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

Now This initializes properly but the console throws the following error: TypeError: google.maps.places is undefined

Я просто хочу знать, почему я получаю эту ошибку, мне нравится иметь чистый безошибочный код.

Места действительно отображаются правильно и все такое.


  • Если вы получили ответ, отметьте его как правильный. 08.01.2014
  • Как ты это делаешь ? новичок на форуме :) 08.01.2014
  • Под стрелками вверх/вниз слева от каждого ответа стоит галочка. Нажмите на него, чтобы отметить ответ как правильный. Таким образом, вы экономите время других участников :) 08.01.2014
  • ;) Спасибо за ваши действия... ! :) 09.01.2014

Ответы:


1

Вы должны добавить параметр libraries=places в URL-адрес Google API.

В вашем случае вы должны заменить следующее:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&key=....&sensor=false&callback=initializeMap"></script>

С этим:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&key=....&sensor=false&callback=initializeMap&libraries=places"></script>

Посмотрите в конце src=""

08.01.2014
  • Не совсем, JsFiddle ничего не отображает :( Проблемы с ключом сервера, я полагаю 08.01.2014
  • Ха, кажется, сработало размещение ссылки на скрипт карт в теле вместе с вашим советом, большое спасибо, Мериано :) 08.01.2014
  • Также обратите внимание на очистку кеша браузера, если ваш JavaScript не работает так, как вы ожидаете после модификации кода. Может это поможет. 08.01.2014

  • 2

    Теперь вы должны использовать https вместо http.

    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&key=....&sensor=false&callback=initializeMap&libraries=places"></script>

    Все остальное так же, как и в предыдущем ответе.

    18.09.2018

    3

    Поскольку верхний ответ касается ванильной версии, это для тех, кто использует google-maps-react:

    добавьте библиотеки: ['places'] в свой компонент GoogleMapReact:

       <GoogleMapReact
            bootstrapURLKeys={{ key: apiKey, libraries: ['places'] }}
        ...
       />
    
    22.07.2021
    Новые материалы

    Основы принципов S.O.L.I.D, Javascript, Git и NoSQL
    каковы принципы S.O.L.I.D? Принципы SOLID призваны помочь разработчикам создавать надежные, удобные в сопровождении приложения. мы видим пять ключевых принципов. Принципы SOLID были разработаны..

    Как настроить Selenium в проекте Angular
    Угловой | Селен Как настроить Selenium в проекте Angular Держите свое приложение Angular и тесты Selenium в одной рабочей области и запускайте их с помощью Mocha. В этой статье мы..

    Аргументы прогрессивного улучшения почти всегда упускают суть
    В наши дни в кругах веб-разработчиков много болтают о Progressive Enhancement — PE, но на самом деле почти все аргументы с обеих сторон упускают самую фундаментальную причину, по которой PE..

    Введение в Джанго Фреймворк
    Схема «работать умно, а не усердно» В этой и последующих статьях я познакомлю вас с тем, что такое фреймворк Django и как создать свое первое приложение с помощью простых и понятных шагов, а..

    Настольный ПК как «одно кольцо, чтобы править всеми» домашних компьютеров
    Вид после 9 месяцев использования С настольных компьютеров все началось, но в какой-то момент они стали «серверами», и мы все перешли на ноутбуки. В прошлом году я столкнулся с идеей настольных..

    Расширенные методы безопасности для VueJS: реализация аутентификации без пароля
    Руководство, которое поможет вам создавать безопасные приложения в долгосрочной перспективе Безопасность приложений часто упускается из виду в процессе разработки, потому что основная..

    стройный-i18следующий
    Представляем стройную оболочку для i18next. Эта библиотека, основанная на i18next, заключает экземпляр i18next в хранилище svelte и отслеживает события i18next, такие как languageChanged,..