谷歌地圖 - 來自數據庫的標記僅顯示來自最後一行的信息

Question

我有一個地圖設置了Google地圖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 

fiddle demonstrating issue

Answer 1

你只有一個信息窗口，當你打開它，它顯示你給它的最後一個內容。

更改點擊監聽來自：

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

working fiddle

代碼片段：

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>