单击一个元素会导致弹出信息窗口

Question

I have a website where i have a map on the left side and on the right side I have information boxes that correspond to each location on the map. How can i have it where if i click on the div that corresponds to the marker the info window for that marker appears?

PHP:

// the php i use to generate the info boxes i want to click on so the infoWindow pops up for the marker

echo "<div class='highlight' id='" .
 $row["bar_name"] .
 "'> <h3 class='barTitle bar'>" .
 $row["bar_name"] .
 "</h3> <h6 class='subTitle'>" .
 $row["hourStart"] .
 "-" .
 $row["hourEnd"] .
 "  |  " .
 $row["area"] .
 "</h6> <table align='center'> <tr> <th class='dowb'> <button bar_name='" .
 $row["bar_name"] .
 "' class='weekly'> HH </button></th> <th class='dowb'> <button bar_name='" .
 $row["bar_name"] .
 "' class='monday'> MON </button></th> <th class='dowb'> <button bar_name='" .
 $row["bar_name"] .
 "' class='tuesday'> TUE </button></th>  <th class='dowb'> <button  bar_name='" .
 $row["bar_name"] .
 "' class='wednesday'> WED </button></th> <th class='dowb'> <button bar_name='" .
 $row["bar_name"] .
 "' class='thursday'> THU </button></th> <th class='dowb'> <button bar_name='" .
 $row["bar_name"] .
 "' class='friday'> FRI </button></th> <th class='dowb'> <button bar_name='" .
 $row["bar_name"] .
 "' class='saturday'> SAT </button></th> <th class='dowb'> <button bar_name='" .
 $row["bar_name"] .
 "' class='sunday'> SUN </button></th> <br> </tr> </table> <br> <table align='center' class='dowd'> <tr> <th class='barInfoTitle'>  Happy Hour Drinks:</th>  <th class='barInfoTitle'>  Happy Hour Food: </th></tr>  <tr> <th class='barInfo' class='dowDrink'>" .
 $row["weeklyDealDrinks"] .
 "</th>  <th class='barInfo' class='dowFood'> " .
 $row["weeklyDealFood"] .
 " </th> </tr> </table> <div align='center'> <a href='" .
 $row["profile_page"] .
 "'> More Info </a></div> <hr> </div> \n";

Javascript:

// Creates info window on click/ highlights box (this code is by my other code for adding the google map
var highlight = [];
var infoWindow = new google.maps.InfoWindow(), marker, i;
google.maps.event.addListener(marker, "click", (function (marker, i) {
    return function () {
        infoWindow.setContent(locations[i][3]);
        infoWindow.open(map, marker);
        highlight.shift();
        highlight.push(locations[i][0]);
        for (var j = 0; j < locations.length; j++) {
            var check = document.getElementById(locations[j][0]);
            if (highlight[0] != locations[j][0]) {
                if (check.classList.contains("active")) {
                    check.classList.remove("active");
                }
            }

        }
    }
}
//the js I hvae to try and get the window to pop up (this code is after the previous code)
$(document).ready(function () {
    $(".highlight").on('click', function (event) {
        event.stopPropagation();
        event.stopImmediatePropagation();
        alert("works");
        infowindow.open(map, Marker);
    })
};

Answer 1

If you want to show each marker's location info in an info window you'll need to select the appropriate unique marker for each corresponding location. This can be done in multiple ways, eg by creating a markers array and then adding the info window click event to each marker in the array.

Take a look at the following code example for guidance:

let marker;
let infowindow;

// Declare array of markers
let markers = [];

// Iterate over all your locations
for (let i = 0; i < locations.length; i++) {

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

  // Add marker to markers array
  markers[i] = marker;

  google.maps.event.addListener(marker, 'click', function() {

    if (infowindow) {
      infowindow.close();
    }

    // Create new info window
    infowindow = new google.maps.InfoWindow();

    // Set info window content for this unique marker/location
    infowindow.setContent(locations[i][2]);

    // Open info window for this unique marker
    infowindow.open(map, markers[i]);

  });
}

Hope this helps!