Markers click events are not working in mobile device

Question

I have created google maps for Nearby food courts. In this markers are displayed in browser and clickable and giving info window data.But same thing coming to mobile, markers are displayed and when am clicking the marker(tap the marker) info window data is not displayed.I tried with so many forums and changes lot of code and debug but i couldn't find the solution.

foodFactory.js

var foodModule = angular.module('foodModule', []);
foodModule.factory("foodFactory", ['$rootScope', '$window','foodServices', 'localStorageService', '$state', '$ionicLoading','$stateParams', 
    function($rootScope,  $window, foodServices, localStorageService, $state, $ionicLoading, $stateParams, $cordovaGeolocation ) {

        var foodCourtmap = {};
        var marker = {};


        var directionsDisplay = new google.maps.DirectionsRenderer({'draggable': true });
        var directionsService = new google.maps.DirectionsService();

        foodCourtmap.centerOnMe = function() {
            initialize();               
      };


      //intialze the google map it's show current location.
    function initialize() {

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

                navigator.geolocation.getCurrentPosition(function(pos) {

                foodCourtmap.latitude = pos.coords.latitude;
                foodCourtmap.longitude = pos.coords.longitude;

                var site = new google.maps.LatLng( foodCourtmap.latitude, foodCourtmap.longitude);

                var currentmapOptions = {
                    center: site,
                    zoom: 10,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };

                //current location address based on Latitude and Longitude 
                var lat = parseFloat(foodCourtmap.latitude);
                var lng = parseFloat(foodCourtmap.longitude);
                var latlng = new google.maps.LatLng(lat, lng);
                var geocoder = new google.maps.Geocoder();
                geocoder.geocode({
                    'latLng': latlng
                }, function(results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {
                        if (results[1]) {

                            var contentString = "Location: " + results[1].formatted_address;


                            var marker = new google.maps.Marker({
                                position: latlng,
                                map: map,
                                title: 'Current Location'

                            });
                            google.maps.event.addListener(marker, 'click', function(event) {

                                infowindow.setContent(contentString);
                                infowindow.open(map, marker);
                            });
                        }
                    }
                });


                var map = new google.maps.Map(document.getElementById("food_map_canvas"), currentmapOptions);

                // Places
                var request = {

                    location:site,
                    radius: '5000',
                    name: ['restaurent']

                };

            var service = new google.maps.places.PlacesService(map);
            service.search( request, callback );

            function callback(results, status) 
            {

                if (status == google.maps.places.PlacesServiceStatus.OK) {

                    for (var i = 0; i < results.length; i++) {

                        var place = results[i];
                        createMarker(results[i]);
                    }

                }

                else
                {
                       alert('No results found');
                }

            }

        var image = new google.maps.MarkerImage('img/Restaurant.png');


        function createMarker(place) {

                var placeLoc = place.geometry.location;

                var marker = new google.maps.Marker({
                  map: map,
                  title: place.name+","+place.vicinity,
                  position: place.geometry.location,
                  icon:image

                });

                var contentString =  place.name+","+place.vicinity;

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

                 foodCourtmap.map = map;

           });

       };

         $rootScope.createFoodCourt = function() {                        
                      foodCourtmap.centerOnMe();
                  } 

        return {

            init: function() {
                foodCourtmap.centerOnMe();
                return foodCourtmap;
            }
        };
    }
]);

food.html

<ion-view>
<ion-content scroll="false">

 <div id="food_map_canvas" data-tap-disabled="true" style="float:right;width:100%; height:100%"></div> 

</ion-content>
</ion-view>

So please anyone help in these regards.

possible duplicate of [Does Google Maps API V3 support touch event?](http://stackoverflow.com/questions/16168369/does-google-maps-api-v3-support-touch-event) — klasske, Aug 28 '15 at 09:19
@MikkoViitala, Exactly man. I think the answer given by `klasske` is not related to that?? — Anilkumar Bathula, Aug 28 '15 at 10:06

score 6 · Answer 1 · answered Feb 23 '16 at 07:48

The mousedown event was an improvement, however, on iOS the events still fired intermittently for me. After more investigation I found a solution that works 100% of the time by setting optimized: false when creating the marker in addition to using the mousedown event.

E.g.

var newMarker = new google.maps.Marker({
                    position: latLong,
                    map: map,
                    icon: 'https://maps.google.com/mapfiles/ms/icons/green-dot.png',
                    optimized: false
                });

https://code.google.com/p/gmaps-api-issues/issues/detail?id=3834

optimized: false (y) thxs u saved my time ,optimized: false work fine now the marker click event working for android devices on any scale or on any zoom level :) — sms247, Apr 19 '16 at 06:08

score 2 · Accepted Answer · answered Oct 23 '15 at 08:37

2

I had the same issue. The problem was 'click' event is not triggering when we touch on the mobile screen. So I changed to 'mousedown' event. Now I am able to add markers

answered Oct 23 '15 at 08:37

SANGEETH KUMAR S G

598
8
23

But, This is not working properly for all marker events in mobile. Some times event is triggered and some times not. It's very slow also as comparing with 'click' event. – Anilkumar Bathula Oct 23 '15 at 09:20

Markers click events are not working in mobile device

2 Answers2