Computer Magic Logo
Display more than one maps

Thursday, December 1, 2016

Published by Aristotelis Pitaridis

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>