在谷歌地图上的不同位置添加不同的标记图标

时间:2015-01-19 17:02:40

标签: javascript google-maps

如何在Google地图上的每个不同位置添加不同的图标?我可以为所有地方添加一个图标。但是我需要它们的图标来改变每个位置。

这是我的代码:

<script type="text/javascript">
        var locations = [
          ['Doune Castle', 56.185096, -4.050264, 1],
          ['Holyrood Palace', 55.952715, -3.172270, 2],
          ['Royal Mile', 55.950336, -3.186347, 3],
          ['Blackness Castle', 56.005865, -3.516252, 4],
          ['Urquhart Castle', 57.324140, -4.442001, 5],
          ['Loch Ness', 57.322857, -4.424382, 6],
          ['Culloden Battlefield', 57.477790, -4.095711, 7],
          ['Clava Cairns, Inverness', 57.473366, -4.071808, 8]
        ];

        var image = '<?php bloginfo('template_url'); ?>/images/kilt-pin.png';

        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 8,
          center: new google.maps.LatLng(56.490671, -4.202646),
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        var infowindow = new google.maps.InfoWindow();

        var marker, i;

        for (i = 0; i < locations.length; i++) {
          marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            map: map,
            icon: image
          });

          google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
              infowindow.setContent(locations[i][0]);
              infowindow.open(map, marker);
            }
          })(marker, i));
        }
      </script>

有什么想法吗?

你可以看到我做过的事情:

http://temp62.clrs-hosting.co.uk/outlander-tours/

的Slaínte!

1 个答案:

答案 0 :(得分:0)

将一些图像位置URL放在相应位置的locations数组中。然后使用相同的索引在循环内访问它们。