Comment faire
Javascript : insertion de l'API
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
L'appel se fait par l'insertion d'un fichier Javascript provenant de Google. Une clé d'accès est exigée par l'API de Google. Elle est à prévoir et à insérer dans l'adresse, une fois le site en ligne.
Javascript : importation de la carte
<script>
function initialize() {
var myOptions = {
zoom: 8,
center: new google.maps.LatLng( 46.621724, 6.794492 ),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.querySelector( '#map' ), myOptions);
}
</script>
La fonction "initialize()" déclenchera le chargement de la carte grâce à l'appel de la fonction (méthode) "LatLng()" de l'objet "google.maps". Les coordonnées '46.621724' et '6.794492' inscrites indiquent l'emplacement du centre de la carte.
L'API de Google Maps, propose une quantité d'options pour la fonction (méthode) "Map" peuvent être précisées pour préciser l'apparence de la carte. Les options suivantes ont été définies :
- zoom : indique le niveau du plan rapproché
- center : fait référence à l'emplacement du centre de la carte. En occurence, la variable "myLatlng" a été définie à cette fin trois ligne plus haut.
- mapTypeId : défini le type de carte à afficher (TERRAIN, ROADMAP, HYBRID ou SATELLITE)
La fonction (méthode) "Map()" permet d'assembler les informations sur la carte et indique l'élément HTML dans lequel elle sera insérée. En occurence l'élément qui portera l'identifiant (id) "ma_carte".
HTML : Insertion de la carte dans la page
<div style="width:100%; height:380px;" id="map"></div>
La carte apparaîtra dans l'élément HTML dont l'identifiant (id) est "map".
L'opération est déclenchée au chargement de la page grâce à la fonction (méthode) "window.onload".
window.onload = function(){ initialize(); }
Ajouter des pointeurs personnalisés
Des éléments peuvent être ajoutés dans la carte. Ajoutons un premier pointeur posé sur les coordonnées longitude et latitude de Lausanne (46.524855, 6.633968).
new google.maps.Marker({
position: new google.maps.LatLng( 46.524855, 6.633968 ),
map: map,
title: 'Lausanne',
icon: '../lib/images/meteo/02.png'
});
Ce code s'ajoute dans la fonction "intialize()" et permet de positionner dans la carte un lieu. Identifier dans cet exemple par une image.
Chaque lieu pourra être identifié en ajoutant le code pour chacun d'eux.
- La fonction (méthode) "LatLng" définie une position grâce aux coordonnées indiquées.
Les coordonnées à utiliser pour cet exemple- Lausanne : 46.524855, 6.633968
- Berne : 46.954481, 7.440090
- Genève : 46.196943, 6.142616
- Fribourg : 46.802410, 7.139626
- Neuchâtel : 46.993251, 6.928053
- Sion : 46.229372, 7.363214
- Initialisation du marqueur grâce à la fonction (méthode) "Marker". L'API de Google propose bon nombre d'options pour la fonction (méthode) "Markers". Voici ceux de l'exemple :
- position : coordonnées (définies à la ligne précédente)
- map : la carte (map) ou street view (streetviewpanorama)
- title : titre à imposer
- icon : image à poser sur la carte à titre de pointeur