[Solved] Google Maps – markers from database displaying information from the last row only

by


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>

0

solved Google Maps – markers from database displaying information from the last row only