Ico JavaScript
Ico CSS
Ico HTML
Ico mooTools
Ico PHP
Ico Astuces

Intégration Google Map

Date 02/05/2011
Ico JavaScript
Comms 0 commentaire

Le but de cet article est d'expliquer comment intégrer un plan GoogleMap© dans une page web et manipuler le plan, changer dynamiquement le positionnement, le zoom, les marqueurs, ajouter des bulles d'informations, etc...


Intégrer un plan dans une page web est relativement aisé, le code fourni par le site maps.google.fr via le bouton « Lien » permet d'intégrer un iframe contenant le plan positionné comme souhaité.


Manipuler ce plan via JavaScript et l'API de GoogleMap n'est pas plus compliquée pour quelqu'un qui maîtrise un peu le langage de script. La méthode par contre diffère, dans ce cas, on ne passe pas par un iframe mais par un div qui va contenir à terme le plan.


Pour commencer, il faut intégrer l'API à la page web dans la section head de la page :

<script src="http://maps.google.com/maps/api/js?sensor=false"
           type="text/javascript"></script>


Ensuite, dans la section body de la page, il faut définir le div qui recevra le plan :


<div id="divMap" style="width: 800px; height: 400px;"></div>


Enfin, dans la section head de la page, il faut coder l'implémentation dans le div de l'objet GoogleMap, à déclencher une fois la page entièrement chargée, pour être sûr que le div cible soit bien présent au moment de l'exécution du script. Pour ceci, 2 possibilités, plus simplement pour les utilisateurs de la bibliothèque mooTools dans l'évênement domready de l'objet windows, ou en JS pur, en codant la fonction d'implémentation et en l'appelant dans l'évênement onload du body comme ceci :


<head>

<script src="http://maps.google.com/maps/api/js?sensor=false"

                     type="text/javascript"></script>

<script type="text/javascript">

function initMap() {

    var mapLatlng =new google.maps.LatLng(-34.397,150.644);

    var mapOptions = { zoom:8, center: latlng, mapTypeId:

                                 google.maps.MapTypeId.ROADMAP };

    var map = new google.maps.Map(document.getElementById("divMap"),

                                                    mapOptions);

}

</script>

</head>

<bodyonload="initMap()">


Voilà qui est fait, notre div contient le plan GoogleMap et l'utilisateur peut le manipuler.


Une possibilité simple et intéressante si l'on veut mémoriser le plan dans une base de données par exemple, c'est de récupérer les propriétés de l'objet map, tel que les coordonnées de la position, le niveau du zoom ou encore le type d'affichage :


alert("Zoom = " map.getZoom());

alert("Latitude = " map.getCenter().lat());

alert("Longitude = " map.getCenter().lng());

alert("Type d'affichage = " map.getMapTypeId());


Pour ajouter au plan des marqueurs, il faut utiliser l'objet Marker fournit par l'API GoogleMap :


var marker = new google.maps.Marker({

  position: map.getCenter(), // Position du marqueur via l'objet LatLng

            draggable: true,                // Marqueur déplaçable par l'utilisateur
            map: map,                       // Objet map recevant le marqueur
            title: "Mon marqueur"

});


On peut ajouter autant de marqueurs que l'on souhaite sur le plan, on peut aussi utiliser sa propre ressource graphique pour le marqueur (propriétés "icon" et "shadow" de l'objet Marker.


On peut aussi tout simplement coder des évênements au sein du plan, en utilisant la méthode addListener de cette manière :


google.maps.event.addListener(map, 'click', function(event) {

              marker.setPosition(event.latLng);

});


Dans l'exemple ci-dessus, on code l'évenement click rattaché à l'objet map (click sur la map) et on demande au marker de se positionner à la latitude / longitude correspondant à la position de la souris, via l'objet event.


Dernier point développé dans cet article, l'ajout d'une fenêtre d'information. L'API met à disposition un objet InfoWindow qui permet l'affichage de bulles d'information sur le plan. Nous allons instancier cet objet avec un texte de notre choix, et l'afficher lorsque l'utilisateur clique sur le marqueur créé précédemment :


var infowindow =new google.maps.InfoWindow({

   content: "Texte de mon choix"

});

google.maps.event.addListener(marker,'click',function(){

   infowindow.open(map,marker);

});


Voilà donc notre bulle d'information apparaîtra lorsque l'utilisateur cliquera sur le marqueur. Le contenu de la fenêtre d'information est dans notre exemple simplifiée à l'extrême, mais l'objet permet la spécification via des id d'éléments de présentation comme un titre, une icône...


Pour conclure, on peut dire que l'objet fourni par l'API GoogleMap est très simple d'utilisation tout en étant extrêmement permissif au niveau des fonctionnalités.


Pour aller plus loin : Tutoriaux & documentation GoogleMap



Vous avez aimé ce billet ?

 

Vous aimerez peut être...
> Intégrer des polices de caractère personnalisées
> ComboBox pour envoi de fichiers
> ComboxBox de choix d'images
> Quelques bons scripts MooTools
> Glissière pour choix d'une valeur numérique
 

Mot-clefs de ce billet...
google maps marker objet plan script

Commentaires


Aucun commentaire...


Ajouter un commentaire


La validation des commentaires se fait automatiquement, suite à la validation d'un « captcha » qui permet de filtrer le spam. La publication de votre commentaire se fera ensuite automatiquement. L'administrateur du blog se réserve toutefois le droit de supprimer votre commentaire après publication s'il contrevient à nos condition d'utilisation ou s'il est considéré comme spam.

Auteur
Email
 
(facultatif et caché)
Site web
 
(facultatif)
Message

Ico Valider


MP  Mighty Productions
> Blogs
> Partage de codes sources - PHP / JS / mooTools
> JavaScript
> Intégration Google Map
 
RSS       Mentions légales       Comms  Haut de la page  
◄ ►