André Willemijns WebSite

• Insérer une carte Google maps

Insérer une simple carte Google Maps

le 12 mai 2008

Pour insérer dans votre page web une carte google map, il faut d'abord obtenir une clé chez google. Cette clé est valable pour le domaine demandé, mais aussi pour le ssous-domaines ainsi que les dossiers.

Pour obtenir votre clé, cliquez ici

Pour centrer votre carte vous avez besoin de connaître les coordonnées longitude et latitude. Pour cela vous pouvez utiliser le générateur de Google

Vous devez insérer dans la partie Head le code javascript qui comporte votre clé

<script src="http://maps.google.com/maps?file=api&v=2&key=votre clé&sensor=true_or_false"
type="text/javascript"></script>

Dans la partie body, le code insérer appelle la carte et la partie javascript qui définie le contrôle de la carte

<div id="map_index" style="width: 600px; height: 500px; margin: 20px auto;"></div>

<script type="text/javascript">
//<![CDATA[
/* Variable qui va correspondre à l'affichage de la carte dans la "div" */
var map = new GMap2(document.getElementById("map_index"));
/* Centre la carte aux coordonnées indiquées et réalise un zoom de niveau 15 affiche plan */
map.setCenter(new GLatLng(50.6799610, 3.2483509),15,G_NORMAL_MAP);
map.enableContinuousZoom(); 
map.addControl(new GOverviewMapControl()); //bouton situation en bas à droite
map.addControl(new GLargeMapControl3D()); //bouton 3D
map.addControl(new GMapTypeControl());  //bouton plan, satellite, mixte
//]]>
</script>

Ainsi :

map.setCenter(new GLatLng(latitude, longitude), 14, G_NORMAL_MAP);

La valeur 14 représente la valeur du zoom et G_NORMAL_MAP défini le type de carte affiché soit :

• G_NORMAL_MAP affiche le plan
• G_SATELLITE_MAP visualise une image satellite
• G_HYBRID_MAP Visalise une combinaison d'images satellite et une carte normale (mixte)
• G_PHYSICAL_MAP visualise les informations du terrain (Relief)

Avec map.enableContinuousZoom(); nous pouvons ajouter tous les contrôles de la carte soit :

• map.addControl(new GOverviewMapControl()); ajoute la situation en bas à droite
• map.addControl(new GLargeMapControl3D()); ajoute le bouton 3D
• map.addControl(new GMapTypeControl()); ajoute le bouton plan, satellite, mixte

Insérer une carte Google Maps avec des "markers"

le 12 mai 2008

Pour obtenir une carte avec des markers on ajoute dans le code JavaScript la gestion de ces markers

On doit d'abord définir les coordonnées de la variable markers soit "point1, point2, etc.

Puis on crée la fonction à partir de l'adresse qui va déterminer le point géographie et la fonction qui ouvrira l'info-bulle lorsque le marqueur sera cliqué.

Enfin, on créera le contenu des infos-bulles de chaque marqueur.

/* Création des markers */
				
/* Les coordonnées des markers */
var point1 = new GLatLng(50.6833328, 3.2303452);
var point2 = new GLatLng(50.6895660, 3.2363319);
var point3 = new GLatLng(50.68274414, 3.2511914);
var point4 = new GLatLng(50.6800085, 3.2478440);
				
/* Fonction qui à partir d'une adresse va déterminer le point géographique */
function createInfoMarker(point, text) {
/* Création d'un marqueur */
var marker = new GMarker(point);
/* Afficher le marqueur */
map.addOverlay(marker);

/* Lorsque le marqueur est cliqué, on ouvre l'info-bulle */
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(text);
  });
 }
/* Contenu des bulles info */
createInfoMarker(point1, '<b>Au Buisson</b><br /><div style="text-align: center;margin:5px"><img src="images/estaminets/au-buisson.jpg" alt="Au Buisson" width="200px" height="153px" /></div>');
createInfoMarker(point2, '<b>Estaminet du Grimonpont</b><br /><div style="text-align: center;margin:5px"><img src="images/estaminets/Estaminet-grimonpont.jpg" alt="Grimonpont" width="200px" height="153px" /></div>');
createInfoMarker(point3, '<b>Estaminet Desobry</b><br /><div style="text-align: center;margin:5px"><img src="images/estaminets/Estaminet-Desobry-49-rue-Je.jpg" alt="Estaminet Desobry" width="200px" height="153px" /></div>');
createInfoMarker(point4, '<b>Estaminet Messian</b><br /><div style="text-align: center;margin:5px"><img src="images/estaminets/Estaminet-Messiaen.jpg" alt="Estaminet Messian" width="200px" height="262px" /></div>');

Insérer une carte Google maps

le 11 mai 2008

Google fournit les codes nécessaires pour insérer une carte Google Map dans un site web ou une application

Deux méthodes sont possibles pour réaliser cela. Soit utiliser les codes source fournis par Google ou tout simplement utiliser le module de création de Google.

Dans les deux cas pour fonctionner sur votre site web vous avez besoin d'une clef fournie par Google. Avec le module de création cette clef est créer automatique ou bien si le site possède déjà cette clef elle sera incorporée automatiquement.

Première étape :

• Allez sur le site Map Search Wizard
• Créer les éléments de la carte

Dans notre exemple nous avons choisi de présenter le pont du Grimonpont de Leers dans le Nord de la France. Ainsi, les informations à fournir seront :

• Center location name : Leers France (Normalement Google trouvera les coordonnées de cette recherche) Ainsi le pont sera localisé à partir du centre de la ville
• Center location link URL : C'est l'adresse d'une page web en rapport avec la location visualisée.
• Map Search Wizard : Il nous faut rentrer ici les coordonnées du point à visualiser donc : Pont du Grimonpont Leers.

En cliquant sur la prévisualisation, vous pouvez contrôler le résultat obtenu et éventuellement corriger les informations

Deuxième étape :

Il s'agit ici de donner à Google les informations concernant votre site afi d'obtenir la clé. On donnera ici l'adresse web du site en sachant que la clé est valable pour les domaines et sous domaine d'un site web.

Troisième étape :

On génère alors le code à insérer dans la page web.

Pour avoir une page web conforme aux normes du W3C, nous devons effectuer les modifications suivante :

• Changer & par &
• Placer la partie javascript dans la partie head

Insérer une carte Google maps statique avec des marqueurs

le 12 mai 2008

A - Au Buisson

B - Estaminet du Grimonpont

D - Estaminet Desobry

C - Estaminet Messian

Ici nous avons une simple carte Google Maps sans possibilité d'agrandir ni de déplacer la carte, car nous n’avons aucun code JavaScript, mais une seule URL pour afficher la carte.

Nous avons la possibilité à l'intérieur de cela placer une multitude de marqueurs qui peuvent être annotés et de couleurs différentes.

Naturellement nous devons aussi mettre la clé de Google Maps.

Ainsi, nous avons :

• La fonction zoom avec "zoom=14 dans notre carte"
• La fonction nature de la carte avec "maptype="mobile ou satellite ou hybrid ou terrain"
• Les markers avec les coordonées latitude et longitude et le type de marker avec sa désignation. Les markers sont séparés par "|" Les différentes couleurs sont : black, brown, green, purple, yellow, blue, gray, orange, red, white

A cette carte à été ajouté une colonne pour indiquer les désignations des markers.

Le code doit être mis uniquement dans la partie body

<div style="width: 662px; margin: 20px auto; border: 1px solid blue;height: 522px;">
<div style="width: 442px; float: left; padding: 5px;"><img style="border=0;" src="http://maps.google.com/staticmap?
center=50.6797307,3.2481878&zoom=14&size=442x512&maptype=satellite
&markers=
50.6833328,3.2303452,bluea|
50.6895660,3.2363319,greenb|
50.68274414,3.2511914,redc|
50.6800085,3.2478440,yellowd
&sensor=false&key=Insérer votre clé" alt="Ville de Leers" />
</div>
<div style="width: 190px; float: right; padding: 10px;">
<p><b>A -</b> Au Buisson</p>
<p><b>B -</b> Estaminet du Grimonpont</p>
<p><b>D -</b> Estaminet Desobry</p>
<p><b>C -</b> Estaminet Messian</p>
</div> 
</div>

Source : Google Static Maps