how can i set the google map to be in full screen using visual studio code ?

Question

how can i set the google map to be in full screen using visual studio code ?

sharon glipman 441

how can i set the map to be in full screen ? i tried in the style.css to change from 500px and 100% to 100% and 100% but then when it's both 100% it's in full size but it's not showing the map not even getting to the google maps when i run it.

height 500px and width 100% is working but i want full screen so i tried height 100% and width 100% but then it's not even browsing to the google maps.

css

#map
{
    height: 500px;
    width: 100%;
}


java

function initMap() {
    // The location of Uluru
    const uluru = { lat: 32.1582615544072, lng: 34.89155037133181 };

    // The map, centered at Uluru
    const map = new google.maps.Map(document.getElementById("map"), {
      zoom: 11,
      center: uluru,
      disableDefaultUI: true,
    });

    const rectangle = new google.maps.Rectangle({
        strokeColor: "#FF0000",
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: "#FF0000",
        fillOpacity: 0.35,
        map,
        bounds: {
            north: uluru.lat - 0.005,
            south: uluru.lat + 0.005,
            west: uluru.lng - 0.005,
            east: uluru.lng + 0.005,
        },
      });

    // The marker, positioned at Uluru
    /*const marker = new google.maps.Marker({
      position: uluru,
      map: map,
    });*/
}
  
  window.initMap = initMap;


html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Google Maps Api</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

<link rel="stylesheet" href="/style.css">

</head>
<body>
<h1>Google Maps</h1>
<div id="map"></div>

<script
      src="https://maps.googleapis.com/maps/api/js?key=I have a key&callback=initMap&v=weekly"
      defer
    ></script>
//<script src="/app.js"></script>
</body>
</html>

1 answer

Your answer

Answer 1

Hello @sharon glipman ,

Welcome to Microsoft Q&A forum.

I tested the div named map css in your demo script with height:100%

And width: 100% on my side. It doesn’t show browsing the google maps.(Here I use a background-color for test). In order for a percentage value to work for height, the parent's height must be determined. You should define the parent’s height when you use height 100% and width 100% on div.

Example:

html, body {
       height: 100%;
       margin: 0; 
}  

#map {
     width: 100%;
     height: 100%;
}

It also works if you use the following:

#map {
      position: fixed;
      top: 0; 
      right: 0; 
      bottom: 0; 
      left: 0;     
  }

Best Regards,

Tianyu

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Share via

how can i set the google map to be in full screen using visual studio code ?

1 answer

Your answer