CODEWITHSUNDEEP
androidangularjsionic-framework
baldraider
baldraider

Reputation: 1069

Autocomplete does not work in mobile

Google api Autocomplete does not work in mobile but work perfectly in browser in ionic framework. In mobile it take auto value on long press but not on just tap.

`var autocompleteFrom = new google.maps.places.Autocomplete(inputFrom, options); var autocompleteto = new google.maps.places.Autocomplete(inputto,options);

google.maps.event.addListener(autocompleteFrom, 'place_changed', function() {
    var place = autocompleteFrom.getPlace();
    $rootScope.fromLat = place.geometry.location.lat();
    $rootScope.fromLng = place.geometry.location.lng();
    $rootScope.from = place.formatted_address;
    $scope.placesfrom = $rootScope.from;
    fromlat = $rootScope.fromLat;
    fromlng = $rootScope.fromLng;
    /*var googlemaphome = document.getElementById('googlemap-home');
    var Map = new google.maps.Map(googlemaphome,mapOptions);
    var posfrom = new google.maps.LatLng(fromlat,fromlng);
    var frommarker = new google.maps.Marker({
                    icon: 'img/marker.png',
                    position: posfrom,
                    });
    frommarker.setMap(Map);
    Map.setCenter(posfrom);
    $scope.Map = Map;*/
    var Mapoptions ={
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl:false,
        zoomControl:false,
        draggable:true,
        mapTypeControl:false,
        scaleControl:false,
        streetViewControl:false,
        overviewMapControl:false,
        rotateControl:true
    }
    var bounds = new google.maps.LatLngBounds();
    var googlemaphome = document.getElementById('googlemap-home');
    var Map = new google.maps.Map(googlemaphome,Mapoptions);
    var marker;
    var markers = [
            [fromlat,fromlng],
            [28.6328,77.2197]
    ];

    for(var i = 0; i < markers.length; i++ ) {
        var position = new google.maps.LatLng(markers[i][0], markers[i][1]);
        bounds.extend(position);
        marker = new google.maps.Marker({
            position: position,
            icon: 'img/marker.png',
            map: Map
        });
    }
    Map.fitBounds(bounds);
    x=1;
    checkstatus();
    $scope.$apply();
});

google.maps.event.addListener(autocompleteto, 'place_changed', function() {
    var place = autocompleteto.getPlace();
    $rootScope.toLat = place.geometry.location.lat();
    $rootScope.toLng = place.geometry.location.lng();
    $rootScope.to = place.formatted_address;
    $scope.placesto = $rootScope.to;
    tolat = $rootScope.toLat;
    tolng = $rootScope.toLng;
    y=1;
    checkstatus();
    $scope.$apply();
});
$scope.oncurrent = function(){
    $rootScope.currentpoint = currentpos;
    $rootScope.currentflag = 1;
    $scope.startpoint = currentpos;
    $scope.placesfrom = currentpos;
    geocoder.geocode( { 'address': currentpos}, function(results, status) {
        if(status == google.maps.GeocoderStatus.OK){
                $rootScope.currentlat = results[0].geometry.location.lat();
                $rootScope.currentlng = results[0].geometry.location.lng();
        }
    });
    x=1;
    checkstatus();
};

`

Upvotes: 2

Views: 836

Answers (1)

Simon Sch&#252;pbach
Simon Sch&#252;pbach

Reputation: 2683

Be sure that you allow google api communication. Perhaps the request to google are blocked. Maybe the transfer restriction are stronger on your device than in your browser

Install whitelist plugin with

ionic plugin add https://github.com/apache/cordova-plugin-whitelist.git

Then add this line to your config.xml(It is recommonded to add the specific URL, but for test case it's easier to allow everything)

<access origin="*"/>

And depends on usecase it is necessary to set the correct Content-Security-Policy in the header part of your index.html. But I think this isn't necessary in your situation.

<meta http-equiv="Content-Security-Policy" content=".....">

Upvotes: -1

Related Questions