Geomatic Tutorial / GIS Tutorial / Webmapping Tutorial: AJAX / Jquery et API Google Maps

Il est possible de générer des applications en utilisant les technologies AJAX et l'API Google maps au travers du framework Jquery.
L'utilisation simultanée de ces technologies nécessite cependant quelques adaptations.

Temps de chargement de la page Vs Temps de chargement du script

Il n'est pas évident de générer des applications webmapping qui croisent les technologies AJAX et Google maps. Plusieurs problèmes apparaitre :

La carte Google se charge "normalement" si elle est localisée sur la première page. Dans ce cas, le script se charge en même temps que la page
Si le script de la carte Google se situe dans une partie de la page qui n'est pas chargée, la carte ne va pas se chargée

Problème de chargement du script Google dans une page web utilisant de l'AJAX

Dans le cas présenté ci-dessus, le javascript qui appelle l'application Google se situe dans un onglet qui n'est pas chargé à l'affichage de la page. Lorsque l'on clique sur l'onglet pour afficher la carte Google, celle-ci n'est pas chargé. Si on rafraichit la page on étant sur l'onglet, la carte Google s'affiche normalement. Mais le problème n'est pas réglé pour autant.

Solution : Placer du code asynchrone + une fonction loadscript() sur l'onglet

La première étape de récupérer le script javascript asynchrone que fournit Google à cette adresse.

Remarquez la dernière ligne de code :

window.onload = loadScript;

On va insérer cette fonction dans l'onglet qui va appeler le script de Google maps ainsi : onclick="loadScript();" J'insère cette ligne directement dans le code html.

Exemple appliqué avec Bootstrap

On va insérer une carte Google maps dans une application utilisant de l'ajax au travers bootstrap et plus précisément, en utilisant une fonction tab. Tout est décrit à cette adresse.

Voici le code javascript

var map;

function initialize() {

var mapOptions = {

zoom: 8,

center: new google.maps.LatLng(-34.397, 150.644)

};

map = new google.maps.Map(document.getElementById('map-canvas'),

mapOptions);

}

function loadScript() {

var script = document.createElement('script');

script.type = 'text/javascript';

script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&' +

'callback=initialize';

document.body.appendChild(script);

}

window.onload = loadScript;

Dans notre code javascript, la carte Google va être appelée "map-canvas" dans notre code html.

Voici le code html

<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab"onclick="loadScript();">Profile</a></li>

<li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>

<li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li> </ul>

</div>

Dans le code html, nous avons ajouté 2 balises : la première est la fonction "loadscript();" qui permet de charger la carte google lorsque l'on clique sur l'onglet et non au chargement de la page, et la seconde balise "div id ="map canvas" qui correspond à la carte Google.

En cliquant sur l'onglet, on règle le problème du script asynchrone puisque même si le script n'est pas chargé lorsque la page se charge, il sera chargé lorsque l'on clique sur l'onglet.

Tutorial

AJAX / Jquery et API Google Maps