How do I use cordova-googlemaps-plugin to fill the screen with maps?

Hello
I am currently practicing app development at cordova-googlemaps-plugin.

For the time being, I was able to display the map on the screen.
As for the map, how can I make it full on the screen?

The width is displayed properly regardless of whether you specify "px", "%", or "auto", but
The height does not respond with %% 」 or 」auto では, only with ppx 」 designation.

<!DOCTYPE html>
<html>
  <head>
    <metacharset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Security-Policy"/>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript">
   document.addEventListener("device ready", function(){
  vardiv = document.getElementById("map_canvas");
  varmap=plugin.google.maps.Map.getMap(div);
}, false);

    </script>
  </head>
  <body>
  <div style="width:auto;height:500px;"id="map_canvas"></div>
  </box>
  </body>
</html>

Thank you for your cooperation.

What's the problem?Or can it only be displayed with "px"?

Please let me know m(__)m

html cordova

2022-09-30 14:28

1 Answers

Basically, when using percentage for height, the height of the parent element must be determined.
html allows you to specify the percentage of the display area, so
How about html and body with height100%?

html,body{
    height —100%;
}

.wrapper{
    width:240px;
    height:240px;
}
US>.target{
    background-color:#a0a0F0;
    width: 100%;
    height —100%;
}

<div class="wrapper">
    <div class="target">
        Parent designated
    </div>
</div>
<hr of >
<div>
    <div class="target">
        No parent is designated.
    </div>
</div>

2022-09-30 14:28

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656