My goal is to display two maps side by side, one on the right and the other on the left. However, when I try to implement this, one map appears on top of the other. I believe that CSS positioning can help me achieve the desired layout, but as a beginner in CSS, I'm still figuring things out. To make it clearer for you, I have separated the two maps below.
<div>
<iframe
width="400"
height="400"
frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/directions?key=MYAPIKEY&origin=Marrakech+Menara+Airoport+Morocco&destination=Faculté+des+sciences+Marrakech+Morocco&avoid=tolls|highways" allowfullscreen>
</iframe>
</div>
<div>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Traffic layer</title>
<style>
#map {
height: 400px;
width: 400px;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: {lat: 31.650456, lng: -8.016392}
});
var trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(map);
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=MYAPIKEY&callback=initMap">
</script>
</body>
</html>
</div>