GoogleMap Markers are Not Clickable on the Mobile Devices

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);
    });

score 1 · Answer 1 · answered Oct 02 '15 at 13:47

I found the following solution : 1. create marker with option

"optimized: false" : ex => new google.maps.Marker({..., optimized: false, ...});

adding another event listener

google.maps.event.addDomListener(marker, "click", function() {...});

From google forum

score 1 · Accepted Answer · answered Jan 25 '12 at 09:21

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));

GoogleMap Markers are Not Clickable on the Mobile Devices

2 Answers2

Linked