0

このモジュールには Google マップ JavaScript V3 API を使用しました。このコードは、マップをドラッグしない限り正常に機能しますが、マップをドラッグすると、「Uncaught TypeError: Cannot read property 'length' of null」(Google chrome inspect 要素から) が表示されます。

コード：

<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>
4

1 に答える 1

1

場所検索の返品ステータスを確認していません。エラーが発生した場合 (または結果が返されない場合)、失敗します。

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"); }
}
于 2014-09-24T06:18:40.750 に答える