События с маркерами на мобильном устройстве не работают

Question

Я создал карты Google для Рядом фуд-корты. В этом маркеры отображаются в браузере и доступны для интерактивного просмотра и предоставляют данные информационного окна. То же самое происходит на мобильном устройстве, отображаются маркеры и когда вы нажимаете маркер (коснитесь маркера), данные информационного окна не отображаются. Я пытался с таким количеством форумы и изменяет много кода и debug, но я не смог найти решение.

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> 

Так, пожалуйста, кто-нибудь помочь в этом отношении.

Answer 1

У меня была та же проблема. Проблема заключалась в том, что событие «click» не запускается, когда мы касаемся экрана мобильного телефона. Поэтому я перешел на событие «mousedown». Теперь я могу добавить маркеры

Answer 2

Событие mousedown было улучшением, однако на iOS события по-прежнему периодически срабатывали для меня. После большего исследования я нашел решение, которое работает 100% времени, установив optimized: false при создании маркера в дополнение к использованию события mousedown.

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