Google Maps API. infoWindow with next and back buttons to cycle through the information for markers in the same position

Question

I have markers being placed onto my Google map from an XML file. However some markers will be in the exact position (latitude and longitude) I was wondering if there was away to click on the top marker, open up the infoWindow and have next button to cycle through the xml data for each markers that is in the same position, I have no idea how to go about this:

This is my current js, that places the markers and creates the infoWindow

var customIcons = {
    been: {
        icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
        shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
    },
    going: {
        icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
        shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
    }
};

function load() {
    var map = new google.maps.Map(document.getElementById("map"), {
        center: new google.maps.LatLng(47.6145, -122.3418),
        zoom: 3,
        mapTypeId: 'roadmap',
        mapTypeControl: false
    });
    var input = document.getElementById('searchTextField');
    var autocomplete = new google.maps.places.Autocomplete(input);
    autocomplete.bindTo('bounds', map);
    google.maps.event.addListener(autocomplete, 'place_changed', function () {
        infoWindow.close();
        var place = autocomplete.getPlace();
        if (place.geometry.viewport) {
            map.fitBounds(place.geometry.viewport);
        } else {
            map.setCenter(place.geometry.location);
            map.setZoom(17); 
        }
    });

    var infoWindow = new google.maps.InfoWindow;
    // Change this depending on the name of your PHP file
    downloadUrl("markers.php", function (data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
            var name = markers[i].getAttribute("name");
            var address = markers[i].getAttribute("address");
            var customer = markers[i].getAttribute("customer");
            var type = markers[i].getAttribute("type");
            var visit_date = markers[i].getAttribute("visit_date");
            var comments = markers[i].getAttribute("comments");
            var image = markers[i].getAttribute("image");
            var point = new google.maps.LatLng(
            parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng")));
            var html = "<div class=\"information\"><div class=\"thumb\"></div><span class=\"name\">" + name + "</span><span class=\"customer\"><b>Customer Name:</b> " + customer + "</span><br /><b>Address:</b> " + address + "<br /><span class=\"date\"><b>Visit Date:</b> " + visit_date + "</span><br /><span class=\"comments\"><img src=\"images/oq.png\" />" + comments + "<img src=\"images/cq.png\" /></span><img src=\'" + image + "'\" class=\"image\" /><div>";
            var icon = customIcons[type] || {};
            var marker = new google.maps.Marker({
                map: map,
                position: point,
                icon: icon.icon,
                shadow: icon.shadow
            });
            bindInfoWindow(marker, map, infoWindow, html);
        }
    });
}

function bindInfoWindow(marker, map, infoWindow, html) {
    google.maps.event.addListener(marker, 'click', function () {
        infoWindow.setContent(html);
        infoWindow.open(map, marker);
    });
}

function downloadUrl(url, callback) {
    var request = window.ActiveXObject ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest;
    request.onreadystatechange = function () {
        if (request.readyState == 4) {
            request.onreadystatechange = doNothing;
            callback(request, request.status);
        }
    };
    request.open('GET', url, true);
    request.send(null);
}

function doNothing() {}
$(document).ready(function () {
    $(".date-pick").glDatePicker({
        onChange: function (target, newDate) {
            target.val(
            newDate.getFullYear() + "/" + (newDate.getMonth() + 1) + "/" + newDate.getDate());
        }
    });
});

Any suggestions? Cheers

Answer 1

try like this

// these variables are global variables
 var infoWindow;
 var map;
// Change this depending on the name of your PHP file
    downloadUrl("markers.php", function (data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
            var name = markers[i].getAttribute("name");
            var address = markers[i].getAttribute("address");
            var customer = markers[i].getAttribute("customer");
            var type = markers[i].getAttribute("type");
            var visit_date = markers[i].getAttribute("visit_date");
            var comments = markers[i].getAttribute("comments");
            var image = markers[i].getAttribute("image");
            var point = new google.maps.LatLng(
           markers[i].getAttribute("lat"),markers[i].getAttribute("lng"));
            var html = "<div class=\"information\"><div class=\"thumb\"></div><span class=\"name\">" + name + "</span><span class=\"customer\"><b>Customer Name:</b> " + customer + "</span><br /><b>Address:</b> " + address + "<br /><span class=\"date\"><b>Visit Date:</b> " + visit_date + "</span><br /><span class=\"comments\"><img src=\"images/oq.png\" />" + comments + "<img src=\"images/cq.png\" /></span><img src=\'" + image + "'\" class=\"image\" /><div>";
            var icon = customIcons[type] || {};
            var marker = new google.maps.Marker({
                map: map,
                position: point,
                icon: icon.icon,
                shadow: icon.shadow
            });
            bindInfoWindow(marker,   html);
        }
    });
}


function bindInfoWindow(marker,  html) {

    google.maps.event.addListener(marker, 'click', function () {


             if (infowindow) {

                infowindow.close();
            }

      infowindow = new google.maps.InfoWindow(
                        {
                            content: html                             

                        });

    infoWindow.open(map, marker);
});
}