Uncaught TypeError: Cannot read property 'length' of null

Question

I used google map javascript V3 API for this module. This code working fine untill we don't drag the map, but when i drag the map i'll get "Uncaught TypeError: Cannot read property 'length' of null "(from google chrome inspect element)

Code:

<html>
    <head>
        <title>
            Google Search
        </title>
        <style type="text/css">
            html, body { height: 100%; margin: 0; padding: 0;}
            #map-canvas { height: 80%; width:80%; margin: auto; padding: 0;}
        </style>
        <script src="js/jquery.min.js"></script>
        <script src="https://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
        <script>
            var map;
            var service;

            $(document).ready(function(){
                navigator.geolocation.getCurrentPosition(initialize);
            });

            function initialize(location) {
                console.log(location);

                var currentlocation = new google.maps.LatLng(location.coords.latitude, location.coords.longitude);

                var mapOptions = {
                    center: currentlocation ,
                    zoom: 12,
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    disableDefaultUI: true,
                    draggable: true
                };
                map = new google.maps.Map(document.getElementById("map-canvas"),
                    mapOptions);

                var marker = new google.maps.Marker({
                    position: currentlocation,
                    map: map,
                    title:"Hello World!"
                });

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

                google.maps.event.addListener(map, 'bounds_changed', performSearch);

                var circleOptions = {
                    strokeColor: '#FF0000',
                    strokeOpacity: 0.8,
                    strokeWeight: 2,
                    fillColor: '#FF0000',
                    fillOpacity: 0.25,
                    map: map,
                    center: currentlocation,
                    radius: 10000
                };

                var circle = new google.maps.Circle(circleOptions);

            }

            function performSearch() {
                var request = {
                    bounds: map.getBounds(),
                    name: "McDonald's"
                };

                service.nearbySearch(request, handleSearchResult);
            }

            function handleSearchResult(results, status){
                console.log(results);
                for (var i = 0; i < results.length; i++) {
                    var marker = new google.maps.Marker({
                        position: results[i].geometry.location,
                        map: map,
                        icon: "images//restaurant-71.png"
                    });
                }
            }
        </script>
    </head>
    <body>
        <div id="map-canvas"></div>
    </body>
</html>

geocodezip · Accepted Answer · 2023-03-20T19:07:09.613

You aren't checking the return status of the places search. If it encounters an error (or doesn't return any results), it will fail.

function handleSearchResult(results, status){
  if (status == google.maps.places.PlacesServiceStatus.OK) {
    for (var i = 0; i < results.length; i++) {
      var marker = new google.maps.Marker({
          position: results[i].geometry.location,
          map: map,
          icon: "images//restaurant-71.png"
       });
     }
  } else { alert("no results"); }
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#map-canvas {
  height: 80%;
  width: 80%;
  margin: auto;
  padding: 0;
}

<html>

<head>
  <title>
    Google Search
  </title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
  <script>
    var map;
    var service;
    const successCb = (position) => {
      console.log('in success callback');
      console.log(position);
      initialize(position);
    }

    const errorCb = (error) => {
      console.log('in error callback');
      console.error(error);
      // allow map to be initialized
      position = {
        coords: {
          latitude: 40.7127753,
          longitude: -74.0059728
        }
      }
      initialize(position);
    }


    $(document).ready(function() {
      // navigator.geolocation.getCurrentPosition(initialize);
      navigator.geolocation.getCurrentPosition(successCb, errorCb);
    });

    function initialize(location) {
      console.log(location);

      var currentlocation = new google.maps.LatLng(location.coords.latitude, location.coords.longitude);

      var mapOptions = {
        center: currentlocation,
        zoom: 12,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        disableDefaultUI: true,
        draggable: true
      };
      map = new google.maps.Map(document.getElementById("map-canvas"),
        mapOptions);

      var marker = new google.maps.Marker({
        position: currentlocation,
        map: map,
        title: "Hello World!"
      });

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

      google.maps.event.addListener(map, 'bounds_changed', performSearch);

      var circleOptions = {
        strokeColor: '#FF0000',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#FF0000',
        fillOpacity: 0.25,
        map: map,
        center: currentlocation,
        radius: 10000
      };

      var circle = new google.maps.Circle(circleOptions);

    }

    function performSearch() {
      var request = {
        bounds: map.getBounds(),
        name: "McDonald's"
      };

      service.nearbySearch(request, handleSearchResult);
    }

    function handleSearchResult(results, status) {
      if (status == google.maps.places.PlacesServiceStatus.OK) {
        for (var i = 0; i < results.length; i++) {
          var marker = new google.maps.Marker({
            position: results[i].geometry.location,
            map: map,
            // icon: "images//restaurant-71.png" use default icon
          });
        }
      } else {
        alert("no results");
      }
    }
  </script>
</head>

<body>
  <div id="map-canvas"></div>
</body>

</html>

Uncaught TypeError: Cannot read property 'length' of null

1 Answers1

Linked