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

更多精彩内容

精彩评论

最新问答

央视是哪个频道？

请问买过的朋友，舒提啦旅行箱实际使用体验如何？？

检查不孕不育需要的费用？

海信ULED电视画质有什么不同的地方?？

钉子可以挂的住画框幕布吗？

问答排行榜

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

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

Escaping "<" in Perl-generated XML

imessage会显示已读吗？

微信重新建群怎么建？