2017-08-08 16 views
0

私はロサンゼルスに4つの都市があり、5つのラジオボタンがあります。各マーカーをクリックすると、特定のマーカーを表示または非表示にするか、すべてのマーカーを表示します。 ?ラジオボタンを使用してGoogleマップのマーカーを切り替える

ここでコード

var map; 
    function initMap() { 
    map = new google.maps.Map(document.getElementById('map'), { 
     center: {lat: 34.052235, lng: -118.243683}, 
     zoom: 11 
    }); 
    setMarkers(map); 
    } 

    var cities = [ 
     ['Compton Los Angeles', 33.895847, -118.220070], 
     ['Huntington Los Angeles', 33.984932, -118.227821], 
     ['Los Angeles International Airport',33.942791, -118.410042], 
     ['Beverly Hills Los Angeles',34.073620, -118.400352] 
    ]; 

    function setMarkers(map) { 
     for (var i = 0; i < cities.length; i++) { 
      var city = cities[i]; 
      var marker = new google.maps.Marker({ 
       position: {lat: city[1], lng: city[2]}, 
       map: map 
      }); 
     } 
    } 

<input id="compton" type="radio" name="city" checked="checked"> 
<input id="huntington" type="radio" name="city"> 
<input id="losangeles" type="radio" name="city"> 
<input id="beverlyhills" type="radio" name="city"> 
<input id="showall" type="radio" name="city"> 

答えて

3
  google.maps.event.addListener(marker, 'click', function() { 
       // Show\hide radio-btns 
       document.getElementById("showall").style.display = 'none'; 
       document.getElementById("compton").style.display = 'inline'; 
       // Hide marker 
       this.setVisible(false); // maps API hide call 
       // or 
       markers[2].setVisible(false); 
      }); 

JSFiddleです:それは、マーカー上のonclickイベントを追加する方法ですhttp://jsfiddle.net/4a87k/857/(更新)

adding-an-onclick-event-to-google-map-marker

+0

クリックした場合のマーカーが非表示になりますマーカー、ラジオボタンをクリックすると、特定のマーカーが表示されます。 – Jemai

+0

@ Jemaiあなたはより良い質問を書くべきです))大丈夫。私はJsFiddleのコードを書き直しました[http://hs](http://jsfiddle.net/4a87k/857/) – Constantine

+0

ええええええと!とにかくそれは感謝の仲間を働く! – Jemai

関連する問題