Trying to show a map using the Google Places API, but it is not displayed due to the following error: initMap is not a function

Refresh

April 2019

Views

2 time

0

I am trying to load a map on my WordPress apage using the Google Places API. However, it does not display, which is probably due to the following error: "initMap is not a function". I found several related threats, but I couldn't find the right answer that applies to my specific case:

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

<script>
jQuery(document).ready(function(){
  var map;
        var service;
        var infowindow;

        function initMap() {
          var sydney = new google.maps.LatLng(-33.867, 151.195);

          infowindow = new google.maps.InfoWindow();

          map = new google.maps.Map(
              document.getElementById('map'), {center: sydney, zoom: 15});

          var request = {
            query: 'Museum of Contemporary Art Australia',
            fields: ['name', 'geometry'],
          };

          service = new google.maps.places.PlacesService(map);

          service.findPlaceFromQuery(request, function(results, status) {
            if (status === google.maps.places.PlacesServiceStatus.OK) {
              for (var i = 0; i < results.length; i++) {
                createMarker(results[i]);
              }

              map.setCenter(results[0].geometry.location);
            }
          });
        }

        function createMarker(place) {
          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);
          });
        }
  });
</script>

0 answers