Wednesday, October 2, 2013

Dynamic Google Maps loading

Usually if you include script tag in head of HTML document JavaScript library is loaded at the time of page load. If you want to reduce page download time you can defer loading JavaScript library until it is required. This JavaScript technique sometimes is called “Asynchronous“ or „On demand” JavaScript loading. Here I will show you how you could defer loading of Google Maps library. In first example I will use JQuery library and plain JavaScript in second. Pay attentional to the callback parameter in the query string we use to request Google Maps service. This parameter tells library which your function it should call then library is loaded.

Here follows simple html we use in our example:

<html>
    <head>
        <meta charset="utf-8" />
    </head>
    <body>
 <p>See the Maps API used to embed a map into an HTML page without JS errors:</p>
 <div id="google-map" style="width: 400px; height: 400px;"></div>

 <script type="text/javascript">
<!-- One of the following script variants gose here -->
 </script>
    </body>
</html>

Defer loading of Google Maps library by using JQuery:

$.getScript("http://maps.google.com/maps/api/js?sensor=false&async=2&callback=gMapsCallback");

function gMapsCallback() {
    var location = new google.maps.LatLng(41.890522, -87.668753);
    var options = {
        center: new google.maps.LatLng(41.890540, -87.668753),
        zoom: 14,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map($('#google-map')[0], options);
    var content = '<div style="width: 200px;">Hello!!!</div>';
    var marker = new google.maps.Marker({
        position: location,
        map: map,
        title: 'DevBridge Group'
    });
    var infowindow = new google.maps.InfoWindow();
    infowindow.open(map, marker);
    infowindow.setContent(content);
}

Defer loading of Google Maps library by using plain JavaScript:

    var element = document.getElementById('google-map');
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'http://maps.google.com/maps/api/js?sensor=false&async=2&callback=gMapsCallback';
    element.parentNode.insertBefore(script, element.nextSibling);
  
    function gMapsCallback() {
        var location = new google.maps.LatLng(41.890522, -87.668753);
        var options = {
            center: new google.maps.LatLng(41.890540, -87.668753),
            zoom: 14,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
   
        var mapElement = document.getElementById('google-map');
        var map = new google.maps.Map(mapElement, options);
        var content = '<div style="width: 200px;">Hello!!!</div>';
   
        var marker = new google.maps.Marker({
            position: location,
            map: map,
            title: 'DevBridge Group'
        });
   
        var infowindow = new google.maps.InfoWindow();
        infowindow.open(map, marker);
        infowindow.setContent(content);
    }

That is all to it.