-2

I have followed this example (http://jsfiddle.net/upsidown/p646xmcr/) to refresh the markers' location every 5 seconds on my map. Now I don't understand how I can add an infowindow to every marker I have with a different variable le't say time and geolocation (or just a 5th element of the beaches array). 

var map;
var markers = []; // Create a marker array to hold your markers
function initialize() {
    var mapOptions = {
        zoom: 5,
        center: new google.maps.LatLng(10,12),
        mapTypeId: google.maps.MapTypeId.SATELLITE
    }

    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    setMarkers(beaches);

    // Bind event listener on button to reload markers
    //document.getElementById('reloadMarkers').addEventListener('click', reloadMarkers);
}

var n = 0;
setInterval(function reloadMarkers() {
  n++;
  var beaches = [
        ['Bondi Beach', 10+n, 10+n, 5],
        ['Coogee Beach', 10-n, 11-n, 5],
        ['Cronulla Beach', 10-n, 12+n, 3],
        ['Manly Beach', 10+n, 13-n, 2],
        ['Maroubra Beach', 10, 14, 1]
    ];
    // Loop through markers and set map to null for each
    for (var i=0; i<markers.length; i++) {
        markers[i].setMap(null);
    }
    // Reset the markers array
    markers = [];
    // Call set markers to re-add markers
    setMarkers(beaches);

      var infowindow = new google.maps.InfoWindow({
        content: "infowindowstringg"
      });
    marker.addListener('click', function() {
        infowindow.open(map, marker);
      });

}, 5000);

function setMarkers(locations) {
    for (var i = 0; i < locations.length; i++) {
        var beach = locations[i];
        var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
        var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            animation: google.maps.Animation.DROP,
            title: beach[0],
            zIndex: beach[3]
        });
        google.maps.event.addListener(marker, 'click', )
        // Push marker to markers array
        markers.push(marker);
    }
}



initialize();
mmarcc
  • 33
  • 1
  • 1
  • 7
  • There is no code in your question to add an InfoWindow. What have you tried (I assume you have seen the [documentation on InfoWindows](https://developers.google.com/maps/documentation/javascript/infowindows))? What issues are you having? – geocodezip Jan 19 '17 at 15:07
  • Your code shows no attempt to add an Infowindow to your map. There are enough tutorials and documentation around to easily answer your question. – MrUpsidown Jan 19 '17 at 15:07
  • I've edited my test wchich is not working by adding google.maps.event.addListener(marker, 'click', ) could you indicate me a tutorial doing this? – mmarcc Jan 19 '17 at 15:13
  • Did you even check the link in the first comment? The **first** code example there shows you exactly how to do that! – MrUpsidown Jan 19 '17 at 15:28
  • Yeas sure I checked but that is for a single marker and I don't understand how exactly to integrate that example in an array. – mmarcc Jan 19 '17 at 15:32
  • http://jsfiddle.net/upsidown/peor6rqk/ – MrUpsidown Jan 19 '17 at 15:34
  • ok. thanks I'll try to translate that into a variable structure. but that's not what i was looking for. – mmarcc Jan 19 '17 at 15:55

1 Answers1

0

Define the infowindow variable in SetMarkers()

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

and this to addListener() 

    google.maps.event.addListener(marker, 'click', (function (marker, i) {
        return function () {
           infowindow.setContent(beaches[i][0]);
           infowindow.open(map, marker);
        }
    })(marker, i));

Working example

http://jsfiddle.net/p646xmcr/413/

soupe
  • 95
  • 9