Question

我制作了一个非常大的自定义谷歌地图代码，其中包含自己的标记和位置，效果非常好。

但是现在我已经找了好几天如何使用有效过滤器获得自定义谷歌地图图例...但我无法得到任何工作。我使用了developers.google.com和更多论坛。我只想要一个简单的check box / legenda，人们可以过滤不同的选项。

这是我的代码的简短版本。

<div id="map" style="width: 100%; height: 420px;margin:10px 0px 30px;">
<div class="container">
<script type="text/javascript">
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 9,
      center: new google.maps.LatLng(36.524500, -4.882175),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var Marbella = new google.maps.LatLng(37.521604, -5.046373);
    var Marbella2 = new google.maps.LatLng(37.558387, -4.929676);

    var marker = new google.maps.Marker({
        position: Marbella,
        url: 'marbella.html',
        title: 'Marbella',
        icon: 'images/...png',
        map: map
    });
    google.maps.event.addListener(marker, 'click', function() {
      window.open(this.url, '_blank');
    });
    var marker = new google.maps.Marker({
        position: Marbella2,
        url: 'marbella2.html',
        title: 'Marbella2',
        icon: 'images/...png',
        map: map
    });
    google.maps.event.addListener(marker, 'click', function() {
      window.open(this.url, '_blank');
    });

    var legend = document.getElementById('legend');
    for (var key in icons) {
      var type = icons[key];
      var name = type.name;
      var icon = type.icon;
      var div = document.createElement('div');
      div.innerHTML = '<img src="' + icon + '"> ' + name;
      legend.appendChild(div);
    }

    map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(legend);
  }
  </script>
</div>
</div>

HEAD中的以下CSS：

<style>
  #legend {
    font-family: Arial, sans-serif;
    background: #fff;
    padding: 10px;
    margin: 10px;
    border: 3px solid #000;
  }
  #legend h3 {
    margin-top: 0;
  }
  #legend img {
    vertical-align: middle;
  }

自定义Google地图图例过滤器

0 个答案: