0

I have a map marker array that is built using data from a database, the array builds perfectly, however when i try to loop through the array object, although the markers do appear, and in the correct numbers, the content located within the info windows are the same, and also the id's i've set to output are also identical, it seems to always go to the last object and use that data for every marker.

Could someone possibly point out what i might've done wrong?

The script below in its entirety is the function that is called upon the database getting information successfully. So this entire block is dedicated to displaying the markers retrieved from the database, and their associated information.

function querySuccessMarkers(t, results) {
    var markersArray = {};
    var len = results.rows.length;
    console.log("Markers table: " + len + " rows found");

    for( var i = 0, c = results.rows.length; i < c; i++ ) {
        markersArray[results.rows.item(i).markerid] = {
            id: results.rows.item(i).markerid,
            title: results.rows.item(i).title,
            info: results.rows.item(i).info,
            lat: results.rows.item(i).markerLat,
            lng: results.rows.item(i).markerLng
        };
    }
    console.log(markersArray);

    var markerDetails;
    for (id in markersArray) {
        if( markersArray.hasOwnProperty(id) ) {
            markerDetails = markersArray[id];
            var bridgeIcon = new google.maps.MarkerImage("img/map_markers/warning_map_marker.png", null, null, null);
            marker = new google.maps.Marker({
                position: new google.maps.LatLng(markerDetails.lat, markerDetails.lng),
                map: map,
                icon: bridgeIcon
            });
            var info_window = new google.maps.InfoWindow({content: ''});
                info_window.content = '<div id="marker-info-win" data-id="'+markerDetails.id+'">' +
                '<h3>Marker Information</h3>' +
                '<input id="warning-title" data-text="Warning Title" />'+
                '<p>'+markerDetails.title+'</p>'+
                '<i class="fa fa-pencil"></i>' +
                '<input id="warning-additional-info" data-text="Warning Additional Information" value="'+markerDetails.info+'"/>'+
                '<i class="fa fa-pencil"></i>';
                google.maps.event.addListener(marker, 'click', function() {
                    info_window.open(map, this);
                });
            console.log(markerDetails);
        }
    }
}
Matt Meadows
  • 147
  • 2
  • 6
  • 16
  • Possible duplicate of [Google Maps JS API v3 - Simple Multiple Marker Example](http://stackoverflow.com/questions/3059044/google-maps-js-api-v3-simple-multiple-marker-example) – geocodezip Apr 20 '15 at 21:18
  • Possible duplicate of [Google Maps API V3 infoWindow - All infoWindows displaying same content](http://stackoverflow.com/questions/4897316/google-maps-api-v3-infowindow-all-infowindows-displaying-same-content) – geocodezip Apr 20 '15 at 21:19
  • I will take a look at both that you have linked stating mine is a duplicate of and see if either of them actually resolve my issue – Matt Meadows Apr 20 '15 at 21:21
  • Possible duplicate of [Google Maps API v3 - infoWindows all have same content](http://stackoverflow.com/questions/2889416/google-maps-api-v3-infowindows-all-have-same-content) – geocodezip Apr 20 '15 at 21:21
  • I followed the first link you posted and molded what i have into it, and now i have no markers displaying at all. – Matt Meadows Apr 20 '15 at 21:49
  • Second link is irrelevant as he isn't using for loops at all or even an array – Matt Meadows Apr 20 '15 at 21:57
  • Followed advice from 3rd link, by moving the open infowindow out of the loop, now its completely broken the code. Also, once again, he isn't using any loops to generate the markers. – Matt Meadows Apr 20 '15 at 22:01

1 Answers1

1

Fixed code for anyone interested:

function querySuccessMarkers(t, results) {
        var markersArray = [];
        var len = results.rows.length;
        console.log("Markers table: " + len + " rows found");

        for( var i = 0, c = results.rows.length; i < c; i++) {
            markersArray.push(results.rows.item(i));
        }
        console.log(markersArray);


        var info_window = new google.maps.InfoWindow();

        for (i = 0; i < markersArray.length; i++) {
                var bridgeIcon = new google.maps.MarkerImage("img/map_markers/warning_map_marker.png", null, null, null);
                marker = new google.maps.Marker({
                    position: new google.maps.LatLng(markersArray[i].markerLat, markersArray[i].markerLng),
                    map: map,
                    icon: bridgeIcon
                });

                console.log(marker);


            google.maps.event.addListener(marker, 'click', (function(marker, i) {
                return function() {
                    info_window.setContent('<div id="marker-info-win" data-id="'+markersArray[i].markerid+'">' +
                '<h3>Marker Information</h3>' +
                '<input id="warning-title" data-text="Warning Title" />'+
                '<p>'+markersArray[i].title+'</p>'+
                '<i class="fa fa-pencil"></i>' +
                '<input id="warning-additional-info" data-text="Warning Additional Information" value="'+markersArray[i].info+'"/>'+
                '<i class="fa fa-pencil"></i>');
                    info_window.open(map, marker);
                }
            })(marker, i));
        }
    }

It was a result of a combination of outputting from the WebSQL database into a normal array, instead of my own array object. Also, adding closure into the click Event Listener for each marker.

For a more in-depth tutorial and guide on how you can achieve the same thing using hardcoded arrays or dynamic: http://chrisltd.com/blog/2013/08/google-map-random-color-pins/

Matt Meadows
  • 147
  • 2
  • 6
  • 16