在谷歌地图中默认显示信息窗口和不同的标记答案

【问题标题】：Display infowindow by default and different markers in Google Maps在谷歌地图中默认显示信息窗口和不同的标记
【发布时间】：2013-05-26 12:18:15
【问题描述】：

我的 HTML：

<div id="map_canvas" style="width: 625px; height: 500px;"></div>

我的 JQuery：

var infowindow = null;
    $(document).ready(function () { initialize();  });

    function initialize() {

        var centerMap = new google.maps.LatLng(40.68194, -73.94439);

        var myOptions = {
            zoom: 13,
            center: centerMap,
            scaleControl: true,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }

        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

        setMarkers(map, sites);
        infowindow = new google.maps.InfoWindow({
                content: "loading...", maxWidth: 150
            });

        //var bikeLayer = new google.maps.BicyclingLayer();
        //bikeLayer.setMap(map);
    }   

    function setMarkers(map, markers) {

        for (var i = 0; i < markers.length; i++) {
            var sites = markers[i];
            var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
            var marker = new google.maps.Marker({
                position: siteLatLng,
                map: map,
                title: sites[0],
                zIndex: sites[3],
                html: sites[4]
            });

            var contentString = "Some content";

            google.maps.event.addListener(marker, "click", function () {
                //alert(this.html);
                infowindow.setContent(this.html);
                infowindow.open(map, this);
            });
        }
    }

我怎样才能实现，

默认在页面加载时显示站点[0]信息气泡。
为地图上的每个标记设置不同的标记。

【问题讨论】：

标签： jquery html google-maps

【解决方案1】：

默认在页面加载时显示站点[0]信息气泡。

infowindow.open(map, site[0]);

在地图上为每个标记设置不同的标记。 假设您指的是不同的标记图像，您可以在创建标记时设置它们，或者简单地稍后致电site[i].setIcon('newImage.png')

参考：Google Maps API v3: How do I dynamically change the marker icon?

【讨论】：

【解决方案2】：

要使用自定义图标，对于一个简单的图标，只需将图标 URL 添加到您的站点数组中，在您的标记定义中使用它。
```
        icon: sites[5]
```

保留对标记的引用：

// in the global scope
var gmarkers = [];



for (var i = 0; i < markers.length; i++) {
    var sites = markers[i];
    var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
    var marker = new google.maps.Marker({
        position: siteLatLng,
        map: map,
        title: sites[0],
        zIndex: sites[3],
        html: sites[4],
        icon: sites[5]
    });
    gmarkers.push(marker);
    var contentString = "Some content";

    google.maps.event.addListener(marker, "click", function () {
        //alert(this.html);
        infowindow.setContent(this.html);
        infowindow.open(map, this);
    });

然后点击第一个标记（这将打开信息窗口）：

google.maps.event.trigger(gmarkers[0], "click");

working example

【讨论】：