Google maps Multiple marker: setMap: not an instance of Map; and not an instance of StreetViewPanorama

Question

I want to display Near by schools of my selected property in google maps API with marker, but it is showing me error, setMap: not an instance of Map; and not an instance of StreetViewPanorama.

Below is my code, please help me to find where is my mistake.


    <script type="text/javascript">
        function initMap() {
            var lat = $('#lat').val();
            var lng = $('#lng').val();
            var address = $('#address').val();
            var latNumber = Number(lat);
            var lngNumber = Number(lng);
            const myLatLng = {
                lat: latNumber,
                lng: lngNumber
            };
            const map = new google.maps.Map(document.getElementById("map"), {
                zoom: 17,
                center: myLatLng,
            });
            new google.maps.Marker({
                    position: myLatLng,
                    map,
                    title: address,
                });
    
            infowindow = new google.maps.InfoWindow();
            var service = new google.maps.places.PlacesService(map);
            service.nearbySearch({
                    location: myLatLng,
                    radius: 500,
                    type: ['school']
                },
                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 latNumber=place.geometry.location.lat();
            var lngNumber=place.geometry.location.lng();
    
            let schools = { lat: latNumber, lng: lngNumber };
            // var placeLoc = place.geometry.location;
            new google.maps.Marker({
                position: schools,
                map,
               title: 'school'
            });
            google.maps.event.addListener(marker, 'click', function() {
                infowindow.setContent(place.name);
                infowindow.open(map, this);
            });
        }
    
        window.initMap = initMap;
    </script>
    <script type="text/javascript"
        src="https://maps.google.com/maps/api/js?key='APIKEY'&sensor=true&libraries=geometry&libraries=places&callback=initMap">
    </script>

score 0 · Accepted Answer · answered Sep 08 '22 at 12:25

Your map variable is local to the initMap function, so isn't defined in the nearbySearch callback function (which calls createMarker).

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>

<head>
</head>

<body>
  <input id="lat" value="40.7127753" />
  <input id="lng" value="-74.0059728" />
  <div id="map"></div>
</body>
<script type="text/javascript">
  let map;

  function initMap() {
    var lat = $('#lat').val();
    var lng = $('#lng').val();
    var address = $('#address').val();
    var latNumber = Number(lat);
    var lngNumber = Number(lng);
    const myLatLng = {
      lat: latNumber,
      lng: lngNumber
    };
    map = new google.maps.Map(document.getElementById("map"), {
      zoom: 17,
      center: myLatLng,
    });
    new google.maps.Marker({
      position: myLatLng,
      map,
      title: address,
    });

    infowindow = new google.maps.InfoWindow();
    var service = new google.maps.places.PlacesService(map);
    service.nearbySearch({
        location: myLatLng,
        radius: 500,
        type: ['school']
      },
      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 latNumber = place.geometry.location.lat();
    var lngNumber = place.geometry.location.lng();

    let schools = {
      lat: latNumber,
      lng: lngNumber
    };
    // var placeLoc = place.geometry.location;
    new google.maps.Marker({
      position: schools,
      map,
      title: 'school'
    });
    google.maps.event.addListener(marker, 'click', function() {
      infowindow.setContent(place.name);
      infowindow.open(map, this);
    });
  }

  window.initMap = initMap;
</script>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=geometry,places&callback=initMap">
</script>

</html>

Google maps Multiple marker: setMap: not an instance of Map; and not an instance of StreetViewPanorama

1 Answers1