Google지도 마커 확인시 변경하십시오

Question

Google지도 api를 사용하는 데 상당히 익숙하므로 완전히 잘못된 길로 가고 있습니다. 그러나 내 검색에서 확인란 값을 기반으로 마커를 다시로드하는 간단한 방법을 찾지 못했습니다. 기본적으로 types의 값을 request으로 변경하여 마커가있는 장소의 유형을 변경하고 싶습니다.

function loadMarkers (latlng, position) { 
    window.position = position; 
    window.latlng = latlng; 
    var marker = new google.maps.Marker({ 
     position: latlng, 
     map: map 
    }); 
    console.log("request="+checked); 
    var request = { 
    location: latlng, 
    radius: 500, 
    types: checked 
    }; 
    window.request = request; 
} 

이, 페이지로드에 잘 작동하지만 체크 박스를 클릭에 마커를 변경하려면, 그래서 이것을 가지고 :

var checked = []; 
function success(position) { 

    var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); 
    var myOptions = { 
    zoom: 15, 
    center: latlng, 
    mapTypeControl: false, 
    navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL}, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    map = new google.maps.Map(document.getElementById("map-canvas"), myOptions); 


    loadMarkers(latlng, position); 
} 
navigator.geolocation.getCurrentPosition(success, error); 

그럼 난 전화 : 여기에 지금까지 무엇을 가지고

$('input[type=checkbox]:checked').each(function(){ 
    checked.push($(this).val()); 
    }); 

$('input[type=checkbox]').click(function(){ 
    checked= []; 
$('input[type=checkbox]:checked').each(function(){ 
    checked.push($(this).val()); 
    }); 
findRequest(window.latlng, window.position); 
}); 

getPlaces() 및이를 기반으로 마커를 다시로드하는 올바른 방법을 알 수 없으므로 불행히도 마커가 다시로드되지 않습니다. 나는 아마 내가 잘못된 방향으로 가고 있다는 것을 알고 있지만, 어떻게해야하는지에 대한 명확하고 간결한 설명을 찾을 수 없었다.

Answer 1

그래서 웹을 검색하여 구현하기가 간단하지 않은 것을 찾은 후에는 API를 더 깊이 살펴본 후 simple solution을 생각해 냈습니다. 이렇게하면 확인란을 기반으로 마커를 필터링 할 수 있습니다. 또한 새 위치를 검색하고 현재 위치 주변의 필터링 마커/장소와 함께 해당 지역에서 마커를 찾을 수 있습니다.

var map; 
var infoWindow; 
var service; 
var checked = []; 
    var markers = []; 
var markersArray = []; 
var input = /** @type {HTMLInputElement} */(
     document.getElementById('pac-input')); 
var searchBox = new google.maps.places.SearchBox(
    /** @type {HTMLInputElement} */(input)); 
$('input[type=checkbox]:checked').each(function(){ 
    checked.push($(this).val()); 
    }); 
console.log(checked); 

//checks if checkboxes are checked and adds them to array 
$('input[type=checkbox]').click(function(){ 
    checked= []; 
$('input[type=checkbox]:checked').each(function(){ 
    checked.push($(this).val()); 
    }); 
//findRequest(window.latlng, window.position); 
clearOverlays(); 
    performSearch(checked); 
}); 
function initialize(position) { 
    var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); 
    map = new google.maps.Map(document.getElementById('map-canvas'), { 
    center: latlng, 
    zoom: 15, 
    styles: [ 
     { 
     stylers: [ 
      { visibility: 'simplified' } 
     ] 
     }, 
     { 
     elementType: 'labels', 
     stylers: [ 
      { visibility: 'off' } 
     ] 
     } 
    ] 
    }); 

    infoWindow = new google.maps.InfoWindow(); 
    service = new google.maps.places.PlacesService(map); 
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(input); 
    google.maps.event.addListenerOnce(map, 'bounds_changed', performSearch); 
    google.maps.event.addListener(searchBox, 'places_changed', searchLocation); 
} 
//searches based on current location and adds markers 
function performSearch() { 
    var request = { 
    bounds: map.getBounds(), 
    radius:500, 
    types: checked 
    }; 
    console.log(checked); 
    service.radarSearch(request, callback); 
} 
//searches based on searchbox location and adds markers 
function searchLocation() { 
    console.log('searching new location'); 
    var places = searchBox.getPlaces(); 

    for (var i = 0, marker; marker = markers[i]; i++) { 
     marker.setMap(null); 
    } 

    // For each place, get the icon, place name, and location. 
    var bounds = new google.maps.LatLngBounds(); 

    for (var i = 0, place; place = places[i]; i++) { 
     var image = { 
     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) 
     }; 
     var marker = new google.maps.Marker({ 
     map: map, 
     icon: image, 
     title: place.name, 
     position: place.geometry.location 
     }); 
    var request = { 
    location: place.geometry.location, 
    radius: 500, 
    types: checked 
    }; 

    var service = new google.maps.places.PlacesService(map); 
    service.nearbySearch(request, callback); 
     bounds.extend(place.geometry.location); 
     markers.push(marker); 
    } 
    map.fitBounds(bounds); 
    map.setZoom(15); 
    }; 
function callback(results, status) { 
    if (status != google.maps.places.PlacesServiceStatus.OK) { 
    alert(status); 
    return; 
    } 
    for (var i = 0, result; result = results[i]; i++) { 
    createMarker(result); 
    } 
} 
function clearOverlays() { 
    for (var i = 0; i < markersArray.length; i++) { 
    markersArray[i].setMap(null); 
    } 
    markersArray.length = 0; 
    console.log("cleared"+markersArray); 
} 
function createMarker(place) { 
    var marker = new google.maps.Marker({ 
    map: map, 
    position: place.geometry.location, 
    icon: { 
     // Star 
     path: 'M 0,-24 6,-7 24,-7 10,4 15,21 0,11 -15,21 -10,4 -24,-7 -6,-7 z', 
     fillColor: '#ffff00', 
     fillOpacity: 1, 
     scale: 1/4, 
     strokeColor: '#bd8d2c', 
     strokeWeight: 1 
    } 
    }); 
markersArray.push(marker); 
var request = { reference: place.reference }; 
    google.maps.event.addListener(marker, 'click', function() { 
    service.getDetails(request, function(details, status) { 
     if (status != google.maps.places.PlacesServiceStatus.OK) { 
     alert(status); 
     return; 
     } 
     infoWindow.setContent(details.name + "<br />" + details.formatted_address +"<br />" + '<div id="bodyContent">' + "<br />" + '<p>Custom View Can Go Here' + details.formatted_phone_number); 
     infoWindow.open(map, marker); 
    }); 
    }); 
    google.maps.event.addListener(map, 'bounds_changed', function() { 
    var bounds = map.getBounds(); 
    searchBox.setBounds(bounds); 
    }); 
} 

//google.maps.event.addDomListener(window, 'load', initialize); 
navigator.geolocation.getCurrentPosition(initialize);