ラジオボタンを使用してマーカーとプレイスタイプを更新する - Googleプレイス

Question

プレイスタイプを選択するラジオボタンlike thisが作成されました。たとえば、レストランをクリックすると、マーカーにはレストランの場所のみが表示されます。薬局をクリックすると、薬局の所在地だけがマーカーで表示されます。 jQueryを使用しようとしましたが、動作しません。だから私はそれをどのようにしますか？ありがとうございます

ここでは、参考用にHTMLとJSを提供しています。

HTML：

<div class="place-types"> 
    <input class="with-gap" name="type" type="radio" id="lodging" value="lodging" /> 
    <label for="lodging">Lodging</label> 
</div> 
<div class="place-types"> 
    <input class="with-gap" name="type" type="radio" id="restaurant" value="restaurant" /> 
    <label for="restaurant">Restaurant</label> 
</div> 
<div class="place-types"> 
    <input class="with-gap" name="type" type="pharmacy" id="pharmacy" value="pharmacy"/> 
    <label for="apotik">Pharmacy</label> 
</div> 
<div class="place-types"> 
    <input class="with-gap" name="type" type="radio" id="ds" value="department_store" /> 
    <label for="ds">Department Store</label> 
</div> 

<div id="hotels" style="height: 400px; width: 100%;"></div> 

JS：

var center = {lat: 30.42130899999999, lng: -87.2169149}; 
var hotel = new google.maps.Map(document.getElementById('hotels'), { 
     center: center, 
     disableDefaultUI: true, 
     zoom: 17 
    }); 

var request = { 
      placeId: placeId, 
      location: center, 
      radius: '500', 
      // Type 
      types: ['lodging'] 
     }; 

service.nearbySearch(request, callback); 

    function callback(results, status) { 
     if (status == google.maps.places.PlacesServiceStatus.OK) { 
      for (var i = 0; i < results.length; i++) { 
       var place = results[i]; 
       createMarker(results[i]); 
      } 
     } 
    } 

    function createMarker(place) { 
     var placeLoc = place.geometry.location; 
     var marker = new google.maps.Marker({ 
      map: hotel, 
      title: place.name, 
      position: place.geometry.location 
     }); 

Answer 1

私はあなたが作ったjqueryのコードを見ることができない、それは同類をどのように見えるかが、ここではあなたのようなまったく同じもののために、バージョンの下にこれを使用することができますあなた：

var map; // initialize 
var center = { // centering maps 
    lat: 30.42130899999999, 
    lng: -87.2169149 
}; 
var markers = []; // store created markes 

// init map 
function initMap() {  

    map = new google.maps.Map(document.getElementById('map'), { 
     center: center, 
     zoom: 15 
    });   
    // at here we call user defined function 
    // for searching nearby places as default value 
    callService(map, 'lodging');  
} 

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 placeLoc = place.geometry.location; 
    var marker = new google.maps.Marker({ 
     map: map, 
     position: place.geometry.location 
    });  
    markers.push(marker); 
} 
// user defined function to search for places 
function callService(map, place) { 
    var service = new google.maps.places.PlacesService(map); 
    service.nearbySearch({ 
     location: center, 
     radius: 500, 
     type: [place] 
    }, callback); 
} 
// clearing marker for each updated places 
// if we didnt make this, then all the previous marker 
// still showing up on maps 
function clearMarker() { 
    for(var i = 0; i < markers.length; i++) { 
    markers[i].setMap(null); 
    } 
} 

$(function() { 
    // click handler for each radio button 
    $('.place-types :radio').click(function() {   
     var plc = $(this).val(); 
     // clear the marker on maps 
     clearMarker(); 
     // updating marker 
     callService(map, plc); 
    }); 

}); 

ワーキングDemo