Google Maps - Markers From Database Displaying Information From The Last Row Only

I have a map set up with Google maps v3 where markers are saved to a DB. A new markers info window contains a form which saves data to a PHP database. When the map is loaded, the m

Solution 1:

You only have one infowindow, when you open it, it displays the last content you gave it.

Change your click listener from:

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

To (set the new content before you open it):

google.maps.event.addListener(marker, 'click', function() {
  //set the content of infoWindow
  infowindow.setContent(eventContent[0]);
  infowindow.open(map,marker); 
});

working fiddle

code snippet:

var geocoder;
var map;
var infowindow = new google.maps.InfoWindow();

functioninitialize() {
    map = new google.maps.Map(
    document.getElementById("map_canvas"), {
        center: new google.maps.LatLng(37.4419, -122.1419),
        zoom: 12,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    create_marker(map.getCenter(), "num1", "descript1", "cat1", "1/1/2011", false, true, true, "");
    create_marker(new google.maps.LatLng(37.4, -122.2), "num2", "descript2", "cat2", "1/2/2011", false, true, true, "");

}
google.maps.event.addDomListener(window, "load", initialize);

functioncreate_marker(MapPos, eName, eDesc, eCateg, eDate, InfoOpenDefault, DragAble, Removable, iconPath) {
    var marker = new google.maps.Marker({
        position: MapPos,
        map: map,
        draggable: DragAble,
        title: eName
    });

    // Content to be displayed in event InfoWindowsvar eventContent = $('<div class="event-details">' + '<h4 class="event-name">' + eName + '</h4><hr>' +
        '<span><h5>Date: </h5>' +
        '<p class="event-date">' + eDate + '</p></span>' +
        '<p class="event-description">' + eDesc + '</p>' +
        '<button type="button" name="remove-event" class="remove-event btn btn-warning btn-sm"><span class="glyphicon glyphicon-remove"></span> Remove Event</button>' +
        '</div>');

    google.maps.event.addListener(marker, 'click', function () {
        //set the content of infoWindow
        infowindow.setContent(eventContent[0]);
        infowindow.open(map, marker);
    });
}

html, body, #map_canvas {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://maps.googleapis.com/maps/api/js"></script><divid="map_canvas"style="border: 2px solid #3872ac;"></div>