0

I'm trying to create a cordova project that marks some locations in map and getting the distance in between the selected location and current location of the user.

I have used cordova-plugin-googlemaps for displaying the google map and used cordova-plugin-googlemaps and for getting the distance netween the selected location and current location of the user I have used the code from google map distance matrix service

I am getting ReferenceError: google is not defined when I run my cordova application in android device but its working fine in browser

I defined google map like this>

......
......

plugin.google.maps.environment.setEnv({
   'API_KEY_FOR_BROWSER_RELEASE': config.GOOGLE_MAP_API_KEY,
   'API_KEY_FOR_BROWSER_DEBUG': config.GOOGLE_MAP_API_KEY
});
initializeGMap(currentLat, currentLng);

......
......


map distance matrix service


......
......

function showNearestROs() {
        mapData.forEach(roData => {
            var coordinates = roData.coordinates.substring(1, roData.coordinates.length).substring(0, roData.coordinates.length - 2).split(',');
            var destination = {
                lat: parseFloat(coordinates[0].trim()),
                lng: parseFloat(coordinates[1].trim()),
            };
            origin = {
                lat: parseFloat(localStorage.getItem("currentLat").trim()),
                lng: parseFloat(localStorage.getItem("currentLng").trim()),
            };
            if (roData.status === 1) {
                calculateRoadMapDistance(origin, destination, roData);
            } else {
                console.log("Charging station unavailable");
            }
        });
    }

    function calculateRoadMapDistance(origin, destination, roData) {

        var service = new google.maps.DistanceMatrixService();

        service.getDistanceMatrix({
            origins: [origin],
            destinations: [destination],
            travelMode: 'DRIVING',
            unitSystem: google.maps.UnitSystem.METRIC,
            // unitSystem: google.maps.UnitSystem.IMPERIAL,

        }, function (response, status) {
            if (status !== 'OK') {
                console.log('Error was: ' + status);
            } else {

                var travelInfo = response.rows[0].elements[0]

                if (travelInfo.status == 'OK') {
                    roMap.push({
                        'distance': parseFloat(travelInfo.distance.text.split(" ")[0].replace(/,/g, '')),
                        'duration': travelInfo.duration.text,
                        'data': roData,
                    });
                } else {
                    console.log("error = ", travelInfo.status);
                }
            }
        });
    }

but I am getting error at var service = new google.maps.DistanceMatrixService();

JESLIN
  • 159
  • 1
  • 2
  • 14
  • Can you please post your full code so that we can reproduce this issue from our side? – evan Oct 20 '19 at 17:01
  • I have pushed the spefic file to https://github.com/jzlinn/public-demo/blob/master/maps.js – JESLIN Oct 21 '19 at 06:23
  • Thanks for sharing your code. Have you added an Android API key? I can see you added your API key in `API_KEY_FOR_BROWSER_RELEASE` but from the library's docs I understand that for Android you need to add another API key in `GOOGLE_MAPS_ANDROID_API_KEY` that is valid for Android. – evan Oct 22 '19 at 09:39
  • I have added it in **config.xml** file `` – JESLIN Oct 23 '19 at 06:34
  • I have referred this https://www.npmjs.com/package/cordova-plugin-googlemaps @evan – JESLIN Oct 23 '19 at 07:01

0 Answers0