webdevpro.net

Intro

Dans plein de site que je réalise, il y a une map google map en pied de page. J’ai constaté des ralentissements dans le chargement des pages notamment lors du chargement de la librairie google map api.

le script js

L’idée du script est de charger la carte google map au moment où l’utilisateur va scroller jusqu’à la zone où se trouve la map.
Si l’utilisateur ne scrolle pas jusqu’à la zone de la map, il n’y a pas de chargement de google map = gain dans la vitesse de chargement de la page.

Fichier gmap.js

var params = {
		htmlElMap : document.querySelector('#map'),
		latCenter : -34.397,
		longCenter : 150.644,
		zoomMap : 18,
		keyAPIGmap : 'Key Google API',
		show : true,
		urlIcone : document.querySelector('#map').getAttribute('data-icon'),
		infoBulleText : '<h2>Name</h2><p>Street</p><p>City</p><p>Phone</p> '
	}

// fonction qui permet de connaitre la position d'un élément dans la page
function getCoords(elem) { // crossbrowser version
	var box = elem.getBoundingClientRect();

	var body = document.body;
	var docEl = document.documentElement;

	var scrollTop = window.pageYOffset || docEl.scrollTop || body.scrollTop;
	var scrollLeft = window.pageXOffset || docEl.scrollLeft || body.scrollLeft;

	var clientTop = docEl.clientTop || body.clientTop || 0;
	var clientLeft = docEl.clientLeft || body.clientLeft || 0;

	var top  = box.top +  scrollTop - clientTop;
	var left = box.left + scrollLeft - clientLeft;

	return { top: Math.round(top), left: Math.round(left) };
}

var map;

// init google map
function initMap() {
	map = new google.maps.Map(params.htmlElMap, {
		center: {lat: params.latCenter, lng: params.longCenter},
		zoom: params.zoomMap,
		scrollwheel: false,
		navigationControl: true,
		mapTypeControl: true,
		scaleControl: true,
		draggable: true,
		mapTypeControlOptions: {
			style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
			mapTypeIds: ['roadmap', 'terrain']
		}
	});

	var marker = new google.maps.Marker({
		position: {lat: params.latCenter, lng: params.longCenter},
		map: map,
		icon : params.urlIcone
	});

	var infoBulle = new google.maps.InfoWindow(  {
		content: params.infoBulleText
	} );

	google.maps.event.addListener(marker, 'click', function() {
		infoBulle.open(map, marker);
	});


}

// écouter le scrool 
window.addEventListener("scroll", function(){

	var hh = getCoords(params.htmlElMap) ;
	var page = window.outerHeight + window.pageYOffset ;

	//console.log('hh.top',hh.top,'page',page,'show',show);

	if(page >= hh.top && params.show){

		params.show = false;

		var libgmap = document.createElement('script');
		libgmap.setAttribute('src','https://maps.googleapis.com/maps/api/js?key='+params.keyAPIGmap+'&callback=initMap');
		libgmap.setAttribute('async', 'async');
		libgmap.setAttribute('defer', 'defer');
		document.body.appendChild(libgmap);
}			
});