geocoder.geocode callback is never called in ionic cordova

Question

I have a ionic/cordova android project where I try to fetch the location for some coordinates inside a service; maps sdk is loaded alright and in my service, I have the following:

var lat = 30;  // example
var lng = 32;  // example
var geocoder = new google.maps.Geocoder();  // geocoder is not undefined here
var latlng = new google.maps.LatLng(lat, lng);

geocoder.geocode({'location': latlng}, function(results, status) {
    console.log("geocoder.geocode callback"); // never printed ...
});

In the HTML, the API is loaded like this:

<script type="text/javascript"
    src="https://maps.googleapis.com/maps/api/js?v=3&key=MOBILE_API_KEY"></script>

Any idea what am I doing wrong here?

[EDIT]

I tried removing the key argument from the script loading url; no changes there; accessing the app through the browser, geocoder.geocode worked alright; running it with the android emulator or in an android device, it did not work. Could this be permission related or something?

By the way, my content-security-policy is set as follow, for now:

[EDIT2]

Just made an pen with a ionic project example; create a project with:

ionic start TheBlank blank

and copy the code. http://codepen.io/anon/pen/RPxNaL

// add the android platform 
ionic platform add android 
// run the project on device
ionic run android // geocode callback will not work here
ionic serve // geocode callback will work here

hard to say, the code you've given looks valid. Possibly it's something else wrong in the actual code. Can you add a link to some code on jsfiddle or somewhere that demonstrates the full code, enough at least to show where the problem might be? — duncan, Jun 25 '15 at 12:54
Also, have you taken a look at this plugin? https://github.com/wf9a5m75/phonegap-googlemaps-plugin/wiki/Geocoder — not_a_bot, Jun 25 '15 at 17:13
not_a_bot, I tried to capture error messages, but no, I don't get any error (that I know of). There is a missing configuration for my example: — Italo Maia, Jun 25 '15 at 21:17
I have not, not_a_bot; the goal is to do this without an plugin; nonetheless, there is new info on the subject: If I try to call geocode running ionic from the web browser, I get the correct result; running it from the emulator or device, I don't, the callback is never called. — Italo Maia, Jun 26 '15 at 06:10
I'm starting to suspect this could be a permission related problem. I made a simple example using google maps and the map only loads in the browser. When running in the device, it simply doesn't load the map. — Italo Maia, Jun 26 '15 at 19:06

Italo Maia · Answer 1 · 2015-07-02T20:02:40.903

The problem was somehow related to ionic. After using cordova to run and emulate, things started working. I tested this with the ionic-starter-maps template. To do it yourself, try this:

ionic start MyMaps maps
ionic platform add android
ionic emulate android  # won't work

ionic start MyMaps maps
cordova platform add android
cordova emulate android  # works!

Also, make sure content-security-policy has the required rules:

<meta http-equiv="Content-Security-Policy" content="
        default-src 'self' data: gap:
            https://ssl.gstatic.com;
        script-src 'self' 'unsafe-inline' 'unsafe-eval'
            https://maps.gstatic.com https://maps.googleapis.com;
        img-src     'self'
            https://maps.gstatic.com https://maps.googleapis.com;
        style-src   'self' 'unsafe-inline' *;
        media-src   *;">

geocoder.geocode callback is never called in ionic cordova

1 Answers1