0

I am looking to have a map with multiple markers being pulled from my db. My db table is called 'location', which currently only has 2 rows. I want each marker and infowindow to be created within a while loop.

Currently, the while loop is creating both markers. But, only one of the infowindows is opening. Regardless of which marker you click on to open a window, the same one on marker #1 appears everytime.

I can't figure out what I'm doing wrong. I would really appreciate some help!

Thanks for helping a beginner.

<?php
  include('config.php');
  session_start();
?>

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <script src="assets/js/adsbygoogle.js" type="text/javascript"></script>
    <script src="assets/js/analytics.js" type="text/javascript"></script>
    <script src="assets/js/googleAsync.js" type="text/javascript"></script>
    <script src="assets/js/jquery.min.js" type="text/javascript"></script>

    <style type="text/css">
      #map {
        height:800px;
        width:800px;
        border:1px solid black;
        margin-left:10px;
        margin-top:10px;
      }
      html, body {
        width:100%;
        height:100%;
        margin:0;
        padding:0;
      }
    </style>
  </head>
  <body>

    <div id="map"></div>

  </body>
  <script type="text/javascript">
      function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          center: new google.maps.LatLng(52.595284, 0.80887),
          zoom: 8,
          mapTypeControl: false,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        <?php
          $markerQuery = mysqli_query($conn, "SELECT * FROM location WHERE (hidden = 0)");
          while($row = mysqli_fetch_array($markerQuery, MYSQLI_ASSOC)):
        ?>

        var marker = new google.maps.Marker({
          id: <?php echo($row['locationId']); ?>,
          position: new google.maps.LatLng(<?php echo($row['lat']); ?>, <?php echo($row['lng']); ?>),
          map: map
        });

        var contentString = "<h2>" + <?php echo($row['locationId']); ?> + "</h2>";
        var infowindow = new google.maps.InfoWindow({
          content: contentString
        });

        marker.addListener('click', function() {
          infowindow.open(map, marker);
        });

        <?php endwhile; ?>

      } // initMap
    </script>
      <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAomdRkAs6Es584dRUIflhwTTdcjkLwI_Y&callback=initMap" type="text/javascript"></script>
</html>
classicSchmosby98
  • 142
  • 2
  • 10
  • You may want to look at this: https://stackoverflow.com/questions/30012913/google-map-api-v3-add-multiple-infowindows – deg Aug 31 '17 at 20:52
  • Or you could look at [the example in the documentation: Using MySQL and PHP with Google Maps](https://developers.google.com/maps/documentation/javascript/mysql-to-maps#creating-markers-and-info-windows) – geocodezip Aug 31 '17 at 21:12

0 Answers0