Google Maps JS v3 Mysql While loop

Question

Alright! I've been trying to figure out how to set up my loop to be able to have clickable pins with an info window within a google map that is generated through a loop in the database. I can get it to display all of the pins, however once I add in for them to be clickable, it stops.

Notes:

If I have just one pin it works fine. I have very little knowledge of Javascript so it's probably something simple.

        <script type="text/javascript"> function init_map()
                        {var myOptions = {zoom:14,center:new google.maps.LatLng(44.4765519,-73.21252950000002),mapTypeId: google.maps.MapTypeId.ROADMAP};

                map = new google.maps.Map(document.getElementById("gmap_canvas"), myOptions);
                <?php
                if (mysqli_num_rows($result) > 0)
                {
                  while($row = $result->fetch_assoc())
                  {
                ?>

                        marker = new google.maps.Marker(
                            {map: map,position: new google.maps.LatLng(<?php echo $row["fldLatLong"] ?>)}
                            );
google.maps.event.addListener(marker, "click", function(){infowindow.open(map,marker);});
                  <?php }}; ?>

                        </script>

Answer 1

What you want to do, is probably more something like this

<?php
$mysqli = new mysqli('localhost', 'root', '', 'stackoverflow'); // use your own settings
$result = $mysqli->query("SELECT fldLatLong FROM city");
$loc = array();
if (mysqli_num_rows($result) > 0) {
  while($row = $result->fetch_assoc()) {
    $loc[] = explode(',', $row["fldLatLong"]);  //  it's even better if you have a separate lat and lng in the database
  }
  // make the array javascript-readable
  $locations = 'var locations = ' . json_encode($loc) . ';';
}
?>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript"> 
<?php echo $locations; ?>  // array of the locations
var markers = [];   // marker objects in an array
function init_map() {
  var myOptions = {
    zoom: 12,
    center: new google.maps.LatLng(50.8625502000,4.3796600000),  // (44.4765519,-73.21252950000002),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById("gmap_canvas"), myOptions);
  var infowindow = new google.maps.InfoWindow({
    content: 'Hello World!'
  });
  for(var i=0; i<locations.length; i++) {
    marker = new google.maps.Marker({
      map: map,
      position: new google.maps.LatLng(locations[i][0], locations[i][1])
    });
    // store the marker in the array
    markers.push(marker);
    google.maps.event.addListener(marker, "click", function() {
      // the marker tha has been clicked upon, is "this".
      // we search in the array of markers objects to see which marker was clicked upon
      var index = markers.indexOf(this);  
      var content = 'Dummy content of marker ' + index;
      infowindow.setContent(content);
      infowindow.open(map, markers[index]);
    });
  }
}
google.maps.event.addDomListener(window, 'load', init_map);
</script>
<style>
#gmap_canvas {
  height: 500px;
}
</style>
<div id="gmap_canvas"></div>