CODEWITHSUNDEEP
google-mapsphonegaphtml-framework-7phonegap-gmaps-plugin
Flash
Flash

Reputation: 1125

phonegap google maps with framework7 v2

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: enter image description here enter image description here

JavaScript: enter image description here

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

How it is in F7 v2

And here how it looked in F7 v1 v1 model

Upvotes: 0

Views: 842

Answers (2)

Flash
Flash

Reputation: 1125

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. enter image description here

When you open the new page, the previous page is under the current page in HTML hierarchy. enter image description here

However, the map view is NOT html element, the map view is displayed under the previous page. enter image description here

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

.page-previous {
    display: none;
}

enter image description here

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

Special thanks to wf9a5m75

Upvotes: 1

Jules Dupont
Jules Dupont

Reputation: 10

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

Upvotes: 0

Related Questions