Javascript 谷歌地图：如何为自定义标记创建信息窗口？

我正在为一个带有自定义标记的网站制作谷歌地图。标记是制作的，但我需要每个标记的信息框在单击标记时打开。我在网上搜索过，尝试过很多东西，但都不管用

代码如下：

html，body，#map{
宽度：700px；
高度：600px；
边界半径：5px；
左边距：自动；
右边距：自动；
}
#传奇{
字体系列：Arial，无衬线；
背景：#fff；
不透明度：0.85；
填充：10px；
利润率：10px；
边框：1px实心#000；
边界半径：5px；
}
#图例h3{
边际上限：0；
}
#图例img{
垂直对齐：中间对齐；
}
var映射；
函数初始化（）{
map=new google.maps.map（document.getElementById（'map'）{
缩放：12，
中心：新google.maps.LatLng（51.99683352,5.88360088），
mapTypeId:google.maps.mapTypeId.ROADMAP，
});
iconBase变量https://maps.google.com/mapfiles/kml/shapes/';
变量图标={
露营：{
名字：“露营”，
图标：iconBase+“campground\u maps.png”
},
杂货店：{
名称：'超级市场'，
图标：iconBase+“杂货店地图.png”
},
餐饮：{
名称：'餐厅'，
图标：iconBase+“dinging_maps.png”
},
小吃店：{
名称：“Snackbar”，
图标：iconBase+“快餐店地图.png”
},
游泳：{
名称：“Zwembad”，
图标：iconBase+“swiming_maps.png”
},
博物馆：{
名称:"博物馆",，
图标：iconBase+“museum_maps.png”
},
公园：{
名称：'Landgoed'，
图标：iconBase+“parks\u maps.png”
},
医院：{
名称：“齐肯豪斯”，
图标：iconBase+“hospitals\u maps.png”
}
};
功能添加标记（功能）{
var marker=new google.maps.marker({
位置：feature.position，
图标：图标[feature.type]。图标，
地图：地图
});
}
变量特征=[
{
位置：新google.maps.LatLng（52.0072118,5.87047509），
类型：“露营”
}, {
职位：new google.maps.LatLng（52.00030944,5.8805877），
类型：“餐饮”
}, {
位置：新google.maps.LatLng（51.99683352,5.88360088），
类型：“餐饮”
}, {
位置：新google.maps.LatLng（51.962503,5.90451），
类型：“游泳”
}, {
位置：新google.maps.LatLng（51.9956291,5.9225834），
类型：“游泳”
}, {
位置：新google.maps.LatLng（51.98811773,5.89362323），
类型：“杂货店”
}, {
位置：新google.maps.LatLng（51.99012513,5.89376865），
类型：“杂货店”
}, {
位置：新google.maps.LatLng（52.009949,5.906641），
类型：“博物馆”
}, {
位置：新google.maps.LatLng（51.988764,5.901436），
类型：“博物馆”
}, {
位置：新google.maps.LatLng（52.02687639,5.87179417），
类型：“博物馆”
}, {
位置：新google.maps.LatLng（51.987706,5.832719），
类型：“博物馆”
}, {
职位：新google.maps.LatLng（52.03369001，5.86739123），
类型：“公园”
}, {
位置：新google.maps.LatLng（51.9911136,5.8907901），
类型：“快餐店”
}, {
位置：新google.maps.LatLng（52.001069,5.910066），
类型：“医院”
}
];
for（变量i=0，特征；特征=特征[i]；i++）{
添加标记（特征）；
}
var legend=document.getElementById（'legend'）；
用于（变量输入图标）{
变量类型=图标[键]；
var name=type.name；
var icon=type.icon；
var div=document.createElement（'div'）；
div.innerHTML=''+名称；
图例.附件（部门）；
}
map.controls[google.maps.ControlPosition.LEFT_-BOTTOM].push（图例）；
}
google.maps.event.addDomListener（窗口“加载”，初始化）；
传说

您需要为每个标记设置info属性，如下所示

marker.info = new google.maps.InfoWindow({
  content: 'Add some info here'
});

google.maps.event.addListener(marker, 'click', function() {
  marker.info.open(map, marker);
}

您可以而且应该为所有标记重新使用一个信息窗口，但这非常简单

运行下面的代码段进行测试：）

html，
身体，
#地图{
宽度：700px；
高度：600px；
边界半径：5px；
左边距：自动；
右边距：自动；
}
#传奇{
字体系列：Arial，无衬线；
背景：#fff；
不透明度：0.85；
填充：10px；
利润率：10px；
边框：1px实心#000；
边界半径：5px；
}
#图例h3{
边际上限：0；
}
#图例img{
垂直对齐：中间对齐；
}
var映射；
函数初始化（）{
map=new google.maps.map（document.getElementById（'map'）{
缩放：12，
中心：新google.maps.LatLng（51.99683352,5.88360088），
mapTypeId:google.maps.mapTypeId.ROADMAP，
});
iconBase变量https://maps.google.com/mapfiles/kml/shapes/';
变量图标={
露营：{
名字：“露营”，
图标：iconBase+“campground\u maps.png”
},
杂货店：{
名称：'超级市场'，
图标：iconBase+“杂货店地图.png”
},
餐饮：{
名称：'餐厅'，
图标：iconBase+“dinging_maps.png”
},
小吃店：{
名称：“Snackbar”，
图标：iconBase+“快餐店地图.png”
},
游泳：{
名称：“Zwembad”，
图标：iconBase+“swiming_maps.png”
},
博物馆
 for (i = 0; i < latitude_longitude_array.length; i++) {      
        var data = latitude_longitude_array[i];
        var myLatlng = new google.maps.LatLng(data.latitude, data.longitude);

        var marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
        });

        var geocoder = new google.maps.Geocoder();
            (function (marker, data) {
                geocoder.geocode(
                                {
                                    'latLng': myLatlng
                                },
                                function (results, status) {

                                    if (status == google.maps.GeocoderStatus.OK) {
                                        if (results[1]) {
                                            var infoWindow = new google.maps.InfoWindow();      

                                            infoWindow.setContent("Address" + ": " + results[1].formatted_address + " ");    

                                            google.maps.event.addListener(marker, "click", function (e) {
                                                infoWindow.open(map, marker);
                                            });
                                        }
                                        else {
                                            alert("No results found");
                                        }
                                    }
                                    else {
                                        alert("Geocoder failed due to: " + status);
                                    }
                                });
            })(marker, data);
    } //end of for