GoogleMap Markers are Not Clickable on the Mobile Devices

问题

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

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

回答2:

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

来源：https://stackoverflow.com/questions/8993300/googlemap-markers-are-not-clickable-on-the-mobile-devices

标签

google-maps

mobile

geolocation

google-maps-markers

infowindow