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. 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.

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

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; }

Answer 1

I commented my changes in your 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>