ionic-team / ionic-native-google-maps

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

Maps are not visible in android device - FIXED #332

Closed rajeshwarpatlolla closed 3 years ago

rajeshwarpatlolla commented 3 years ago

First of all i would like to thank all the contributors, maintainers of this repo. This package is really helpful.

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)

cordova-androidx-build 1.0.4 "cordova-androidx-build"
cordova-plugin-device 2.0.2 "Device"
cordova-plugin-googlemaps 2.8.0-20200709-2008 "cordova-plugin-googlemaps"
cordova-plugin-ionic-keyboard 2.2.0 "cordova-plugin-ionic-keyboard"
cordova-plugin-ionic-webview 4.2.1 "cordova-plugin-ionic-webview"
cordova-plugin-splashscreen 5.0.2 "Splashscreen"
cordova-plugin-statusbar 2.4.2 "StatusBar"
cordova-plugin-whitelist 1.3.3 "Whitelist"

If you use @ionic-native/google-maps, please tell the package.json (only @ionic-native/core and @ionic-native/google-maps are fine mostly)

Screenshot 2020-08-23 at 10 45 59 PM Screenshot 2020-08-23 at 10 45 12 PM

Current behavior: The maps are showing properly in web browser using ionic cordova run browser -l. But when i run in mobile with debug mode or apk directly installed, it's not showing the maps properly. Except the map i am able to see everything like google credits zoom in, zoom out, my location button etc. It's also giving my current location as well and when i tap on the screen all the related events are also triggered. But the issue is map is not displayed at all.

When i inspect the debug apk using chrome inspect tools, i found that the content on the DOM is not rendering.

Screenshot 2020-08-23 at 10 58 31 PM

Expected behavior: Maps should be displayed properly in android as well.

Screen capture or video record:

Related code, data or error log (please format your code or data):

I am waiting till the device is ready

async ngOnInit() {
  await this.platform.ready();
  this.renderMap();
}

Here is my css

#map_canvas {
  height: 350px;
}

Here is the complete JS code.

Screenshot 2020-08-23 at 11 09 57 PM
wf9a5m75 commented 3 years ago

Gray map means always your API key problem.

In Android, this plugin does *not" use Google Maps JavaScript v3. We use Google Maps SDK for Android

rajeshwarpatlolla commented 3 years ago

Thanks for the response @wf9a5m75. It's working fine after adding android sdk api to the project in google maps dashboard.