lazy-load-google-maps.js

window.MI_MAPS = window.MI_MAPS || {};
window.MI_MAPS.current_map = window.MI_MAPS.current_map || {};
function generate_map( el ) {
    var Map_Data = {};
    Map_Data.lat = el.attr('data-lat');
    Map_Data.long = el.attr('data-long');
    Map_Data.id = el.find('.googleMap').attr('id');

    Map_Data.myLatlng = new google.maps.LatLng(Map_Data.lat, Map_Data.long);
    Map_Data.mapOptions = {
        center: Map_Data.myLatlng,
        zoom: 14,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    if((typeof(Map_Data.id) != "undefined" && Map_Data.id !== null) && (typeof(Map_Data.mapOptions) != "undefined" && Map_Data.mapOptions !== null)) {
        Map_Data.map = new google.maps.Map(document.getElementById(Map_Data.id), Map_Data.mapOptions);
    }

    Map_Data.contentString = '<div id="content">'+
        '<div id="siteNotice">'+
        '</div>'+
        '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
        '<div id="bodyContent">'+
        '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
        'sandstone rock formation in the southern part of the '+
        'Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) '+
        'south west of the nearest large town, Alice Springs; 450&#160;km '+
        '(280&#160;mi) by road. Kata Tjuta and Uluru are the two major '+
        'features of the Uluru - Kata Tjuta National Park. Uluru is '+
        'sacred to the Pitjantjatjara and Yankunytjatjara, the '+
        'Aboriginal people of the area. It has many springs, waterholes, '+
        'rock caves and ancient paintings. Uluru is listed as a World '+
        'Heritage Site.</p>'+
        '<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
        'https://en.wikipedia.org/w/index.php?title=Uluru</a> '+
        '(last visited June 22, 2009).</p>'+
        '</div>'+
        '</div>';

    Map_Data.infowindow = new google.maps.InfoWindow({
        content: Map_Data.contentString
    });

    Map_Data.marker = new google.maps.Marker({
        position: Map_Data.myLatlng, /*how do I define this??*/
        map: Map_Data.map
    });

    Map_Data.marker.addListener('click', function() {
        Map_Data.infowindow.open(Map_Data.map, Map_Data.markermarker);
    });

    return Map_Data;
};

( function( $, window, document, undefined )
{
    'use strict';

    var $window			= $( window ),
        windowHeight	= $window.height(),
        windowScrollTop	= 0,
        map_container = {},
        items_and_breakpoints = {},
        //used_ids = {},
        maps_loaded = false,
        windowWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0),

    init = function()
        {
            map_container.each( function()
            {
                var $this = $( this );
                var map_render_div = $this.children(".googleMap");
                var map_render_div_id = map_render_div.attr("id");
                var distance_from_top = 0;

                if (windowWidth > 991){
                    distance_from_top = $this.offset().top;

                }
                else {
                    distance_from_top = $this.parents(".map-wrapper").offset().top;
                }

                items_and_breakpoints[distance_from_top] = map_render_div_id;
            });

        },

        render = function()
        {

            windowScrollTop = $window.scrollTop();


            for (var key in items_and_breakpoints){
                var map_container = $("#"+items_and_breakpoints[key]),
                    current_map_id = items_and_breakpoints[key];

                MI_MAPS.current_map = MI_MAPS[current_map_id];

                if ((Math.round(key) + map_container.outerHeight(false)) >= Math.round(windowScrollTop) && (Math.round(key) - map_container.outerHeight(false)) < Math.round(windowScrollTop) + Math.round(windowHeight) && windowWidth > 991){
                    var newHeight = map_container.parents('.map-wrapper').siblings(".listing-details").outerHeight();
                    map_container.parents(".map").height(newHeight);
                    map_container.height(newHeight);

                    if (!(items_and_breakpoints[key] in MI_MAPS)){

                        var Map_Data = generate_map(map_container.parents(".map"));
                        MI_MAPS[Map_Data.id] = Map_Data;

                        var center = MI_MAPS[Map_Data.id].marker.position;

                        google.maps.event.addListener(MI_MAPS[Map_Data.id], "idle", function(){
                            google.maps.event.trigger(MI_MAPS[Map_Data.id], 'resize');
                        });


                        MI_MAPS[Map_Data.id].map.setCenter(center);
                    }
                    else {
                        triggerResize(MI_MAPS.current_map,key);
                    }
                    delete items_and_breakpoints[key];

                    //used_ids[key] = items_and_breakpoints[key];
                }
                else if ((Math.round(key) + map_container.parents(".listing").outerHeight(false)) >= Math.round(windowScrollTop) && (Math.round(key) - map_container.parents(".listing").outerHeight(false)) < Math.round(windowScrollTop) + Math.round(windowHeight) && windowWidth < 991){
                    var lat = map_container.parents(".map").attr('data-lat');
                    var long = map_container.parents(".map").attr('data-long');
                    var map_container_html = map_container.parents(".map-wrapper")[0];

                    if (!(map_container.parents(".map").siblings(".mobile-map").hasClass("loaded"))){
                        var newURL = "https://maps.googleapis.com/maps/api/staticmap?zoom=15&size=1140x260&maptype=roadmap&markers=color:red%7Clabel:S%7C" + lat + "," + long;
                        map_container.parents(".map").siblings(".mobile-map").attr("src",newURL);
                        map_container.parents(".map").siblings(".mobile-map").addClass("loaded");
                    }

                    delete items_and_breakpoints[key];
                }
            }
            maps_loaded = true;

        },

        triggerResize = function(obj, key)
        {
            if ((Math.round(key) + map_container.outerHeight(false)) >= Math.round(windowScrollTop) && (Math.round(key) - map_container.outerHeight(false)) < Math.round(windowScrollTop) + Math.round(windowHeight)){
                var center = MI_MAPS.current_map.marker.position;

                google.maps.event.addListener(obj, "idle", function(){
                    google.maps.event.trigger(obj, 'resize');
                });

                obj.map.setCenter(center);
            }
        };

    $window
        .on( 'scroll', function(){
            render();
        })
        .on( 'resizeHit', function(e)
        {
            windowWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0),
            windowHeight = $window.height();
            init();
            render();
        });

    $.fn.lazyLoadGoogleMaps = function()
    {
        map_container = this;

        init();

        render();

        return this;
    };


})( jQuery, window, document );