Question

I currently have 3 separate google maps being loaded on my web page using the javascript api and they take a good few seconds to load in which this renders the page inactive until they have finished.

Does anyone have any recommendations on what I can do to change this? It is very slow at the moment and I don’t know how to get around this.

Thanks!

function googlemap() {

    // map pin
    var companyImage = new google.maps.MarkerImage('http://urlgoeshere.co.uk/images/home/map_pin.png',
        new google.maps.Size(100,60),
        new google.maps.Point(0,0),
        new google.maps.Point(21,65)
    );

    // map pin shadow
    var companyShadow = new google.maps.MarkerImage('http://urlgoeshere.co.uk/images/home/map_shadow.png',
        new google.maps.Size(120,60),
        new google.maps.Point(0,0),
        new google.maps.Point(23,23)
    );

    // map one
    var onePos = new google.maps.LatLng(44.374411, -1.088402);
    var oneSettings = {
        zoom: 15,
        center: onePos,
        scrollwheel: false,
        mapTypeControl: false,
        zoomControl: true,
        zoomControlOptions: {
            style: google.maps.ZoomControlStyle.SMALL,
            position: google.maps.ControlPosition.BOTTOM_CENTER
        },
        panControl: false,
        streetViewControl: true,
        streetViewControlOptions: {
            position: google.maps.ControlPosition.BOTTOM_CENTER
        },
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var oneMap = new google.maps.Map(document.getElementById("one_map"), oneSettings);
    var oneMarker = new google.maps.Marker({
        position: onePos,
        map: oneMap,
        icon: companyImage,
        shadow: companyShadow,
        zIndex: 3
    }); 

    google.maps.event.addListener(oneMarker, 'click', function() {
        infowindow.open(map,oneMap);
    });


    // two
    var twoPos = new google.maps.LatLng(42.349055,4.110803);
    var twoSettings = {
        zoom: 15,
        center: twoPos,
        scrollwheel: false,
        mapTypeControl: false,
        zoomControl: true,
        zoomControlOptions: {
            style: google.maps.ZoomControlStyle.SMALL,
            position: google.maps.ControlPosition.BOTTOM_CENTER
        },
        panControl: false,
        streetViewControl: true,
        streetViewControlOptions: {
            position: google.maps.ControlPosition.BOTTOM_CENTER
        },
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var twoMap = new google.maps.Map(document.getElementById("two_map"), twoSettings);
    var twoMarker = new google.maps.Marker({
        position: twoPos,
        map: twoMap,
        icon: companyImage,
        shadow: companyShadow,
        zIndex: 3
    }); 

    google.maps.event.addListener(twoMarker, 'click', function() {
        infowindow.open(map,twoMap);
    });

    // three
    var threePos = new google.maps.LatLng(32.377624,-0.523466);
    var threeSettings = {
        zoom: 15,
        center: threePos,
        scrollwheel: false,
        mapTypeControl: false,
        zoomControl: true,
        zoomControlOptions: {
            style: google.maps.ZoomControlStyle.SMALL,
            position: google.maps.ControlPosition.BOTTOM_CENTER
        },
        panControl: false,
        streetViewControl: true,
        streetViewControlOptions: {
            position: google.maps.ControlPosition.BOTTOM_CENTER
        },
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var threeMap = new google.maps.Map(document.getElementById("three_map"), threeSettings);
    var threeMarker = new google.maps.Marker({
        position: threePos,
        map: threeMap,
        icon: companyImage,
        shadow: companyShadow,
        zIndex: 3
    }); 

    google.maps.event.addListener(threeMarker, 'click', function() {
        infowindow.open(map,threeMap);
    });

and my html

<div id="one_map"></div>
    <div id="two_map"></div>
    <div id="three_map"></div>

Answer 1

I’d recommend breaking up your function in to one function for each map you’re creating (or one dynamic one that can do the work based on parameters), then at the end of each one, execute the next using a setTimeout call with either a delay of 0, or just a small delay. When you then drop out of the function you give the UI time to update without waiting for the whole task to be completed. While not actually making your page faster, it makes it feel faster and more responsive. There may be other improvements as well, but this simple change can often make a huge difference.