Question

I am mapping some concert locations on google maps, using data from Songkick.com’s API. I’m making a call to the data using jQuery. When mapping a concert, if a single venue has multiple concerts scheduled, all of the markers are placed in the exact same location. This means that only the marker of the most recent concert is visible, and the google maps infoWindow only displays the data for that most recent concert.

I would like to make it so that all concerts taking place at that exact same lat/long display their info in the infoWindow. So when you click on the marker, all scheduled shows are displayed in the infoWindow, not just the most recent show.

Here is part of my javascript:

function doSearch(locations) {
deleteOverlays();
jQuery.getJSON("http://api.songkick.com/api/3.0/search/locations.json?query=" + locations + "&apikey=XXXXXXXX&jsoncallback=?", function(data){
    var id = data.resultsPage.results.location[0].metroArea.id;

    jQuery.getJSON("http://api.songkick.com/api/3.0/metro_areas/" + id + "/calendar.json?apikey=XXXXXXXX&jsoncallback=?", function(data){
        var bounds = new google.maps.LatLngBounds();
        var point;
        $.each(data.resultsPage.results.event, function(i, item) {
            var event = item;
            point  = new google.maps.LatLng(
                parseFloat(item.location.lat),
                parseFloat(item.location.lng));
            var marker = new google.maps.Marker({
                map      : map,
                animation: google.maps.Animation.DROP,
                position : point

            });

            markersArray.push(marker);

            var contentString = '<p><b>' + item.displayName + '</b></p>' + '<p>' + item.location.city + '</p>';

            var infowindow = new google.maps.InfoWindow({
                content: contentString
            });

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

                if (currentInfoWindow != null) { 
                    currentInfoWindow.close(); 
                } 
                infowindow.open(map, marker); 
                currentInfoWindow = infowindow;
            });

To see this application in action, I have set up a temporary website.

http://129.219.78.186/~masgis/tward/songkick/Metro.html

To see what I am talking about, type in the name of a major city, and click a marker that drops. Only the most recent concert will show up.

Thanks in advance, any help is much appreciated.

Answer 1

It looks like the SongKick API call returns a unique ID for each venue. So here’s what you can do:

1. Add each event object to an array.
2. Pull out unique venue IDs from the events in the array.
3. Loop through each unique venue ID, pulling out each event with that venue ID, and build the info window string by looping through this subset of events.
4. Build the marker using the venue info, setting the info window string to the marker.

It’s a bit of JavaScript code, nested loops, and a bit of a performance hit, but it should do the trick.