将图像添加到 Google Maps API 中的信息窗口标记选项答案

【问题标题】：Adding an image to an info window markerOptions in Google Maps API将图像添加到 Google Maps API 中的信息窗口标记选项
【发布时间】：2014-10-24 03:07:27
【问题描述】：

我有一个要添加的点数组：

var arr1 = [
                [40.664171,-73.983886,"410 7th Ave, Brooklyn, NY, 11215", '<IMG BORDER="0" ALIGN="Left" SRC="images/ShotGlass.png">'],
                [40.661113,-73.990103,"652 6th Ave, Brooklyn, NY, 11215", '<IMG BORDER="0" ALIGN="Left" SRC="images/ShotGlass.png">']
            ];

我的 markerOptions 目前看起来像：

                var markerOptions = {
                    position: markerLocation,
                    map: map,
                    title:arr1[i][2],
                    icon: "ShotGlass.png"
                };

当前单击标记时的输出是地址（例如：410 7th Ave, Brooklyn, NY, 11215），如果设置了 title:arr1[i][2]，如果设置为，则输出一个小玻璃图片标题：arr1[i][3]。

我怎样才能得到它，以便地址后跟信息窗口中的图像？

谢谢。

这里是完整的代码：

<html>
    <head>
        <title>Shot Glass Map</title>
        <link rel="shortcut icon" href="ShotGlass.png">

        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=(Key left out of post)&sensor=false">
        </script>

        <script type="text/javascript">

            var centerLocation = new google.maps.LatLng(39.810456, -98.555407);
            var mapType = google.maps.MapTypeId.ROADMAP;
            var mapOptions = {
                center: centerLocation,
                zoom: 5,
                mapTypeId: mapType
            };

            var arr1 = [
                [41.118459, -75.007712,"Buskhill Falls", '<IMG BORDER="0" ALIGN="Left" SRC="images/BushkillFalls.jpg">'],
                [40.661113,-73.990103,"652 6th Ave, Brooklyn, NY, 11215", '<IMG BORDER="0" ALIGN="Left" SRC="images/ShotGlass.png">']
            ];  

            function initialize() {
                var divElement = document.getElementById("map_canvas");

                var map = new google.maps.Map(divElement, mapOptions);

                for (var i=0; i<arr1.length; i++) {

                    var markerLocation = new google.maps.LatLng(arr1[i][0],arr1[i][1]);

                    var markerOptions = {
                        position: markerLocation,
                        map: map,
                        title:arr1[i][2],
                        icon: "ShotGlass.png"
                    };


                    var marker = new google.maps.Marker(markerOptions);

                    var infoWindowOptions = {
                        //content: "<strong>Hello</strong> World",
                        //content: "Central Park <br/> <a href='http://en.wikipedia.org/wiki/Central_Park'>Wikipedia</a> <br/> <img src='http://upload.wikimedia.org/wikipedia/commons/thumb/0/05/Southwest_corner_of_Central_Park%2C_looking_east%2C_NYC.jpg/240px-Southwest_corner_of_Central_Park%2C_looking_east%2C_NYC.jpg' />"
                        content:arr1[i][2],
                        maxWidth: 200
                    };

                var infoWindow = new google.maps.InfoWindow(infoWindowOptions);

                google.maps.event.addListener(marker, 'click', function(){
                    infoWindow.setContent(this.title);
                    infoWindow.open(map,this);
                } );
                }

                for (var i=0; i<arr2.length; i++) {

                    var markerLocation = new google.maps.LatLng(arr2[i][0],arr2[i][1]);

                    var markerOptions = {
                        position: markerLocation,
                        map: map,
                        title:arr2[i][2],
                        icon: "latte.png"
                    };


                    var marker = new google.maps.Marker(markerOptions);

                    var infoWindowOptions = {
                        //content: "<strong>Hello</strong> World",
                        //content: "Central Park <br/> <a     

href='http://en.wikipedia.org/wiki/Central_Park'>Wikipedia</a> <br/> <img src='http://upload.wikimedia.org/wikipedia/commons/thumb/0/05/Southwest_corner_of_Central_Park%2C_looking_east%2C_NYC.jpg/240px-Southwest_corner_of_Central_Park%2C_looking_east%2C_NYC.jpg' />"
                    content:arr2[i][2]
                    };

                var infoWindow = new google.maps.InfoWindow(infoWindowOptions);

                google.maps.event.addListener(marker, 'click', function(){
                    infoWindow.setContent(this.title);
                    infoWindow.open(map,this);
                } );
                }               
            }

        </script>
    </head>

    <body onload="initialize()">
        <div id="map_canvas" style="width:100%; height:100%">
        </div>
    </body>
</html>

【问题讨论】：

信息窗口的代码是什么样的？请提供Minimal, Complete, Tested and Readable example。
@geocodezip 我已经在我的帖子底部发布了我的完整代码，我对此很陌生，其中很多来自我参加的课程。

标签： google-maps google-maps-api-3 infowindow

【解决方案1】：

function setInfoWindows(marker, index) {
                var infowindow = new google.maps.InfoWindow({
                    content: arr1[index][2]
                });

                google.maps.event.addListener(marker, 'click', function() {
                    infowindow.open(marker.get('map'), marker);
                });
            }
         function initialize() {
                        var divElement = document.getElementById("map_canvas");

                        var map = new google.maps.Map(divElement, mapOptions);
                        var marker=[];
                        for (var i=0; i<arr1.length; i++) {

                            var markerLocation = new google.maps.LatLng(arr1[i][0],arr1[i][1]);

                            var markerOptions = {
                                position: markerLocation,
                                map: map,
                                //title:arr1[i][2],
                                icon: "ShotGlass.png"
                            };


                            marker[i] = new google.maps.Marker(markerOptions);

                            setInfoWindows(marker[i], i);

                        }

对不起朋友不能给你解释，我不懂英语。我觉得很明显

【讨论】：