Googlemaps panning problem

Hello,

im new to Ionic and im trying to setup a google maps with google maps Javascript v3 API.

My Problem:

for some reason the panning is not working on my android device. If i use my finger to touch the display and try to pan the map, nothing happens. The Google Maps controls are working, for example: i can touch the zoom control to zoom in and out.

Its working in my Chrome Browser.

My Maps View:

> <ion-view>
>     <ion-content>
>         <div id="map" data-tap-disabled="true"></div>
>     </ion-content>
> </ion-view>

The Controller:

> .controller('MapCtrl', function($scope) {

> $scope.map = new google.maps.Map(document.getElementById('map'), {
>     center: {lat: -34.397, lng: 150.644},
>     zoom: 8
>   });
>  
> });

Anyone knows how i can fix this ?

Thank you :slight_smile:

UPDATE! FOUND WORKAROUND

Explanation:

At least i found a simple workaround (after hours of headache).

I just found out, that Google Maps Javascript API has 3 API References.

The “Experimental Version”, “Release Version” and the “Frozen Version”.

If you include the API without specifying the exact version, it will use the “Experimental Version” by default.

As i noticed, this version (3.26) got an Update on 30. of August 2016 which seems to cause the bug.

SOLUTION:

Just change your API from:

src=“http://maps.google.com/maps/api/js?key=API-KEY&libraries=geometry,places”

to

src=“http://maps.google.com/maps/api/js?v=3&key=API-KEY&libraries=geometry,places”

Now its using the “Release Version” (last change on 17. of August 2016) of the API.

Source: https://developers.google.com/maps/documentation/javascript/versions

For me it works now on Android 4.3 (API Level 18) with cordova.

Best wishes

1 Like