谷歌地图-数据库中的标记只显示最后一行的信息 - Google Maps - markers from database displaying information from the last row only

我用谷歌地图v3设置了一个地图，其中标记保存到数据库中。一个新的标记信息窗口包含一个将数据保存到PHP数据库的表单。加载地图时，会显示标记，单击标记时可以看到相应的信息。这里的问题是，所有标记都显示插入最后一行时保存的信息。

这将从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");
            });
        });

这就是显示保存的标记的内容：

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]);

当我在浏览器中运行event_data.php时，它会返回所有已保存的事件标记。

我还运行了console.log（eName）；就在"var标记"之前，它返回数据库中的所有项目，但带有1个额外的"未定义"：

undefined
event1
event2
event3

小提琴演示问题

你只有一个信息窗口，当你打开它时，它会显示你给它的最后一个内容。

更改您的点击侦听器来自：

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

要（在打开新内容之前设置它）：

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

工作小提琴

代码片段：

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>