Maps Question

Using Ionic I am trying to have a button that says “Get Directions” that when pressed will call the locally installed Google Maps application and allow the user to get driving directions to my business from their current location. Does anyone have an example of anything like this?

  1. approach:
    use google maps api + google-maps directive to provide own routing service in your app
  2. approach:
    add a-tag with geo-coords
    open map app
  3. approach:
    call google maps app directly … i have found on stackoverflow^^
    $window.open(“http://maps.google.com/?q=” + address, “_system”);

You should get an google maps api key for your app first.

On your controller, you can use the following:

 function initialize() {

        $scope.getData($stateParams);
        directionsDisplay = new google.maps.DirectionsRenderer();

        //The timeout is to allow enough time to collect the $scope data.
        $timeout(function() {

            var Lat = $scope.restaurant.location_latitude;
            var Lng = $scope.restaurant.location_longitude;
            restLatLng = new google.maps.LatLng(Lat, Lng);

            var mapOptions = {
                center: restLatLng,
                zoom: 16,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

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

            //Marker + infowindow + angularjs compiled ng-click
            var contentString = "<div><a ng-click='clickTest()'><strong>YOUR COMPANY NAME</strong></a></div>";
            var compiled = $compile(contentString)($scope);

            var infowindow = new google.maps.InfoWindow({
                content: compiled[0]
            });

            var marker = new google.maps.Marker({
                position: restLatLng,
                map: map,
                title: $scope.restaurant.node_title
            });

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

            directionsDisplay.setMap(map);
            directionsDisplay.setPanel(document.getElementById('directionspanel'));

            Loading.stop();
            $scope.map = map;

        }, 1200);
    }


    $scope.centerOnMe = function() {

        if (!$scope.map) {
            console.log('Clicked on Find Me');
            return;
        } else {
            console.log('Clicked in $scope.map');
        }

        Loading.start();
        navigator.geolocation.getCurrentPosition(function(pos) {

            userPosition = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude);

            $scope.map.setCenter(userPosition);
            // console.log('Lat, Lng ' + $scope.map.setCenter );
            // console.log('User position is :' + userPosition);

            var userMarker = new google.maps.Marker({
                position: userPosition,
                map: $scope.map,
                title: 'Your current position'
            });


            $timeout(function() {
                // console.log('User position is '+ userPosition);
                $scope.calcRoute(userPosition, restLatLng);
                $scope.mapdetailsdisplay = true;
                Loading.stop();
            }, 2000);
            $scope.scrolltoroutedisplay();
            // $ionicLoading.hide();

        }, function(error) {
            Loading.stop();
            alert('Unable to get location: ' + error.message);
        });
    };


    $scope.clickTest = function() {
        alert("I Work");
    };

    //This will calculate the route and display it.
    $scope.calcRoute = function(user, place) {
        var routeStart = user;
        var routeEnd = place;
        var request = {
            origin: routeStart,
            destination: routeEnd,
            travelMode: google.maps.TravelMode.DRIVING
        };
        directionsService.route(request, function(response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                directionsDisplay.setDirections(response);
            }
        });
    }

    // google.maps.event.addDomListener(window, 'load', initialize);
    ionic.Platform.ready(initialize);
})

You then need a ng-click to trigger the centeronme() function and the routing information.

Hope it helps.

1 Like

All answers above are spot on. I use a combination of both in my mapping app.

I do some detection for platform and if it is android you can use the http://geo: tag and if it is iOS use http://maps: to open the native associated app. You can pass in a query or coordinates. I don’t have my code in front of me now but let me know if you want more info

Yes please, anything would be a help if its not to much trouble !

        $scope.gameLocationClicked = function() {
            //pass control to mobile nav system
            AnalyticsTracker.event('gameDetail.gameLocationClicked');
                
            //default - works on android - http://habaneroconsulting.com/insights/opening-native-map-apps-from-the-mobile-browser#.VDEf6PmSx8E 
            var geoUrl = "geo: " + $scope.gameAd.Latitude + ", " + $scope.gameAd.Longitude;
            if (ionic.Platform.isIOS()) {
                //https://developer.apple.com/library/ios/featuredarticles/iPhoneURLScheme_Reference/MapLinks/MapLinks.html
                geoUrl = 'maps:ll=' + $scope.gameAd.Latitude + ", " + $scope.gameAd.Longitude;
            }                    
            window.location = geoUrl;   
        }

Your code doesn’t work… :confused:

Yep As the variable gameAd is unknown here