Bug with touchevents for markers when using google maps angularjs and onsen

Question

I have a map setup with custom markers. I used a jsfiddle to make this and it works there: https://jsfiddle.net/LdLy6t90/2/

However, when I add the same to my onsen ui-based app, the touchevents for google map markers don't get fired.

I'm guessing this is happening because of the js I'm using there's probably something causing a conflict. This is what I'm using in my header:

<script src="https://maps.googleapis.com/maps/api/js?key=XXXX" type="text/javascript"></script>
<script src="js/youtube.js"></script>
<script src="js/angular.js"></script>
<script src="js/angular-animate.js"></script>
<script src="js/angular-aria.js"></script>
<script src="js/angular-messages.js"></script>
<script src="js/angular-ui-router.min.js"></script>
<script src="js/angular-sanitize.js"></script>    
<script src="lib/onsen/js/angular/angular-touch.js"></script>   
<script src="lib/onsen/js/onsenui.js"></script>
<script src="cordova.js"></script>
<script type="text/javascript" src="js/paypal-mobile-js-helper.js"></script>
<script src="js/plugins.js"></script>
<script src="js/app.js"></script>

My code for the maps is below, first the HTML:

    <div ng-app="mapsApp" ng-controller="MapCtrl">
      <div id="map"></div>
      <div id="class" ng-repeat="marker in markers | orderBy : 'title'">
        <a href="#" ng-click="openInfoWindow($event, marker)">{{marker.title}}</a>
      </div>
    </div>

My app.js is defined as:

angular.module('mapsApp', [])
  .controller('MapCtrl', function($scope) {

    $scope.places = [{
      place: 'Signs Restaurant & Bar',
      desc: '558 Yonge St, Toronto, ON, M4Y 1Z1<br/><a href="https://www.google.ca/maps/place/SIGNS+Restaurant+%26+Bar/@43.6646519,-79.3868667,17z/data=!3m1!4b1!4m2!3m1!1s0x882b34b3ead9489d:0x5fe4ae3930837053" target="_blank">View in Maps</a>',
      lat: 43.664639,
      long: -79.384649,
      icon: "http://google-maps-icons.googlecode.com/files/home.png"
    }, {
      place: 'Green P near Yonge & Wellesley',
      desc: ' Yonge St & Wellesley St, Toronto, ON<br/>Closest parking lot to SIGNS, about 180m.<br/><a href="https://www.google.ca/maps/place/17+Wellesley+St+E,+Toronto,+ON+M4Y/@43.6649906,-79.3859414,17z/data=!3m1!4b1!4m2!3m1!1s0x882b34b3a36f5213:0xa18b56300c35d337" target="_blank">View in Maps</a>',
      lat: 43.6649843,
      long: -79.3837849,
      icon: "http://google-maps-icons.googlecode.com/files/home.png"
    }, {
      place: 'Parklink Parking',
      desc: ' 8 Alexander St, Toronto, ON M4Y 1B4<br/>260m from SIGNS.<br/><a href="https://www.google.ca/maps/place/Parklink+Parking/@43.6631595,-79.3855347,17z/data=!3m1!4b1!4m2!3m1!1s0x882b34bd1cbf7183:0xde6ae8392ca8dfa2" target="_blank">View in Maps</a>',
      lat: 43.663157,
      long: -79.3833836,
      icon: "http://google-maps-icons.googlecode.com/files/home.png"
    }, {
      place: 'Unit Park',
      desc: '25 Grosvenor St, Toronto, ON<br/>About 300m from SIGNS.<br/><a href="https://www.google.ca/maps/place/Unit+Park+Co+Inc/@43.6626638,-79.3872999,17z/data=!3m1!4b1!4m2!3m1!1s0x882b34d25d8bb231:0xab7d297d190ec1fe" target="_blank">View in Maps</a>',
      lat: 43.6626531,
      long: -79.3851467,
      icon: "http://google-maps-icons.googlecode.com/files/home.png"
    }];

    var mapOptions = {
      zoom: 16,
      center: new google.maps.LatLng(43.664639, -79.384649),
      mapTypeId: google.maps.MapTypeId.TERRAIN
    }

    $scope.map = new google.maps.Map(document.getElementById('map'), mapOptions);

    $scope.markers = [];

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

    var createMarker = function(info) {

      var marker = new google.maps.Marker({
        map: $scope.map,
        position: new google.maps.LatLng(info.lat, info.long),
        title: info.place,
        icon: info.icon,
        animation: google.maps.Animation.DROP
      });
      marker.content = '<div style="text-align: center;" class="infoWindowContent">' + info.desc + '</div>';

      google.maps.event.addListener(marker, 'click', function() {
        infoWindow.setContent('<h2>' + marker.title + '</h2>' + marker.content);
        infoWindow.open($scope.map, marker);
      });

      $scope.markers.push(marker);

    }
    var placeses = $scope.places;
    for (var i = 0; i < placeses.length; i++) {
      createMarker(placeses[i]);
    }

    $scope.openInfoWindow = function(e, selectedMarker) {
      e.preventDefault();
      google.maps.event.trigger(selectedMarker, 'click');
    }

  });

Everything else works, except for the touchevent for the markers and I can't figure out why it works in the fiddle, but not in my onsenui based app in cordova. Any help with this would be appreciated.

Answer 1

The problem was with a few mobile devices, not all. Thanks to GoogleMap Markers are Not Clickable on the Mobile Devices - I found my solution.

1. Use

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

2. Change event listener to

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