ionic-team / ionic-native-google-maps

Google maps plugin for Ionic Native
Other
221 stars 125 forks source link

Map wont render on android (api key works) #276

Closed marianoir closed 4 years ago

marianoir commented 4 years ago

I'm submitting a ... (check one with "x")

If you choose 'problem or bug report', please select OS: (check one with "x")

cordova information: (run $> cordova plugin list)

Angular 7

cordova-plugin-android-permissions 1.0.2 "Permissions"
cordova-plugin-camera 4.1.0 "Camera"
cordova-plugin-crop 0.3.1 "CropPlugin"
cordova-plugin-device 2.0.3 "Device"
cordova-plugin-device-orientation 2.0.1 "Device Orientation"
cordova-plugin-file 6.0.2 "File"
cordova-plugin-file-transfer 1.7.1 "File Transfer"
cordova-plugin-geolocation 4.0.2 "Geolocation"
cordova-plugin-globalization 1.11.0 "Globalization"
cordova-plugin-googlemaps 2.6.2 "cordova-plugin-googlemaps"
cordova-plugin-ionic-keyboard 2.2.0 "cordova-plugin-ionic-keyboard"
cordova-plugin-ionic-webview 2.5.2 "cordova-plugin-ionic-webview"
cordova-plugin-media 5.0.3 "Media"
cordova-plugin-media-capture 3.0.3 "Capture"
cordova-plugin-nativeaudio 3.0.9 "Cordova Native Audio"
cordova-plugin-photo-library 2.2.1 "Photo Library"
cordova-plugin-splashscreen 5.0.3 "Splashscreen"
cordova-plugin-statusbar 2.4.3 "StatusBar"
cordova-plugin-telerik-imagepicker 2.3.3 "ImagePicker"
cordova-plugin-vibration 3.1.1 "Vibration"
cordova-plugin-whitelist 1.3.4 "Whitelist"
phonegap-plugin-barcodescanner 8.1.0 "BarcodeScanner"

"@ionic-native/core": "^5.5.1",
"@ionic-native/google-maps": "^5.5.0",

Current behavior: The google map plugin works fine in browser (i understand that uses google api javascript) but it does not render on android. The problem is not the API KEY because every time i enter in the page the android sdk api updates the counter on google developers console (and i also tried another api key). The map seems not to be render on the div. There is no google logo or anything, the div just stays as it is.

I have tried disabling the api key to see what happened but it doesnt even show me a message or google logo.

I have tried on emulators, bluestacks, real devices with no luck. I have even downloaded the example code that is here on git with the "Demo button" but the same happens.

I have another app where the map renders (Angular 8) but it was made from the scratch, this one is put on an Angular 7 template.

openMap()
  {

    let mapOptions: GoogleMapOptions = {     
      camera: {
        target: {
          lat:42,
          lng:2.45
        },
        zoom: 18,
        tilt: 0,
      }
    };

    this.div = document.getElementById("mapa");
    this.map = GoogleMaps.create(this.div, mapOptions);    

    this.map.one(GoogleMapsEvent.MAP_READY)
    .then(() => {     

      alert (this.div.innerHTML);
      alert (this.div.outerHTML);
    });

  }

HTML

<ion-content>  
    <ion-button (click)="openMap()">Press to see the map</ion-button>
  <div style="height: 100%;" id="mapa">HERE THE MAP</div> 

</ion-content>

Expected behavior: It should render the map like in the browser

Screen capture or video record: WHen i press the button , the inner and outer html seem to be fine but no map is render.

ScreenHunter 33 ScreenHunter 34 ScreenHunter 35 ScreenHunter 36

This is my git hub project.

I have reeplaced the api key on the config.xml and in google services with some XX .

This is the page where i was trying and trying. Just entering in the first page of the app it will redirect you to the page with the map. There is a button , when ypu press it it should render the map but now only shows you some alert with the inner and outer html of the map div

https://github.com/marianoir/metur/tree/master/src/app/MeeturComponentes/pruebagps

Thanks in advance

marianoir commented 4 years ago

Sorry i have discovered the problem , when i removed the ion content tag the maps appeared, maybe there is something that is covering the map. I close this issue