javascript - Google Maps - markers from database displaying information from the last row only

Question

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 markers are displayed and corresponding info can be seen when they are clicked. The problem here is that all the markers display the information that is saved with the last row inserted.

This loads data from the DB:

// Get markers from XML - (event_data.php)
        $.get("event_data.php", function (data) {
            $(data).find("markers").each(function () {
                  var name = $(this).attr('name');
                  var description = '<p>'+ $(this).attr('description') +'</p>';
                  var category = $(this).attr('category');
                  var edate = $(this).attr('edate');
                  var point = new google.maps.LatLng(parseFloat($(this).attr('lat')),parseFloat($(this).attr('lon')));
                  create_marker(point, name, description, category, edate, false, false, false, "static/assets/new_event_marker.png");
            });
        });

And This is what displays the saved markers:

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

    // Content to be displayed in event InfoWindows
    var 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>');

    //set the content of infoWindow
    infowindow.setContent(eventContent[0]);

When I run event_data.php in the browser, it returns all the event markers that have been saved.

I also have run console.log(eName); right before "var marker", and it returns all the items in the database, but with 1 extra with"undefined":

undefined
event1
event2
event3

fiddle demonstrating issue

Answer 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();

function initialize() {
    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);

function create_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 InfoWindows
    var 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
}

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