Question

GoogleMap Markers are Not Clickable on the Mobile Devices (Touch Screens).
But, ok on any PC, so I can’t figure out what is the point.
Here is my code:

var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10,
    center: new google.maps.LatLng(60.037760, -44.100494),
    mapTypeId: google.maps.MapTypeId.ROADMAP
});

var locations = [
                    ['4lvin', 60.074433, -44.011917],
                    ['5irius', 60.037760, -44.100494]
                ];

for (var i = 0; i < locations.length; i++) {
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
    });

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

    google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
            infowindow.setContent('<h2>'+locations[i][0]+'</h2>\n<a>Read more..</a>');
            infowindow.open(map, this);
        }
    })(marker, i));
}

But then, when i use the following codes (the formal way of google for “google.maps.event.addListener”), Markers are showing only the same InfoWindows.

    var infowindow = new google.maps.InfoWindow({content: locations[i][0]});
    new google.maps.event.addListener( marker, 'click', function() {
        infowindow.open(map,this);
    });

Answer 1

The problem is because you’re doing a loop, you need to use a closure, otherwise all markers will just get the content you want to associate with the last marker. Your first bit of code is doing this correctly. Suggest you change to do the same again:

var infowindow = new google.maps.InfoWindow({content: locations[i][0]});
google.maps.event.addListener( marker, 'click', function(marker, i) {
  return function() {
    infowindow.setContent(locations[i][0]);
    infowindow.open(map,this);
  }
})(marker, i));