I'm seeking assistance to implement a unique Google Maps Map on my webpage. I have a particular vision in mind - a diagonal map (as pictured below).
My initial approach was to create a div, skew it with CSS, place the map inside, and then skew the map negatively. However, this resulted in the map's CSS overriding the div attributes and appearing straight. How can I separate them to achieve my desired effect?
Here is the code:
HTML:
<div id="diagonal">
<div id="map"></div>
</div>
<script src="https://maps.googleapis.com/maps/api/js?callback=myMap"></script>
CSS:
#diagonal {
left: 0px;
right: 0px;
transform: skewY(-6deg);
height: 40vh;
}
#map {
top: 5em;
left: 0px;
right: 0px;
height: 50vh;
transform: skewY(0deg);
}
JS:
function myMap() {
var mapOptions = {
center: new google.maps.LatLng(51.5, -0.12),
zoom: 10,
mapTypeId: google.maps.MapTypeId.roadmap
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
}
Your assistance is greatly appreciated.
Desired Image: https://i.stack.imgur.com/c2TfI.jpg