cordova-plugin-googlemaps: Map not showing up on Android

I have the same piece of code working on iOS but on Android the map does not display. The map is initialized and I get the Google logo on the bottom, but nothing is displayed on the map itself

I am loading the map the standard way:


/**
 * Creates the map based on the Google sdk for android/iphone
 *
 */
var loadMap = function() {
  document.addEventListener("deviceready", function() {
    var div = document.getElementById("map_canvas");

    // Initialize the map view
    map = plugin.google.maps.Map.getMap(div);

    // Wait until the map is ready status.
    map.addEventListener(plugin.google.maps.event.MAP_READY, onMapReady);
  }, false);
}

About this issue

  • Original URL
  • State: closed
  • Created 8 years ago
  • Comments: 26 (7 by maintainers)

Most upvoted comments

I was running into this problem today as well, and decided to really, really read the instructions for any clues. Found the critical part here:

As of version 1.2.0, you can put any HTML element on top of the map. You need to understand how this works.

The map is a native view, not related to JavaScript. It means the map and the browser are different views, the map is not rendered inside the browser view, such as HTML.

The map was being rendered, but there were elements on top of it that had an opaque background. I started making elements transparent via dev tools, and voilà, the map appeared!

Hope this helps others running into the same problem.

Ok, so for everyone still searching solution for blank map with Google logo and buttons but no actual map and are sure that their sha1 and bundle id and api key is correct 😃 I found that creating api key for android will not activate actual api’s. @chillyprig comment was calling my attention, so I check again, and yes, several apis weren’t enabled, so I enabled these ones, and after few minutes I could see the map generates in the app…

Hope it helps

apis

I fix this by Enable Google Maps Android API in google developer console.