phonegap google maps with framework7 v2

[innoflash]

Hi Framework7 developers.

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 Code:

    <div class="page-content">
        <div id="map_canvas">
            the map canvas
        </div>
    </div>

CSS Code:

#map_canvas, #journey_canvas, #routeMaps, #settingsmap{
    width: 100%;
    height: 100%;
    background-color: #0f0f0f;
    position: fixed;
   /* z-index: 5500;*/
}

JavaScript:

var div = document.getElementById("map_canvas");
        map = plugin.google.maps.Map.getMap(div, {
            controls: {
                myLocationButton: true
            },
            gestures: {
                'scroll': true,
                'tilt': true,
                'rotate': true,
                'zoom': true
            }
        });

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

[wf9a5m75]

Please share your project files on GitHub

[wf9a5m75]

Thank you for sharing. Excuse me, but could you tell me how to build your project?

[innoflash]

i was using phonegap build https://build.phonegap.com/

…

On Tue, Mar 20, 2018 at 6:18 PM, Masashi Katsumata ***@***.*** > wrote: Thank you for sharing. Excuse me, but could you tell me how to build your project? — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#2164 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AMLmNwNcNduo0hXRZCgfQrW3XxURvooMks5tgSvIgaJpZM4Sx88l> .

[wf9a5m75]

I can't login to your app with your provided credential.

[wf9a5m75]

Thank you for quick helps through e-mails.
I figured out the reason. Because the previous-page covers the current page.

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 setting 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.

[wf9a5m75]

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

.page-previous {
    display: none;
}

[wf9a5m75]

[innoflash]

very very solved here, thanks a lot@wf9a5m75, you are the best boss

…

On Tue, Mar 20, 2018 at 7:42 PM, Masashi Katsumata ***@***.*** > wrote: Thank you for quick helps through e-mails. I figured out the reason. Because the previous-page covers the current page. 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. <https://raw.githubusercontent.com/mapsplugin/cordova-plugin-googlemaps-doc/master/v1.4.0/class/Map/mechanism.png> When you open the setting page, the previous page is under the current page in HTML hierarchy. [image: screen shot 2018-03-20 at 10 40 07 am] <https://user-images.githubusercontent.com/167831/37672462-4275226c-2c2b-11e8-9f9c-2d45862b1175.png> However, the map view is NOT html element, the map view is displayed under the previous page. [image: capture] <https://user-images.githubusercontent.com/167831/37672530-69cb9ecc-2c2b-11e8-9b84-03d89e9f448a.png> — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#2164 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AMLmNyJcAFkxj41G-2DeM4a9XBHdOqkZks5tgT-agaJpZM4Sx88l> .

[innoflash]

I look upto your level of understanding code, you are inspiration On Tue, Mar 20, 2018 at 7:46 PM, Innocent Mazando <innocentmazando@gmail.com

…

wrote: very very solved here, thanks a ***@***.***, you are the best boss On Tue, Mar 20, 2018 at 7:42 PM, Masashi Katsumata < ***@***.***> wrote: > Thank you for quick helps through e-mails. > I figured out the reason. Because the previous-page covers the current > page. > > 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. > > > <https://raw.githubusercontent.com/mapsplugin/cordova-plugin-googlemaps-doc/master/v1.4.0/class/Map/mechanism.png> > > When you open the setting page, the previous page is under the current > page in HTML hierarchy. > [image: screen shot 2018-03-20 at 10 40 07 am] > <https://user-images.githubusercontent.com/167831/37672462-4275226c-2c2b-11e8-9f9c-2d45862b1175.png> > > However, the map view is NOT html element, the map view is displayed > under the previous page. > [image: capture] > <https://user-images.githubusercontent.com/167831/37672530-69cb9ecc-2c2b-11e8-9b84-03d89e9f448a.png> > > — > You are receiving this because you authored the thread. > Reply to this email directly, view it on GitHub > <#2164 (comment)>, > or mute the thread > <https://github.com/notifications/unsubscribe-auth/AMLmNyJcAFkxj41G-2DeM4a9XBHdOqkZks5tgT-agaJpZM4Sx88l> > . >

[innoflash]

very very solved here, thanks a lot@wf9a5m75, you are the best boss

[wf9a5m75]

You are welcome.

By the way, I appreciate if you support for this project.
This is not mandatory asking, but I appreciate if you donate some tip in order to continue active project working.

This is $5 donation link at paypal

[innoflash]

u got it

[wf9a5m75]

Thank you for supporting the maps plugin project! Enjoy the maps plugin!