Googleマップでマーカーをクリア/非表示できない

Question

マップ上でマーカーを非表示/クリアしようとする問題が発生しています。私はGoogleのドキュメントを見て、私は正しいコードを持っている、私もここで見てきましたが、何も私のために働いているようだが、私は明確なマップボタンを追加し、関数を作成しましたが、作業。私が使用している場合も

が、私は地理位置側面に追加しようとしましたが、それも全く機能していない、しかし、コードのGoogleのAPIは、それは私が私のコードでそれを実装するときだけではない作品与えている

私が間違った場所にコードを持っているのか、そうでないのか分かりません。何か助けていただければ幸いです。あなたに

"関数clearMarkers（）" あなたが使用する必要があります：大きなテストなし

var map; 
    var infoWindow; 
    var service; 


    function initMap() { 

     map = new google.maps.Map(document.getElementById('map'), { 
      center: {lat: 51.545213, lng: -0.0307699}, 
      zoom: 15, 
      styles: [{ 
       stylers: [{visibility: 'simplified'}] 
      }, { 
       elementType: 'labels', 
       stylers: [{visibility: 'on'}] 
      }] 
     }); 

     var input = /** @type {!HTMLInputElement} */(
       document.getElementById('pac-input')); 

     var types = document.getElementById('type-selector'); 
     map.controls[google.maps.ControlPosition.TOP_LEFT].push(input); 
     map.controls[google.maps.ControlPosition.TOP_LEFT].push(types); 

     var autocomplete = new google.maps.places.Autocomplete(input); 
     autocomplete.bindTo('bounds', map); 

     var infowindow = new google.maps.InfoWindow(); 
     var marker = new google.maps.Marker({ 
      map: map, 
      anchorPoint: new google.maps.Point(0, -29) 
     }); 

    autocomplete.addListener('place_changed', function() { 
     infowindow.close(); 
     marker.setVisible(false); 
     var place = autocomplete.getPlace(); 
     if (!place.geometry) { 
     // User entered the name of a Place that was not suggested and 
     // pressed the Enter key, or the Place Details request failed. 
     window.alert("No details available for input: '" + place.name + "'"); 
     return; 
     } 

     // If the place has a geometry, then present it on a map. 
     if (place.geometry.viewport) { 
     map.fitBounds(place.geometry.viewport); 
     } else { 
     map.setCenter(place.geometry.location); 
     map.setZoom(17); // Why 17? Because it looks good. 
     } 
     marker.setIcon(/** @type {google.maps.Icon} */({ 
     url: place.icon, 
     size: new google.maps.Size(71, 71), 
     origin: new google.maps.Point(0, 0), 
     anchor: new google.maps.Point(17, 34), 
     scaledSize: new google.maps.Size(35, 35) 
     })); 
     marker.setPosition(place.geometry.location); 
     marker.setVisible(true); 

     var address = ''; 
     if (place.address_components) { 
     address = [ 
      (place.address_components[0] && place.address_components[0].short_name || ''), 
      (place.address_components[1] && place.address_components[1].short_name || ''), 
      (place.address_components[2] && place.address_components[2].short_name || '') 
     ].join(' '); 
     } 

     infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address); 
     infowindow.open(map, marker); 
    }); 
    // Sets a listener on a radio button to change the filter type on Places 
    // Autocomplete. 
    function setupClickListener(id, types) { 
     var radioButton = document.getElementById(id); 
     radioButton.addEventListener('click', function() { 
     autocomplete.setTypes(types); 
     }); 
    } 

    setupClickListener('changetype-all', []); 
    setupClickListener('changetype-address', ['address']); 
    setupClickListener('changetype-establishment', ['establishment']); 
    setupClickListener('changetype-geocode', ['geocode']); 

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

    // The idle event is a debounced event, so we can query & listen without 
    // throwing too many requests at the server. 
    map.addListener('idle', performSearch(places)); 
    } 



    function handleLocationError(browserHasGeolocation, infoWindow, pos) { 
    infoWindow.setPosition(pos); 
    infoWindow.setContent(browserHasGeolocation ? 
          'Error: The Geolocation service failed.' : 
          'Error: Your browser doesn\'t support geolocation.'); 
    } 

    function performSearch(places) { 

     var places = places; 
    var request = { 
     bounds: map.getBounds(), 
     keyword: places 
    }; 
    service.radarSearch(request, callback); 

    } 

    function callback(results, status) { 
    if (status !== google.maps.places.PlacesServiceStatus.OK) { 
     console.error(status); 
     return; 
    } 
    for (var i = 0, result; result = results[i]; i++) { 
     addMarker(result); 
    } 
    } 
    function addMarker(place) { 
    var marker = new google.maps.Marker({ 
     map: map, 
     position: place.geometry.location, 
    // icon: { 
     // url: 'https://developers.google.com/maps/documentation/javascript/images/circle.png', 
     //anchor: new google.maps.Point(10, 10), 
     //scaledSize: new google.maps.Size(10, 17) 
     //} 

    }); 


    google.maps.event.addListener(marker, 'click', function() { 
     service.getDetails(place, function(result, status) { 
     if (status !== google.maps.places.PlacesServiceStatus.OK) { 
      console.error(status); 
      return; 
     } 
     infoWindow.setContent(result.name); 
     infoWindow.open(map, marker); 
     }); 
    }); 
    } 
    function initAutocomplete() { 
var map = new google.maps.Map(document.getElementById('map'), { 
    center: { lat: -33.8688, lng: 151.2195 }, 
    zoom: 13, 
    mapTypeId: 'roadmap' 
}); 

// Create the search box and link it to the UI element. 
var searchInput = document.getElementById('pac-input'); 
var searchBtn = document.getElementById('search-button'); 
var searchBox = new google.maps.places.SearchBox(searchInput); 
map.controls[google.maps.ControlPosition.TOP_LEFT].push(searchInput); 
map.controls[google.maps.ControlPosition.TOP_LEFT].push(searchBtn); 

// Bias the SearchBox results towards current map's viewport. 
map.addListener('bounds_changed', function() { 
    searchBox.setBounds(map.getBounds()); 
}); 

var markers = []; 
// Listen for the event fired when the user selects a prediction and retrieve 
// more details for that place. 
searchBox.addListener('places_changed', function() { 
    //displaySearchResults(map, searchBox, markers); 
}); 


searchBtn.onclick = function() { 
    displaySearchResults(map,searchBox,markers); 
} 
} 






function displaySearchResults(map, searchBox, markers) { 
var places = searchBox.getPlaces(); 

if (places.length == 0) { 
    return; 
} 

// Clear out the old markers. 


// For each place, get the icon, name and location. 
var bounds = new google.maps.LatLngBounds(); 
places.forEach(function (place) { 
    if (!place.geometry) { 
     console.log("Returned place contains no geometry"); 
     return; 
    } 
    var icon = { 
     url: place.icon, 
     size: new google.maps.Size(71, 71), 
     origin: new google.maps.Point(0, 0), 
     anchor: new google.maps.Point(17, 34), 
     scaledSize: new google.maps.Size(25, 25) 
    }; 

    // Create a marker for each place. 
    markers.push(new google.maps.Marker({ 
     map: map, 
     icon: icon, 
     title: place.name, 
     position: place.geometry.location 

    })); 
    function clearMarkers() { 
     for (var i = 0; i < markers.length; i++) { 
      markers[i].setMap(map); 
     } 
    } 
    if (place.geometry.viewport) { 
     // Only geocodes have viewport. 
     bounds.union(place.geometry.viewport); 
    } else { 
     bounds.extend(place.geometry.location); 
    } 
}); 
map.fitBounds(bounds); 
} 

Answer 1

マーカー[i]を.setMap（NULL）;

マーカー[i] .setMap（map）の代わりに。これは再び

Answer 2

さらなるマーカーを設定します：

宣言：あなたのコードの先頭でグローバルとして

var marker; 
var markers[]; 

。関数内では、 "var marker"ではなく "marker .."のみを使用します。後で削除するマーカーが「marker = new google.maps.Marker（{...」）で定義されている場合は、markerers.push（マーカー）を使用してマーカー配列に追加します。

"//各場所のマーカーを作成する"私は定義と保存のための標準的な方法を使用します：

marker = new google.maps.Marker({ 
     ...}); 
markers.push(marker).