javascript - Multiple markers and infowindows on Google Maps (using MySQL)

Question

There are another four if statements which do the same thing for other categories.

<?php

if (isset($_POST['one'])) {
    $query = "SELECT * FROM beerstable WHERE category LIKE "%Lager%"";
    $result = mysql_query($query);
    if (!$result) {
        die('Invalid query: ' . mysql_error());
    }

    while ($row = mysql_fetch_assoc($result)) {
        $lat = $row['lat'];
        $lng = $row['lng'];
        $markername = $row['name'];
        $link = $row['link'];
        $photo = $row['photo'];
        ?>

            var infowindow = new google.maps.InfoWindow({
                content: '<h1><?php echo $markername ?></h1><br><img src="<?php echo $photo ?>" height="30" width="50"><br><a href="<?php echo $link ?>"><?php echo $link ?></a>'
            });
            icon = "yellow";
            icon = "http://maps.google.com/mapfiles/ms/icons/" + icon + ".png";

            var marker = new google.maps.Marker({
                title: '<?php echo $markername ?>',
                animation: google.maps.Animation.DROP,
                //animation: google.maps.Animation.BOUNCE,
                icon: new google.maps.MarkerImage(icon),
                position: new google.maps.LatLng( <? php echo $lat ?> , <? php echo $lng ?> )
            });

            marker.setMap(map);
            google.maps.event.addListener(marker, 'click', function () {
                infowindow.open(map, marker);
            });

        <?php
    }
}
?>

It displays the markers, but when I click a marker it displays the infowindow of last marker that created.

Answer 1

hear :

var infowindow = new google.maps.InfoWindow({
                                content: '<h1><?php echo $markername ?></h1><br><img src="<?php echo $photo ?>" height="30" width="50"><br><a href="<?php echo $link ?>"><?php echo $link ?></a>'
                            });

Create 1 array inforwindow .

change it to

$i ++;
    infowindow[<?php echo $i; ?>] = new google.maps.InfoWindow({
                                    content: '<h1><?php echo $markername ?></h1><br><img src="<?php echo $photo ?>" height="30" width="50"><br><a href="<?php echo $link ?>"><?php echo $link ?></a>'
                                });

and

marker[<?php echo $i; ?>] = new google.maps.Marker({...});
google.maps.event.addListener(marker[$i], 'click', function() {
       infowindow[<?php echo $i; ?>].open(map,this);
 });