phonegap google maps with framework7 v2

Question

i am having a serious problem working with phonegap google maps with Framework7 esp v2,

I am required to select a div in my HTML to place a map here is what i did:

HTML:

JavaScript:

There is more logic to the JS file but on my android device when i open this page i am getting the page overlapping the map.

THE MAP IS RENDERED BUT IS NOT REPLACING THE ORIGINAL HTML

And here how it looked in F7 v1

Answer 1

But, why would you like to display your text on the map canvas, you want to then display a button on the map canvas ?

Because, if you want to display a button, create custom controls https://developers.google.com/maps/documentation/javascript/controls#Adding_Controls_to_the_Map

var deleteAllButton = document.getElementById('deleteAllButton');
map.controls[google.maps.ControlPosition.BOTTOM].push(deleteAllButton);

If it's a simple text, put it here

<div id="map" oncontextmenu="return false"></div>
<p>Your text</p>

And then use position: absolute

Answer 2

First of all, you need to understand how this plugin displays the map. This plugin generates the native map view under the browser, and the browser is going to be transparent.

When you open the new page, the previous page is under the current page in HTML hierarchy.

However, the map view is NOT html element, the map view is displayed under the previous page.

Thus, solution is, you just add a CSS rule.

.page-previous {
    display: none;
}

https://github.com/mapsplugin/cordova-plugin-googlemaps/issues/2164

Special thanks to wf9a5m75