Google Maps API v3 - 自定义信息框

Question

我正在通过 Google Maps API 工作，并且到目前为止有以下内容：

var infowindow = null;

$(document).ready(function () { initialize();  });

function initialize() {

    var centerMap = new google.maps.LatLng(39.828175, -98.5795);

    var myOptions = {
        zoom: 4,
        center: centerMap,
        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..."
        });

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

var sites = [
    ['Mount Evans', 39.58108, -105.63535, 4, 'This is Mount Evans.'],
    ['Irving Homestead', 40.315939, -105.440630, 2, 'This is the Irving Homestead.'],
    ['Badlands National Park', 43.785890, -101.90175, 1, 'This is Badlands National Park'],
    ['Flatirons in the Spring', 39.99948, -105.28370, 3, 'These are the Flatirons in the spring.']
];



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);
        });
    }
}

我尝试创建一个Fiddle，但它没有显示出来。

所以，地图支持多个位置和信息框，但我仍然很困惑的部分是自定义信息框。我进行了一些搜索并看到了this question/answer，但我无法准确理解它是如何工作的。所以，假设我有我的#map_canvas 地图，然后在此之外，我有一个现有的#info div（我希望加载每个信息框）。所以 - 样式没有在 Google Maps API 中定义，它是一个现有的元素，应该作为信息框。

是否有人能够推动我（或者在这种情况下，推动一下会很棒）以帮助我更好地理解如何做到这一点？可以在here 找到我的想法的快速屏幕截图。地图顶部的深红色框是目标。

自定义标记和“活动”状态（所选标记的金色图标）也是另一个挑战，但我还没有放弃对这些的所有希望。任何帮助将不胜感激。谢谢！

Answer 1

已经有一段时间了，但这应该可以。

创建标记时，将要附加的任何数据附加到此标记。

这里是使用 setMarkers 函数。很高兴你添加了它（想知道你的循环在哪里）

在 html 中有你的 div 来获取这些数据，比如

 <div id="myDivID"></div>

在你的 js 中添加对它的引用并在那里插入 html

function setMarkers(map, markers) {
    var myContentDiv = document.getElementById('myDivID');//Reference to you DOM elem  

    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";
        //marker.xtraData = 'SomeExtraData';//You can even add more data this way

        google.maps.event.addListener(marker, "click", function () {
            //alert(this.html);
            var myTemplate = '<h1>'+this.title+'<h1><p>'+this.html+'</p>';

            myContentDiv.innerHTML = myTemplate;//Inset this html inside link
            //infowindow.setContent(this.html);
            //infowindow.open(map, this);
        });
    }
}

根据您的工作，您可能还想查看传单。它比移动浏览器上的谷歌地图快很多，而且比ios6地图更好。呵呵。