Google maps integration, V2

ionic-v1
1

I’m using mapsplugin/cordova-plugin-googlemaps and my problem is that de map when the app start the map appear like transparent or white but the map is loaded cuz when i scroll the “lat” and “lng” on camera_change function they show me different cords, and also the map how up when i switch tabs, i m using tab template.

CAN SOME ONE tell me about it?

CONTROLLER HERE:

.controller(‘DashCtrl’, function($scope, Parking) {

document.addEventListener(“deviceready”, function() {

var mapDiv = document.getElementById("map_canvas");

var DR = new plugin.google.maps.LatLng( 18.468860,-69.904866 );

$scope.map = plugin.google.maps.Map.getMap( mapDiv, {
  'controls': {
    'compass': true,
    'myLocationButton': true,
    'zoom': true,
  },
  'camera': {
    'zoom': 17
  }
});

var locatonList = Parking.all();

$scope.map.addEventListener(plugin.google.maps.event.MAP_READY, function() {
      $scope.map.setCenter( DR );
});

})

2

The google maps plugin is a native view that actually sits behind your HTML so the containing div must be transparent. Can we see your HTML and CSS. That may help.

4

.scroll,
.scroll-content > .scroll {
width: 100%;
height: 100%;
}
#map_canvas {
width: 100%;
height: 100%;
position: relative;
}

image
Screen Shot 2016-06-21 at 14.44.48.png1750×596 62.3 KB

5

fixe it, Thanks for your help
if( $rootScope.map ) {
$rootScope.map.clear();
$rootScope.map.remove();
//$(’#map_canvas’).remove();
$(’.map_canvas:not(:last)’).remove();
$rootScope.map = ‘’;
}

setTimeout(function(){

var mapDiv = document.getElementById("map_canvas");

var DR = new plugin.google.maps.LatLng( 18.468860,-69.904866 );

$rootScope.map = plugin.google.maps.Map.getMap( mapDiv, {
  'controls': {
    'compass': true,
    'zoom': true,
  },
  'camera': {
    'zoom': 17
  }
});

bla bla bla…