Show info window marker when click from outside map

I have designed for map like code below

 <table class="table table-bordered" style="width:100%;" id="loctable">        <th> List Location</th>           <tbody id="maploc">             </tbody>    </table>               <div id="map"></div>                                            

So in List Location is only list location name that I get from response api json. And I show marker on div map with data latitude and longitude I get from same response api json

Here's the code to show list location name

//response from json, data existing  var exist = [{"id":"001",                "location":"mysql",                "geolocation":{                    "lat":"-6.146627155693579",                    "long":"106.76637134201562"               }},                {"id":"002",                "location":"golang",                "geolocation":{                    "lat":"-6.134509125934106",                    "long":"106.73478564865624"               }}]     for (var i = 0; i < exist.length; i++)   {      var latz = exist[i].geolocation.lat;      var longz = exist[i].geolocation.long;      var ids = exist[i].id;      var location = exist[i].location;                         var mark = '<tr>'+                          '<td><img src="<?= base_url(); ?>assets/addon-media/red-marker.png">'+                                 location+                          '</td>'+                      '</tr>';        $('#maploc').append(mark);        //show marker  }  

And here is code to draw marker on map based on same response api

marker = new google.maps.Marker({          position: new google.maps.LatLng(latz, longz),          map: map,      });      marker.setMap(map);            const contentString =                      '<div class="card card-custom card-stretch gutter-b location">'+                          '<div class="card-body d-flex flex-column" id="locationCard" style="padding:5px 0px;">'+                              '<div class="flex-grow-1 pb-5 align-items-center row">'+                                  '<div class="col-md-6" style="display: table-cell">'+                                      '<div class="col-sm-12 col-md-12 col-xl-12">'+                                          '<div class="text-muted mt-1">Location</div>'+                                          '<p class="text-dark font-weight-bolder font-size-lg mt-2">'+location+'</p>'+                                      '</div>'+                                  '</div>'+                              '</div>'+                          '</div>'+                      '</div>';        const infowindow = new google.maps.InfoWindow({          content: contentString,          maxWidth: 400,          maxHeight: 350      });        google.maps.event.addListener(marker,'click', (function(marker,contentString,infowindow){              return function() {                 infowindow.setContent(contentString);                 infowindow.open(map,marker);             };      })(marker,contentString,infowindow));  

I want to ask how can I make when user click one of location in List Location table, the marker in map will be show infowindow based on location clicked ?

Right now, to show infowindow, you must click marker on the map

Thank you

https://stackoverflow.com/questions/67292812/show-info-window-marker-when-click-from-outside-map April 28, 2021 at 10:02AM