Google maps markers info window data is not displaying in mobile device


#1

In my chrome emulator, these are working fine. This means clicking the markers is giving the data in info window. But coming to mobile device markers, it couldn’t be clickable and no data is found on the markers. I tried with so many options using ionic forums, but not getting the correct answer so far. So please anyone help in these regards.

foodCourtFactory.js

 var foodCourtmap = {};
    var marker = {};
    foodCourtmap.map = {};

    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() {

            navigator.geolocation.getCurrentPosition(function(pos) {

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

                //foodCourtmap.latitude =17.449384;
                //foodCourtmap.longitude =78.385683;

            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;

                        alert(contentString);
                        var infowindow = new google.maps.InfoWindow({
                            content: contentString
                        });

                        var marker = new google.maps.Marker({
                            position: latlng,
                            map: map,
                            title: 'Current Location'
                        });
                        google.maps.event.addListener(marker, 'click', function() {
                            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;              
            var infowindow = new google.maps.InfoWindow({
                            content: contentString
                        });
            google.maps.event.addListener(marker, 'click', function() {
                            //alert(infowindow.setContent(contentString));
                            infowindow.open(map, marker);
                        });

        }

        foodCourtmap.map = map;

       });
   };

    return {

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

foodCourt.html

<ion-view>
<ion-content>

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

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

#2

Instead of “click” try “mousedown”


#3

Thanks @jawache. It’s working good. But here getting one small problem i.e, some of the markers are not displaying info window content…So please solve my issue.


#4

If you provide say a plunkr which expresses the bug i can take a look?


#5

@jawache, if we are using the mousedown option, I have one doubt regarding this one like Mouse Events don’t work on gesture based devices like Ipads or mobile phone. What my assumption is it correct as of my knowledge ??