Unable to open Infowindow on Map Pan

2023-04-06 02:36 问答作者：

I'm using the code below to link an HTML list to markers on a map. When I click on the markers, the InfoWindow opens without any problem. However when I click on the list item, although the map pans correctly and centres on the appropriate marker, I cannot get the InfoWindow to open at the same time.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Map My Finds - All Locations</title>
        <link rel="stylesheet" href="css/mylocations.css" type="text/css" media="all" />
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=en"></script>
    <style>
    div#locationslist div{     
    cursor:pointer; } 
    </style>    

        <div id="map"></div> 
        <div id="locationslist"></div> 

        <body onload="showLocations()"> 

            <script type="text/javascript"> 

                var map; 
                var gmarkers = new Array();
                var locationslist;

                function showLocations() { 
                map = new google.maps.Map(document.getElementById("map"), { 
                center: new google.maps.LatLng(54.312195845815246,-4.45948481875007), 
                zoom:6, 
                mapTypeId: 'terrain' 
                }); 
                var infoWindow = new google.maps.InfoWindow; 

                // Change this depending on the name of your PHP file 
                downloadUrl("loadmylocations.php", function(data) { 
                var xml = data.responseXML; 
                gmarkers = xml.documentElement.getElementsByTagName("marker"); 
                var bounds = new google.maps.LatLngBounds(); 
                for (var i = 0; i < gmarkers.length; i++) { 
                var locationname = gmarkers[i].getAttribute("locationname"); 
                var address = gmarkers[i].getAttribute("address"); 
                var locationid = gmarkers[i].getAttribute("locationid"); 
                var point = new google.maps.LatLng( 
                parseFloat(gmarkers[i].getAttribute("osgb36lat")), 
                parseFloat(gmarkers[i].getAttribute("osgb36lon"))); 
                var html = "<b>" + locationname + "</b> <br/>" + address; 
                bounds.extend(point);  
                var marker = new google.maps.Marker({ 
                map: map, 
                position: point, 
                locationid: locationid 
                }); 
                bindInfoWindow(marker, map, infoWindow, html);  
                locationslist += "<div onclick=scrollToMarker(" + i + ")>"+locationname+"</div>"; 
                }        
                map.setCenter(bounds.getCenter()); 
                map.fitBounds(bounds);  
                //display company data in html 
                document.getElementById("locationslist").innerHTML = locationslist; 
                });  
                } 

                function scrollToMarker(index) {  
                var point = new google.maps.LatLng( 
                parseFloat(gmarkers[index].getAttribute("osgb36lat")),  
                parseFloat(gmarkers[index].getAttribute("osgb36lon")) 
                ); 
                map.panTo(point);  
                } 

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

                function downloadUrl(url, callback) { 
                var request = window.ActiveXObject ? 
                new ActiveXObject('Microsoft.XMLHTTP') : 
                new XMLHttpRequest; 

                request.onreadystatechange = function() { 
                if (request.readyState == 4) { 
                request.onreadystatechange = doNothing; 
                callback(request, request.status); 
                } 
                }; 

                request.open('GET', url, true); 
                request.send(null); 
                } 
                function doNothing(){ 
                } 

                </script> 
                </head>    
                </body> 
                </html>

UPDATED CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Map My Finds - All Locations</title> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=en"></script> 
<style> 
    div#locationslist div{cursor:pointer; }  
    html { height: 100% } 
    body { height: 100%; margin: 0; padding: 0 } 
    #map { height: 70%; width:70% } 
</style>     

<script type="text/javascript">  
var map;  
var gmarkers = []; 
var locationslist = ""; 
var arrMarkers = [];    // add our markers to this array 

function showLocations() {  
    map = new google.maps.Map(document.getElementById("map"), {  
        center: new google.maps.LatLng(54.312195845815246,-4.45948481875007),  
        zoom:6,  
        mapTypeId: google.maps.MapTypeId.TERRAIN 
    });  
    var infoWindow = new google.maps.InfoWindow;  
      downloadUrl("loadmylocations.php", function(data) { 
                var xml = data.responseXML; 
                gmarkers = xml.documentElement.getElementsByTagName("marker"); 
    var bounds = new google.maps.LatLngBounds();  
    for (var i = 0; i < gmarkers.length; i++) {  
        var locationname = gmarkers[i]["locationname"];  
        var address = gmarkers[i]["address"];  
        //var locationid = gmarkers[i]["locationid"];  
        var point = new google.maps.LatLng(  
            parseFloat(gmarkers[i]["osgb36lat"]),  
            parseFloat(gmarkers[i]["osgb36lon"]));  
        var html = "<b>" + locationname + "</b> <br/>" + address;  
        bounds.extend(point);   
        var marker = new google.maps.Marker({  
            map: map,  
            position: point 
        });  

        arrMarkers.push(marker); 

        bindInfoWindow(marker, map, infoWindow, html);   
        locationslist += "<div onclick=scrollToMarker(" + i + ")>"+locationname+"</div>";  
    } 
    map.setCenter(bounds.getCenter());  
    map.fitBounds(bounds);   
    //display company data in html  
    document.getElementById("locationslist").innerHTML = locationslist;  
 });  
                }  

function scrollToMarker(index) {   
    var point = new google.maps.LatLng(  
        parseFloat(gmarkers[index]["osgb36lat"]),   
        parseFloat(gmarkers[index]["osgb36lon"])  
    );  

    map.panTo(point);  

    google.maps.event.trigger(arrMarkers[index], 'click');  
}  

function bindInfoWindow(marker, map, infoWindow, html) {  
    google.maps.event.addListener(marker, 'click', function() {  
        infoWindow.setContent(html);  
        infoWindow.open(map, marker);  
    });  
}  
</script>  
</head> 
<body onload="showLocations()">  
    <div id="map"></开发者_如何学Godiv>  
    <div id="locationslist"></div>   
</body>  
</html>

You've binded the click event on the marker to open an infowindow. What you want to do is trigger that click, i.e. as if the user had done it themselves.

Something like this:

google.maps.event.trigger(marker, 'click');

The hard part will be for you to identify which marker the click event is firing on. Suggest you have an array of all your markers. At the same time as you call scrollToMarker, also do this trigger, and pass through the index parameter too, to identify which marker in your array you're wanting to 'click'

Update: ok, here's a working example of what I mean. I've removed your Ajax request part and put in some dummy marker data, but it should be simple enough for you to figure out how to integrate into your code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Map My Finds - All Locations</title>
<link rel="stylesheet" href="css/mylocations.css" type="text/css" media="all" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=en"></script>
<style>
    div#locationslist div{cursor:pointer; } 
    html { height: 100% }
    body { height: 100%; margin: 0; padding: 0 }
    #map { height: 70%; width:70% }
</style>    

<script type="text/javascript"> 
var map; 
var gmarkers = [];
var locationslist = "";
var arrMarkers = [];    // add our markers to this array

function showLocations() { 
    map = new google.maps.Map(document.getElementById("map"), { 
        center: new google.maps.LatLng(54.312195845815246,-4.45948481875007), 
        zoom:6, 
        mapTypeId: google.maps.MapTypeId.TERRAIN
    }); 
    var infoWindow = new google.maps.InfoWindow; 

    gmarkers = [
        {locationname: "One", address: "blah", osgb36lat: "51.482238", osgb36lon: "0.001581"},
        {locationname: "Two", address: "blahblah", osgb36lat: "51.473364", osgb36lon: "0.011966"},
        {locationname: "Three", address: "blahblahblah", osgb36lat: "51.471974", osgb36lon: "-0.000651"},
        {locationname: "Four", address: "blahblahblahblah", osgb36lat: "51.472108", osgb36lon: "-0.002196"},
        {locationname: "Five", address: "foobar", osgb36lat: "51.474995", osgb36lon: "-0.003827"},
    ];

    var bounds = new google.maps.LatLngBounds(); 
    for (var i = 0; i < gmarkers.length; i++) { 
        var locationname = gmarkers[i]["locationname"]; 
        var address = gmarkers[i]["address"]; 
        //var locationid = gmarkers[i]["locationid"]; 
        var point = new google.maps.LatLng( 
            parseFloat(gmarkers[i]["osgb36lat"]), 
            parseFloat(gmarkers[i]["osgb36lon"])
        ); 
        var html = "<b>" + locationname + "</b> <br/>" + address; 
        bounds.extend(point);  
        var marker = new google.maps.Marker({ 
            map: map, 
            position: point
        }); 

        arrMarkers.push(marker);

        bindInfoWindow(marker, map, infoWindow, html);  
        locationslist += "<div onclick=scrollToMarker(" + i + ")>"+locationname+"</div>"; 
    }
    map.setCenter(bounds.getCenter()); 
    map.fitBounds(bounds);  
    //display company data in html 
    document.getElementById("locationslist").innerHTML = locationslist; 
} 

function scrollToMarker(index) {  
    var point = new google.maps.LatLng( 
        parseFloat(gmarkers[index]["osgb36lat"]),  
        parseFloat(gmarkers[index]["osgb36lon"]) 
    ); 

    map.panTo(point); 

    google.maps.event.trigger(arrMarkers[index], 'click'); 
} 

function bindInfoWindow(marker, map, infoWindow, html) { 
    google.maps.event.addListener(marker, 'click', function() { 
        infoWindow.setContent(html); 
        infoWindow.open(map, marker); 
    }); 
} 
</script> 
</head>
<body onload="showLocations()"> 
    <div id="map"></div> 
    <div id="locationslist"></div>  
</body> 
</html>

继续阅读：google-maps-api-3 javascript

Unable to open Infowindow on Map Pan

更多精彩内容

精彩评论

最新问答

北医三院三代试管养囊一次费用是多少？贵不贵？？

下周全市中小学校恢复线下教学，如何让孩子收心准备开学？？

飞利浦液晶电视,不小心按了TV,现实无信号,要怎么样才能返回电视...？

如何治疗输卵管阻塞？

理光短焦家用投影仪pjk366蓝光3d超清家用会议教学家用投影机如何样？

问答排行榜

王昌瑞《潜梦追凶》剧组庆生新锐演员未来可期？

Is it allowed to ask users to enter credit card details for own payment method?

Escaping "<" in Perl-generated XML

imessage会显示已读吗？

微信重新建群怎么建？