Kontrolle Marker Infowindow von außerhalb von Google Maps API

Question

Ich versuche, ein Infofenster der Google Maps-Marker zu öffnen, wenn ein Element außerhalb der Karte angeklickt wird. Ich habe ein paar ähnliche Fragen gesehen, aber keine funktionierende Antwort gefunden. Hier ist mein Code:

html:

<div id="map_canvas"></div> 
<div id="names_div"></div> 

Skript:

var locations = [ 
    ['Bondi Beach', -33.890542, 151.274856], 
    ['Coogee Beach', -33.923036, 151.259052], 
]; 

var map = new google.maps.Map(document.getElementById('map_canvas'), { 
    zoom: 10, 
    center: new google.maps.LatLng(-33.92, 151.25), 
    mapTypeControl: false, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 

    var names_html = ""; 

    for (i = 0; i < locations.length; i++) { 
    names_html += " " + "<a href='javascript:myclick(" + locations.length + ")' class='Names'>" + locations[i][0] + " </a> <br> <br>" ; 
    }; 

    document.getElementById("names_div").innerHTML = names_html; 

var infowindow = new google.maps.InfoWindow(); 

var marker, i; 

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

    marker = new google.maps.Marker({ 
    position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
    map: map 
    }); 

    google.maps.event.addListener(marker, 'click', (function(marker, i) { 
    return function() { 
     infowindow.setContent(locations[i][0]); 
     infowindow.open(map, marker); 
     } 
     })(marker, i)); 

    } 

    function myclick(i) { 
    google.maps.event.trigger(locations[i], "click"); 
    } 

Es ist die Wechselwirkung zwischen dem "names_html + = ..." Zeile und die „Funktion myclick (i) {... "Das verursacht das Problem, denke ich.

Zusätzlich konnte ich nur die HTML-Population des names_div mit einer separaten Schleife zur Marker-Schleife arbeiten. Dies kann auch das Problem sein!

Danke, Hilfe sehr geschätzt.

Answer 1

Ich erhalte einen Javascript Fehler mit dem geposteten Code: Uncaught TypeError: Cannot read property '__e3_' of undefined. Es gibt zwei Probleme:

1. locations[i] zu einem google.maps.Marker Objekt keine Referenz ist (man kann nicht ein click Ereignis auf sie auslösen und erwarten, dass es etwas Sinnvolles tun). Sie müssen Verweise halten auf die Markierungen (zB in einem Array gmarkers, dann lösen die click Ereignis auf diejenigen genannt:

function myclick(i) { 
    google.maps.event.trigger(gmarkers[i], "click"); 
} 

2. locations.length ändert sich nie was Sie brauchen. codieren die Sidebar Links wie:

for (i = 0; i < locations.length; i++) { 
    names_html += " " + "<a href='javascript:myclick(" + i + ")' class='Names'>" + locations[i][0] + " </a> <br> <br>"; 
}; 

Working example (not based on your code)

proof of concept fiddle

Code-Schnipsel:

var locations = [ 
 
    ['Bondi Beach', -33.890542, 151.274856], 
 
    ['Coogee Beach', -33.923036, 151.259052], 
 
]; 
 

 
var map = new google.maps.Map(document.getElementById('map_canvas'), { 
 
    zoom: 10, 
 
    center: new google.maps.LatLng(-33.92, 151.25), 
 
    mapTypeControl: false, 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
 
}); 
 

 
var names_html = ""; 
 

 
for (i = 0; i < locations.length; i++) { 
 
    names_html += " " + "<a href='javascript:myclick(" + i + ")' class='Names'>" + locations[i][0] + " </a> <br> <br>"; 
 
}; 
 

 
document.getElementById("names_div").innerHTML = names_html; 
 

 
var infowindow = new google.maps.InfoWindow(); 
 

 
var marker, i; 
 
var gmarkers = []; 
 
for (i = 0; i < locations.length; i++) { 
 

 
    marker = new google.maps.Marker({ 
 
    position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
 
    map: map 
 
    }); 
 

 
    google.maps.event.addListener(marker, 'click', (function(marker, i) { 
 
    return function() { 
 
     infowindow.setContent(locations[i][0]); 
 
     infowindow.open(map, marker); 
 
    } 
 
    })(marker, i)); 
 
    gmarkers.push(marker); 
 
} 
 

 
function myclick(i) { 
 
    google.maps.event.trigger(gmarkers[i], "click"); 
 
}

html, 
 
body, 
 
#map_canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
} 
 
#map_canvas { 
 
    height: 100%; 
 
    width: 80%; 
 
    float: left; 
 
} 
 
#names_div { 
 
    height: 100%; 
 
    width: 100%; 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map_canvas"></div> 
 
<div id="names_div"></div>