The following script demonstrates how to display more than one maps on the same page. We have to replace the YOUR_API_KEY with a valid google maps API key.
<!DOCTYPE html>
<html>
<head>
<style>
#map1, #map2 {
height: 400px;
width: 600px;
}
</style>
</head>
<body>
<h3>My Google Maps Demo</h3>
<div id="map1"></div>
<div id="map2"></div>
<script>
function initMap() {
var location1 = { lat: 35.339186, lng: 25.1315903 };
var map1 = new google.maps.Map(document.getElementById('map1'), {
zoom: 12,
center: location1
});
var location2 = { lat: 37.970897, lng: 23.7250093 };
var map2 = new google.maps.Map(document.getElementById('map2'), {
zoom: 12,
center: location2
});
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>
</body>
</html>