Javascript 谷歌地图API 3-信息窗口问题

我需要添加什么&在哪里-使用我的var位置txt使我的标记弹出信息窗口

    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>

var map;
var brooklyn = new google.maps.LatLng(48.1391265, 11.580186300000037);

var MY_MAPTYPE_ID = 'custom_style';

function initialize() {


  var mapOptions = {
    zoom: 2,
    center: new google.maps.LatLng(48.1391265, 11.580186300000037),
    disableDefaultUI: true,
    mapTypeControl: true,
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
    },
    zoomControl: true,
    panControl: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
        styles: [ { stylers: [ { hue: "#098AAD" } ] } ]

  }
  var map = new google.maps.Map(document.getElementById('map-canvas'),
                                mapOptions);

  setMarkers(map, locations);
}

var locations = [
  ['Plano TX', 33.01984, -96.69889, 13],
  ['Hemel Hempstead UK', 51.75324, -0.44863, 12],
  ['Dubai', 25.27114, 55.30748, 11],
  ['San Francisco CA', 37.77493, -122.41942, 10],
  ['Chicago IL', 41.87811, -87.62980, 9],
  ['New York NY', 40.71435, -74.00597, 8],
  ['Troy MI', 42.60559, -83.14993, 7],
  ['Santa Monica CA', 34.01945, -118.49119, 6],
  ['St Peters MO', 38.78747, -90.62989, 5],
  ['Pittsford NY', 43.09062, -77.51500, 4],
  ['Las Vegas NV', 36.11465, -115.17282, 3],
  ['Haidian Beijing', 39.95991, 116.29805, 2],
  ['New Delhi', 28.63531, 77.22496, 1]
];

function setMarkers(map, locations) {

  var image = {
    url: 'images/marker-rmg.png',
    size: new google.maps.Size(32, 32),
    origin: new google.maps.Point(0,0),
    anchor: new google.maps.Point(16, 32)
  };

  var shape = {
      coord: [1, 1, 1, 20, 18, 20, 18 , 1],
      type: 'poly'
  };
  for (var i = 0; i < locations.length; i++) {
    var location = locations[i];
    var myLatLng = new google.maps.LatLng(location[1], location[2]);
    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        icon: image,
        shape: shape,
        title: location[0],
        zIndex: location[3]
    });
  }
}
google.maps.event.addDomListener(window, 'load', initialize);
    </script>
    <div id="map-canvas" style="height: 300px;"></div>

var映射；
var brooklyn=newgoogle.maps.LatLng（48.139126511.58018630000037）；
var MY_MAPTYPE_ID='custom_style'；
函数初始化（）{
变量映射选项={
缩放：2，
中心：新google.maps.LatLng（48.139126511.58018630000037），
disableDefaultUI:true，
mapTypeControl:true，
mapTypeControlOptions：{
样式：google.maps.MapTypeControlStyle.DROPDOWN_菜单
},
动物控制：对，
泛控制：对，
mapTypeId:google.maps.mapTypeId.ROADMAP，
样式：[{stylers:[{hue:{098AAD}]}]
}
var map=new google.maps.map（document.getElementById（'map-canvas'），
地图选项）；
设置标记（地图、位置）；
}
变量位置=[
[Plano TX'，33.01984，-96.69889,13]，
[Hemel Hempstead UK'，51.75324，-0.44863,12]，
[Dubai'，25.27114,55.30748,11]，
[San Francisco CA'，37.77493，-122.41942,10]，
[Chicago IL'，41.87811，-87.62980,9]，
[New York NY'，40.71435，-74.00597,8]，
[Troy MI'，42.60559，-83.14993,7]，
[Santa Monica CA'，34.01945，-118.49119,6]，
[St Peters MO'，38.78747，-90.62989,5]，
[Pittsford NY'，43.09062，-77.51500,4]，
[Las Vegas NV'，36.11465，-115.17282,3]，
[Haidian Beijing'，39.95991116.29805,2]，
[“新德里”，28.63531，77.22496，1]
];
功能设置标记（地图、位置）{
变量图像={
url:'images/marker rmg.png'，
大小：新的google.maps.size（32,32），
来源：新google.maps.Point（0,0），
主播：新google.maps.Point（16,32）
};
变量形状={
坐标：[1,1,1,20,18,20,18,1]，
类型：“poly”
};
对于（变量i=0；i

您需要将单击事件绑定到标记，即在创建标记后，您需要将它们存储在一个数组中。然后添加下面的代码

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



var infowindow = new google.maps.InfoWindow({
  content:"Any content or latitude longitude info"
});

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

这里有点棘手，即如果有多个标记，则需要相应地构建

marker

变量。在您的情况下，您可以将for循环计数器“i”附加到marker变量（如marker_uu+i），然后在同一循环中的这些变量上触发click事件。

创建全局变量（或在

setMarkers

函数中），

信息窗口

：

 var infowindow =  new google.maps.InfoWindow({
            content: ""
        });

然后在循环中调用新函数，传递所需的各种参数：

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

    bindInfoWindow(marker, map, infowindow, location[0]);
  }

更新：这是我将使用的完整代码

<script>
    var map;
    var brooklyn = new google.maps.LatLng(48.1391265, 11.580186300000037);

    var MY_MAPTYPE_ID = 'custom_style';

    var locations = [
        ['Plano TX', 33.01984, -96.69889, 13],
        ['Hemel Hempstead UK', 51.75324, -0.44863, 12],
        ['Dubai', 25.27114, 55.30748, 11],
        ['San Francisco CA', 37.77493, -122.41942, 10],
        ['Chicago IL', 41.87811, -87.62980, 9],
        ['New York NY', 40.71435, -74.00597, 8],
        ['Troy MI', 42.60559, -83.14993, 7],
        ['Santa Monica CA', 34.01945, -118.49119, 6],
        ['St Peters MO', 38.78747, -90.62989, 5],
        ['Pittsford NY', 43.09062, -77.51500, 4],
        ['Las Vegas NV', 36.11465, -115.17282, 3],
        ['Haidian Beijing', 39.95991, 116.29805, 2],
        ['New Delhi', 28.63531, 77.22496, 1]
    ];

     function bindInfoWindow(marker, map, infowindow, strDescription) {
        google.maps.event.addListener(marker, 'click', function() {
            infowindow.setContent(strDescription);
            infowindow.open(map, marker);
        });
    }

    function setMarkers(map, locations) {
        var infowindow =  new google.maps.InfoWindow({
            content: ""
        });
        var image = {
            url: 'images/marker-rmg.png',
            size: new google.maps.Size(32, 32),
            origin: new google.maps.Point(0,0),
            anchor: new google.maps.Point(16, 32)
        };

        var shape = {
            coord: [1, 1, 1, 20, 18, 20, 18 , 1],
            type: 'poly'
        };

        var i, location, myLatLng, marker;

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

            bindInfoWindow(marker, map, infowindow, location[0]);
        }
    }

    function initialize() {
        var mapOptions = {
            zoom: 2,
            center: new google.maps.LatLng(48.1391265, 11.580186300000037),
            disableDefaultUI: true,
            mapTypeControl: true,
            mapTypeControlOptions: {
                style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
            },
            zoomControl: true,
            panControl: true,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            styles: [ { stylers: [ { hue: "#098AAD" } ] } ]
        };
        map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

        setMarkers(map, locations);
    }

    google.maps.event.addDomListener(window, 'load', initialize);
</script>

var映射；
var brooklyn=newgoogle.maps.LatLng（48.139126511.58018630000037）；
var MY_MAPTYPE_ID='custom_style'；
变量位置=[
[Plano TX'，33.01984，-96.69889,13]，
[Hemel Hempstead UK'，51.75324，-0.44863,12]，
[Dubai'，25.27114,55.30748,11]，
[San Francisco CA'，37.77493，-122.41942,10]，
[Chicago IL'，41.87811，-87.62980,9]，
[New York NY'，40.71435，-74.00597,8]，
[Troy MI'，42.60559，-83.14993,7]，
[Santa Monica CA'，34.01945，-118.49119,6]，
[St Peters MO'，38.78747，-90.62989,5]，
[Pittsford NY'，43.09062，-77.51500,4]，
[Las Vegas NV'，36.11465，-115.17282,3]，
[Haidian Beijing'，39.95991116.29805,2]，
[“新德里”，28.63531，77.22496，1]
];
函数bindInfoWindow（标记、映射、信息窗口、strDescription）{
google.maps.event.addListener（标记'click'，函数（）{
infowindow.setContent（strDescription）；
信息窗口。打开（地图、标记）；
});
}
功能设置标记（地图、位置）{
var infowindow=new google.maps.infowindow({
内容：“”
});
变量图像={
url:'images/marker rmg.png'，
大小：新的google.maps.size（32,32），
来源：新google.maps.Point（0,0），
主播：新google.maps.Point（16,32）
};
变量形状={
坐标：[1,1,1,20,18,20,18,1]，
类型：“poly”
};
变量i、位置、myLatLng、标记；
对于（i=0；i

Hi Duncan-你能把这个（上面）添加到我的代码中吗？我似乎在与它斗争&它不起作用（不是一个强大的程序员）我添加了更多的代码，试试看谢谢邓肯。。。我的大脑可能在某个地方坏掉了，因为它根本没有显示地图：（忽略这一点……我是个傻瓜——非常好！非常感谢

<script>
    var map;
    var brooklyn = new google.maps.LatLng(48.1391265, 11.580186300000037);

    var MY_MAPTYPE_ID = 'custom_style';

    var locations = [
        ['Plano TX', 33.01984, -96.69889, 13],
        ['Hemel Hempstead UK', 51.75324, -0.44863, 12],
        ['Dubai', 25.27114, 55.30748, 11],
        ['San Francisco CA', 37.77493, -122.41942, 10],
        ['Chicago IL', 41.87811, -87.62980, 9],
        ['New York NY', 40.71435, -74.00597, 8],
        ['Troy MI', 42.60559, -83.14993, 7],
        ['Santa Monica CA', 34.01945, -118.49119, 6],
        ['St Peters MO', 38.78747, -90.62989, 5],
        ['Pittsford NY', 43.09062, -77.51500, 4],
        ['Las Vegas NV', 36.11465, -115.17282, 3],
        ['Haidian Beijing', 39.95991, 116.29805, 2],
        ['New Delhi', 28.63531, 77.22496, 1]
    ];

     function bindInfoWindow(marker, map, infowindow, strDescription) {
        google.maps.event.addListener(marker, 'click', function() {
            infowindow.setContent(strDescription);
            infowindow.open(map, marker);
        });
    }

    function setMarkers(map, locations) {
        var infowindow =  new google.maps.InfoWindow({
            content: ""
        });
        var image = {
            url: 'images/marker-rmg.png',
            size: new google.maps.Size(32, 32),
            origin: new google.maps.Point(0,0),
            anchor: new google.maps.Point(16, 32)
        };

        var shape = {
            coord: [1, 1, 1, 20, 18, 20, 18 , 1],
            type: 'poly'
        };

        var i, location, myLatLng, marker;

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

            bindInfoWindow(marker, map, infowindow, location[0]);
        }
    }

    function initialize() {
        var mapOptions = {
            zoom: 2,
            center: new google.maps.LatLng(48.1391265, 11.580186300000037),
            disableDefaultUI: true,
            mapTypeControl: true,
            mapTypeControlOptions: {
                style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
            },
            zoomControl: true,
            panControl: true,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            styles: [ { stylers: [ { hue: "#098AAD" } ] } ]
        };
        map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

        setMarkers(map, locations);
    }

    google.maps.event.addDomListener(window, 'load', initialize);
</script>