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

Does this answer your question? [Google Maps JS API v3 - Simple Multiple Marker Example](https://stackoverflow.com/questions/3059044/google-maps-js-api-v3-simple-multiple-marker-example) — MrUpsidown, Jan 19 '20 at 18:18

score -1 · Answer 1 · edited Dec 01 '19 at 03:23

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/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>
<script src="https://maps.google.com/maps/api/js?callback=initMap" async defer></script>

Why the infowindow is not anchored to the marker?

1 Answers1