如何显示信息窗口?

时间:2013-08-17 14:07:10

标签: google-maps

大家好,我们一直在努力解决这个问题。单击标记

后,我看不到信息窗口
<script type="text/javascript">

function initialize() { //Initalize JS after onload
var map = new google.maps.Map(document.getElementById('map_canvas'), { 
 mapTypeId: google.maps.MapTypeId.ROADMAP,
});




var randomPoint0 = new google.maps.LatLng(18.9750, 72.8258); //First Location


var marker0 = new google.maps.Marker({ //Set up marker
       position: randomPoint0,
       map: map
    });

google.maps.event.addDomListener(document.getElementById('locationid0'), 'click', //Set up DOM listener 1
    function(){
        map.setZoom(13);
     map.setCenter(marker0.getPosition());  
    });


var randomPoint1 = new google.maps.LatLng(19.8833, 76.7833); //First Location


var marker1 = new google.maps.Marker({ //Set up marker
       position: randomPoint1,
       map: map
    });

google.maps.event.addDomListener(document.getElementById('locationid1'), 'click', //Set up DOM listener 1
    function(){
        map.setZoom(13);
     map.setCenter(marker1.getPosition());  
    });


var randomPoint2 = new google.maps.LatLng(25.6000, 85.1167); //First Location


var marker2 = new google.maps.Marker({ //Set up marker
       position: randomPoint2,
       map: map
    });

google.maps.event.addDomListener(document.getElementById('locationid2'), 'click', //Set up DOM listener 1
    function(){
        map.setZoom(13);
     map.setCenter(marker2.getPosition());  
    });


var randomPoint3 = new google.maps.LatLng(18.5333, 73.8667); //First Location


var marker3 = new google.maps.Marker({ //Set up marker
       position: randomPoint3,
       map: map
    });

google.maps.event.addDomListener(document.getElementById('locationid3'), 'click', //Set up DOM listener 1
    function(){
        map.setZoom(13);
     map.setCenter(marker3.getPosition());  
    });


var randomPoint4 = new google.maps.LatLng(22.3000, 70.7833); //First Location


var marker4 = new google.maps.Marker({ //Set up marker
       position: randomPoint4,
       map: map
    });

google.maps.event.addDomListener(document.getElementById('locationid4'), 'click', //Set up DOM listener 1
    function(){
        map.setZoom(13);
     map.setCenter(marker4.getPosition());  
    });


var randomPoint5 = new google.maps.LatLng(17.8625, 78.886); //First Location


var marker5 = new google.maps.Marker({ //Set up marker
       position: randomPoint5,
       map: map
    });

google.maps.event.addDomListener(document.getElementById('locationid5'), 'click', //Set up DOM listener 1
    function(){
        map.setZoom(13);
     map.setCenter(marker5.getPosition());  
    });


var randomPoint6 = new google.maps.LatLng(13.0833, 80.2833); //First Location


var marker6 = new google.maps.Marker({ //Set up marker
       position: randomPoint6,
       map: map
    });

google.maps.event.addDomListener(document.getElementById('locationid6'), 'click', //Set up DOM listener 1
    function(){
        map.setZoom(13);
     map.setCenter(marker6.getPosition());  
    });


var randomPoint7 = new google.maps.LatLng(28.6167, 77.2167); //First Location


var marker7 = new google.maps.Marker({ //Set up marker
       position: randomPoint7,
       map: map
    });

google.maps.event.addDomListener(document.getElementById('locationid7'), 'click', //Set up DOM listener 1
    function(){
        map.setZoom(13);
     map.setCenter(marker7.getPosition());  
    });


var randomPoint8 = new google.maps.LatLng(19.9833, 73.8000); //First Location


var marker8 = new google.maps.Marker({ //Set up marker
       position: randomPoint8,
       map: map
    });

google.maps.event.addDomListener(document.getElementById('locationid8'), 'click', //Set up DOM listener 1
    function(){
        map.setZoom(13);
     map.setCenter(marker8.getPosition());  
    });


var randomPoint9 = new google.maps.LatLng(30.7343, 76.7933); //First Location


var marker9 = new google.maps.Marker({ //Set up marker
       position: randomPoint9,
       map: map
    });

google.maps.event.addDomListener(document.getElementById('locationid9'), 'click', //Set up DOM listener 1
    function(){
        map.setZoom(13);
     map.setCenter(marker9.getPosition());  
    });


var randomPoint10 = new google.maps.LatLng(22.5697, 88.3697); //First Location


var marker10 = new google.maps.Marker({ //Set up marker
       position: randomPoint10,
       map: map
    });

google.maps.event.addDomListener(document.getElementById('locationid10'), 'click', //Set up DOM listener 1
    function(){
        map.setZoom(13);
     map.setCenter(marker10.getPosition());  
    });




    map.setCenter(marker0.getPosition());
    map.setZoom(5);

 var info = message;

        var infoWindow = new google.maps.InfoWindow({
            content: message
        });

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


}



</script>

这是我的链接 http://www.safarikidindia.com/safari-map.php#

所有标记引脚都是动态的,所以我可以显示地址文本,请你指点一下

1 个答案:

答案 0 :(得分:1)

您需要为每个标记设置一个infoWindow!

假设您有10个不同的消息,存储在10个变量(message0,message1,message2,...)中,您应该写:

    var infoWindow0 = new google.maps.InfoWindow({
        content: message0
    });

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


    var infoWindow1 = new google.maps.InfoWindow({
        content: message1
    });

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


    var infoWindow2 = new google.maps.InfoWindow({
        content: message2
    });

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

...(and so on until marker10)