javascript - 为什么信息窗口没有固定在标记上？(Why the infowindow is not anchored to the marker?)

Question

The markers are displayed on the map.

(标记显示在地图上。)

When I click in any marker the information related to appear, but not above marker instead of the information is displaying in the last marker position.

(当我单击任何标记时，将显示与之相关的信息，但不在标记上方，而不是信息显示在最后一个标记位置。)

I am using Phalcon.

(我正在使用Phalcon。)

This is the table data.

(这是表数据。)

<table id="clientes" class="table table-bordered">
                    <tr>
                <td>800000CD-1325103412</td>
                <td>SUAREZ ORRILA MARTHA BELGICA</td>
                <td>n/a</td>
                <td>n/a</td>
                <td>n/a</td>
                <td>-78.4843903</td>
                <td>-0.1976840</td>
                <td>SUAREZ ORRILA MARTHA BELGICASalinas </td>
                <td>1</td>

            </tr>
                    <tr>
                <td>800000D2-1325103412</td>
                <td>ESPINAL CHOEZ BLANCA CAFERINA:Sucursal 1ero de Mayo</td>
                <td>n/a</td>
                <td>n/a</td>
                <td>n/a</td>
                <td>-78.4887009</td>
                <td>-0.2008060</td>
                <td>Barrio 1ero de Mayo. Av. PrincipalAyangue24000</td>
                <td>1</td>

            </tr>
                    <tr>
                <td>800000D3-1325103412</td>
                <td>CHANG CORDOVA RENNE ANTONINA</td>
                <td>n/a</td>
                <td>n/a</td>
                <td>n/a</td>
                <td>-78.4888077</td>
                <td>-0.2022650</td>
                <td>Vía a Santa Elena , Av principal S/NSanta Elena24000</td>
                <td>1</td>

            </tr>
                    <tr>
                <td>800000D5-1325103412</td>
                <td>BURGOS BRIONES YISELA MARIA</td>
                <td>n/a</td>
                <td>n/a</td>
                <td>n/a</td>
                <td>-78.4862900</td>
                <td>-0.2039710</td>
                <td>Chipipe: Av. Los Almendros s/n y Av. EloySalinas24000</td>
                <td>1</td>

            </tr>
                    <tr>
                <td>800000E3-1325103413</td>
                <td>SANTANA MOREIRA GABINO PUBLIO</td>
                <td>n/a</td>
                <td>n/a</td>
                <td>n/a</td>
                <td>-78.4814529</td>
                <td>-0.2026510</td>
                <td>P.Icaza 615 entre Boyaca y EscobedoGUAYAQUIL090000</td>
                <td>1</td>

            </tr>
                    <tr>
                <td>800000E6-1325103413</td>
                <td>RENDON TOBAR MARIA MAGDALENA</td>
                <td>n/a</td>
                <td>n/a</td>
                <td>n/a</td>
                <td>-78.4900131</td>
                <td>-0.2085306</td>
                <td>Cdla. Alborada, José M. Egas Y Rodolfo BaGuayaquil09000</td>
                <td>1</td>

            </tr>
                    <tr>
                <td>800000F0-1325103414</td>
                <td>MOLINA HERNáNDEZ RUTH CRISTINA</td>
                <td>n/a</td>
                <td>n/a</td>
                <td>n/a</td>
                <td>-78.4900131</td>
                <td>-0.2085306</td>
                <td>Cdla. Urdenor 1 Mz. 121, S.Ignacio RoblesGuayaquil09000</td>
                <td>1</td>

            </tr>
                    <tr>
                <td>800000F6-1325103414</td>
                <td>SOCIEDAD DE HECHO SAMBAC</td>
                <td>n/a</td>
                <td>n/a</td>
                <td>n/a</td>
                <td>-78.4878540</td>
                <td>-0.2086160</td>
                <td>Vía a Samborondón, junto al Banco del PacGuayaquil090150</td>
                <td>1</td>

            </tr>
                    <tr>
                <td>80000108-1325103415</td>
                <td>ECHEVERRIA VIVAR PAOLA MICHEL</td>
                <td>n/a</td>
                <td>n/a</td>
                <td>n/a</td>
                <td>-78.4894638</td>
                <td>-0.2091737</td>
                <td>Av. Carlos Julio Arosemena y Av. Las MonjGuayaquil09000</td>
                <td>1</td>

            </tr>
                    <tr>
                <td>8000010A-1325103415</td>
                <td>COMERCIO MARSANTOS S.A.</td>
                <td>n/a</td>
                <td>n/a</td>
                <td>n/a</td>
                <td>-78.4856262</td>
                <td>-0.2091740</td>
                <td>   </td>
                <td>1</td>

            </tr>
            </table>
  <div id="floating-panel">
    <input onclick="clearMarkers();" type=button value="Hide Markers">
    <input onclick="showMarkers();" type=button value="Show All Markers">
    <input onclick="deleteMarkers();" type=button value="Delete Markers">
</div>
<div id="map_canvas"></div>          

The javascript code that I am trying to fix it, is the showMarkers function, the rest of the code is not important.

(我正在尝试修复的javascript代码是showMarkers函数，其余代码并不重要。)

I am parsing the table and getting the longitude and the latitude, and the client's name.

(我正在解析表，并获取经度和纬度以及客户的姓名。)

The initMap function runs as a callback function

(initMap函数作为回调函数运行)

https://maps.google.com/maps/api/js?key=MY_API_KEY&callback=initMap

(https://maps.google.com/maps/api/js?key=MY_API_KEY&callback=initMap)

  var map, infoWindow; var marcas = []; function deleteMarkers() { var myLatLng = {lat: -0.1976840, lng: -78.4843903}; var myLatLng1 = {lat: -0.2085306, lng: -78.4900131}; var map = new google.maps.Map(document.getElementById('map_canvas'), { zoom: 12, center: myLatLng }); var marker1 = new google.maps.Marker({ position: myLatLng1, map: map, title: 'El Morlan' }); var marker = new google.maps.Marker({ position: myLatLng, map: map, title: 'Hello World!' }); } function clearMarkers() { } function showMarkers() { let table = document.getElementById("clientes"); for (let i = 0; i < table.rows.length; i++) { let icono = 'https://www.carrillosteam.com/public/coop/images/logos/map_pin.png'; let row = table.rows[i]; let longitud = row.cells[5].innerHTML; let latitud = row.cells[6].innerHTML; let cliente = row.cells[1].innerHTML; var geolocation = new google.maps.LatLng(latitud, longitud); var marker = new google.maps.Marker({ map: map, position: geolocation, icon: icono }); marcas.push(marker); marker.addListener('click', function(){ map.panTo(marker.position); var contenido = '<div><strong>' + cliente + '</strong><br>'; contenido += '<span> LONGITUD: ' + longitud + '</span><br>'; contenido += '<span> LATITUD: ' + latitud + '</span>'; infoWindow.setContent(contenido); infoWindow.open(map, marker); }); {# alert('Longitud : ' + longitud + ' Latitud : ' + latitud + ' Cliente : ' + cliente);#} } } function initMap() { var coqueiros = new google.maps.LatLng(-0.2039710, -78.4862900); map = new google.maps.Map(document.getElementById('map_canvas'), { center: coqueiros, zoom: 12 }); infoWindow = new google.maps.InfoWindow; } 

  ask by Gloria Sanchez translate from so

Answer 1

I commented my changes in your JS.

(我评论了您对JS所做的更改。)

It should work as intended now.

(现在应该可以正常工作了。)

 //you use both var and let for your variables throughout, should only use one or the other var map, infoWindow; var marcas = []; //moved your icono to be a global variable let icono = 'https://www.carrillosteam.com/public/coop/images/logos/map_pin.png'; function deleteMarkers() { var myLatLng = {lat: -0.1976840, lng: -78.4843903}; var myLatLng1 = {lat: -0.2085306, lng: -78.4900131}; var map = new google.maps.Map(document.getElementById('map_canvas'), { zoom: 12, center: myLatLng }); var marker1 = new google.maps.Marker({ position: myLatLng1, map: map, title: 'El Morlan' }); var marker2 = new google.maps.Marker({ position: myLatLng, map: map, title: 'Hello World!' }); } function clearMarkers() { } function showMarkers() { let table = document.getElementById("clientes"); for (let i = 0; i < table.rows.length; i++) { let row = table.rows[i]; let longitud = row.cells[5].innerHTML; let latitud = row.cells[6].innerHTML; let cliente = row.cells[1].innerHTML; var geolocation = new google.maps.LatLng(latitud, longitud); var marker = new google.maps.Marker({ map: map, position: geolocation, icon: icono }); marcas.push(marker); marker.addListener('click', function(){ map.panTo(marker.position); var contenido = '<div><strong>' + cliente + '</strong><br>'; contenido += '<span> LONGITUD: ' + longitud + '</span><br>'; contenido += '<span> LATITUD: ' + latitud + '</span>'; var infoWindow = new google.maps.InfoWindow({ content: contenido }); //because of your context being inside a function inside a loop, you want to use this instead of marker infoWindow.open(map, this); }); } } function initMap() { var coqueiros = new google.maps.LatLng(-0.2039710, -78.4862900); map = new google.maps.Map(document.getElementById('map_canvas'), { center: coqueiros, zoom: 12 }); } 

 #map_canvas { height: 400px; width: 400px; } 

 <table id="clientes" class="table table-bordered"> <tr> <td>800000CD-1325103412</td> <td>SUAREZ ORRILA MARTHA BELGICA</td> <td>n/a</td> <td>n/a</td> <td>n/a</td> <td>-78.4843903</td> <td>-0.1976840</td> <td>SUAREZ ORRILA MARTHA BELGICASalinas</td> <td>1</td> </tr> <tr> <td>800000D2-1325103412</td> <td>ESPINAL CHOEZ BLANCA CAFERINA:Sucursal 1ero de Mayo</td> <td>n/a</td> <td>n/a</td> <td>n/a</td> <td>-78.4887009</td> <td>-0.2008060</td> <td>Barrio 1ero de Mayo. Av. PrincipalAyangue24000</td> <td>1</td> </tr> <tr> <td>800000D3-1325103412</td> <td>CHANG CORDOVA RENNE ANTONINA</td> <td>n/a</td> <td>n/a</td> <td>n/a</td> <td>-78.4888077</td> <td>-0.2022650</td> <td>Vía a Santa Elena , Av principal S/NSanta Elena24000</td> <td>1</td> </tr> <tr> <td>800000D5-1325103412</td> <td>BURGOS BRIONES YISELA MARIA</td> <td>n/a</td> <td>n/a</td> <td>n/a</td> <td>-78.4862900</td> <td>-0.2039710</td> <td>Chipipe: Av. Los Almendros s/ny Av. EloySalinas24000</td> <td>1</td> </tr> <tr> <td>800000E3-1325103413</td> <td>SANTANA MOREIRA GABINO PUBLIO</td> <td>n/a</td> <td>n/a</td> <td>n/a</td> <td>-78.4814529</td> <td>-0.2026510</td> <td>P.Icaza 615 entre Boyaca y EscobedoGUAYAQUIL090000</td> <td>1</td> </tr> <tr> <td>800000E6-1325103413</td> <td>RENDON TOBAR MARIA MAGDALENA</td> <td>n/a</td> <td>n/a</td> <td>n/a</td> <td>-78.4900131</td> <td>-0.2085306</td> <td>Cdla. Alborada, José M. Egas Y Rodolfo BaGuayaquil09000</td> <td>1</td> </tr> <tr> <td>800000F0-1325103414</td> <td>MOLINA HERNáNDEZ RUTH CRISTINA</td> <td>n/a</td> <td>n/a</td> <td>n/a</td> <td>-78.4900131</td> <td>-0.2085306</td> <td>Cdla. Urdenor 1 Mz. 121, S.Ignacio RoblesGuayaquil09000</td> <td>1</td> </tr> <tr> <td>800000F6-1325103414</td> <td>SOCIEDAD DE HECHO SAMBAC</td> <td>n/a</td> <td>n/a</td> <td>n/a</td> <td>-78.4878540</td> <td>-0.2086160</td> <td>Vía a Samborondón, junto al Banco del PacGuayaquil090150</td> <td>1</td> </tr> <tr> <td>80000108-1325103415</td> <td>ECHEVERRIA VIVAR PAOLA MICHEL</td> <td>n/a</td> <td>n/a</td> <td>n/a</td> <td>-78.4894638</td> <td>-0.2091737</td> <td>Av. Carlos Julio Arosemena y Av. Las MonjGuayaquil09000</td> <td>1</td> </tr> <tr> <td>8000010A-1325103415</td> <td>COMERCIO MARSANTOS SA</td> <td>n/a</td> <td>n/a</td> <td>n/a</td> <td>-78.4856262</td> <td>-0.2091740</td> <td> </td> <td>1</td> </tr> </table> <div id="floating-panel"> <input onclick="clearMarkers();" type=button value="Hide Markers"> <input onclick="showMarkers();" type=button value="Show All Markers"> <input onclick="deleteMarkers();" type=button value="Delete Markers"> </div> <div id="map_canvas"></div> <script src="https://maps.google.com/maps/api/js?callback=initMap" async defer></script>