158 Views
To make a map fullscreen in Elementor or HTML, you can use CSS to style the map container to take up the entire viewport. Here’s how you can achieve this:
HTML structure:
<div id="map-container">
<!-- Your map content goes here -->
</div>
CSS:
/* Ensure the map container fills the entire viewport */
#map-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999; /* Ensure the map appears on top of other content */
}
/* Ensure the map itself fills the entire container */
#map {
width: 100%;
height: 100%;
}
JavaScript (if using a library like Google Maps):
// Initialize map
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
// Your map options go here
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
Ensure you replace the content of #map-container
with your actual map content (e.g., if you’re using Google Maps, replace <!-- Your map content goes here -->
with the code provided by the Google Maps API).
This CSS will make the #map-container
element fullscreen by setting its position to fixed
, and setting its width and height to 100%
. The z-index
property ensures that the map appears on top of other content.
Make sure to adjust the selectors (#map-container
, #map
) to match your actual HTML structure and CSS classes.