0

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

Flash
  • 1,105
  • 14
  • 16

2 Answers2

1

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

Flash
  • 1,105
  • 14
  • 16
0

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

Jules Dupont
  • 10
  • 1
  • actually thats where the error is, i dont want that whole grey background to appear at all, there has to be the map on all that area – Flash Mar 14 '18 at 13:54
  • So, you wanna display text ("the map canvas") on the map canvas area but a grey background appear ? (sorry if I don't understand everything, i'm French) On my project, I display textDiv over my map canvas: https://drive.google.com/file/d/1RIfABkRrUN-0FKcJF3S4paHIQvFdIXDX/view My textDiv isn't in my map div, but I managed to put the text over the map canvas with a 'position: absolute; bottom: 70px;' – Jules Dupont Mar 14 '18 at 14:08
  • i want to remove tht text and that background as well, only the map is supposed to be there, in F7 v1 we didnt have that problem – Flash Mar 14 '18 at 14:45
  • Remove "the map canvas" in your map div ?? It's displayed although your text isn't in a

    – Jules Dupont Mar 14 '18 at 14:46
  • that text was to check whats showing on the grey area, after initialising the map all that has to disappear and leave only the map – Flash Mar 14 '18 at 14:47
  • My english is pretty bad, you mean your problem's solved? – Jules Dupont Mar 14 '18 at 14:52
  • i get you, no the problem is still there, as long as that text and grey area are there, the problem is there until when we are left with the map only – Flash Mar 14 '18 at 14:54
  • https://free.mailbigfile.com/download_from_cloud.php?file_id=15890753&retrieval_token=121f11429b009fec808f59530bde00df Its supposed to look like that – Flash Mar 14 '18 at 15:03