Open Google Maps' InfoWindow on mobile

Question

Explanation

When touching RichMarker's marker on mobile (iOS, at least), nothing happens. I find out that I had to "double-touch" to open it. However, when touching Google Maps' marker, it opens (and close touching the map) just fine. I think it's something with RichMarker's code, but I can't find what is it. Is there anything that fixes it? Am I doing anything wrong?

Code

You can also open it on JSFiddle.

function initialize() {
    var myLatLng1 = new google.maps.LatLng(37.787776, -122.405309);
    var myLatLng2 = new google.maps.LatLng(37.788005, -122.405147);

    var mapOptions = {
        zoom: 20,
        center: new google.maps.LatLng(37.787901, -122.405197)
    };

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

    var marker1 = new RichMarker({
        position: myLatLng1,
        map: map,
        flat: true,
        content: '<i class="fa fa-map-marker fa-4x""></i>'
    });

    var marker2 = new google.maps.Marker({
        position: myLatLng2,
        map: map
    });

    var contentString = 'infoWindow is opened'

    var infowindow = new google.maps.InfoWindow({
        content: contentString,
        pixelOffset: new google.maps.Size(0, -42)
    });

    google.maps.event.addListener(marker1, 'click', function() {
        infowindow.open(map, marker1);
    });

    google.maps.event.addListener(marker2, 'click', function() {
        infowindow.open(map, marker2);
    });

    google.maps.event.addListener(map, 'click', function() {
        infowindow.close();
    });
}

initialize();

#map-canvas {
  width: 500px;
  height: 400px;
}

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
    </head>
    <body>
        <div id="map-canvas"></div>
        
        <script src="https://code.jquery.com/jquery-3.1.1.js"></script>
        <script src="https://maps.googleapis.com/maps/api/js"></script>
        <script src="https://rawgit.com/luiz-machado/js-rich-marker/gh-pages/src/richmarker.js"></script>
    </body>
</html>

Thanks in advance,
Luiz.

score 0 · Accepted Answer · edited Nov 22 '20 at 17:18

I found a great solution by nathan-m. Since this plugin he built works with Google Maps (at least it's inside new google.maps.Marker as icon), I don't need to use RichMarker (which is great, but has some bugs) anymore.

All I had to do was to include fontawesome-markers.min.js (or you can use NPM/Bower as he says in his answer) and the code above.

var marker1 = new google.maps.Marker({
    map: map,
    icon: {
        path: fontawesome.markers.MAP_MARKER,
        scale: 0.65,
        strokeColor: 'transparent',
        fillColor: '#000000',
        fillOpacity: 1
    },
    clickable: true,
    position: myLatLng1
});

You can see it working on JSFiddle.

Open Google Maps' InfoWindow on mobile

Explanation

Code

1 Answers1