CODEWITHSUNDEEP
javascripthtmlperformancegoogle-maps
kerabanaga
kerabanaga

Reputation: 53

Loading multiple google maps on a single page

I am trying to load multiple google maps on a single page, but page loading time is very high. How to speed up page loading time?

My example html code is below. Actually, below Google maps created in a loop and their number will be minimum 100.

    <!DOCTYPE html>
<html>
<head>        
</head>

<body>          
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>

    <div id="postid_78" style="width:600px;height:150px;">
        <script>                    
                var mapProp = {
                    center: new google.maps.LatLng('42.5000', '1.5000'),
                    zoom: 5,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                var map = new google.maps.Map(document.getElementById("postid_78"), mapProp);
                var marker = new google.maps.Marker({
                    position: new google.maps.LatLng('42.5000', '1.5000'),
                    map: map
                });
        </script>                
    </div>
    <hr />
    <div id="postid_77" style="width:600px;height:150px;">
        <script>                    
                var mapProp = {
                    center: new google.maps.LatLng('42.5000', '1.5000'),
                    zoom: 5,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                var map = new google.maps.Map(document.getElementById("postid_77"), mapProp);
                var marker = new google.maps.Marker({
                    position: new google.maps.LatLng('42.5000', '1.5000'),
                    map: map
                });
        </script>                
    </div>
    <hr />
    <div id="postid_76" style="width:600px;height:150px;">
        <script>                    
                var mapProp = {
                    center: new google.maps.LatLng('42.5000', '1.5000'),
                    zoom: 5,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                var map = new google.maps.Map(document.getElementById("postid_76"), mapProp);
                var marker = new google.maps.Marker({
                    position: new google.maps.LatLng('42.5000', '1.5000'),
                    map: map
                });
        </script>                
    </div>
    <hr />
    <div id="postid_75" style="width:600px;height:150px;">
        <script>                    
                var mapProp = {
                    center: new google.maps.LatLng('42.5000', '1.5000'),
                    zoom: 5,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                var map = new google.maps.Map(document.getElementById("postid_75"), mapProp);
                var marker = new google.maps.Marker({
                    position: new google.maps.LatLng('42.5000', '1.5000'),
                    map: map
                });
        </script>                
    </div>
    <hr />
    <div id="postid_74" style="width:600px;height:150px;">
        <script>                    
                var mapProp = {
                    center: new google.maps.LatLng('42.5000', '1.5000'),
                    zoom: 5,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                var map = new google.maps.Map(document.getElementById("postid_74"), mapProp);
                var marker = new google.maps.Marker({
                    position: new google.maps.LatLng('42.5000', '1.5000'),
                    map: map
                });
        </script>                
    </div>
    <hr />
    <div id="postid_73" style="width:600px;height:150px;">
        <script>                    
                var mapProp = {
                    center: new google.maps.LatLng('42.5000', '1.5000'),
                    zoom: 5,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                var map = new google.maps.Map(document.getElementById("postid_73"), mapProp);
                var marker = new google.maps.Marker({
                    position: new google.maps.LatLng('42.5000', '1.5000'),
                    map: map
                });
        </script>                
    </div>

</body>
</html>

Upvotes: 1

Views: 711

Answers (1)

Steven Web
Steven Web

Reputation: 1961

To improve the page load speed you can (must) do several things.

  1. Load the API asyncron DOCUMENTATION HERE
  2. Only initialize the maps when they are visible in viewport Therefore you can use plugins LIKE THIS
  3. Also place your JS script always at the bottom of the body tag. So all the content get loaded and no javascript will deny the content load

This should realy increase the page load. I've done this on several projects and it works fine!

Upvotes: 1

Related Questions