Franc83

Tout sur la Google MAP

Avoir une Google map avec des services personnalirés

Avoir une google Map :

D'abord il faut se créer un compte Google, et se créer une carte de base :

- Pour le compte Google c'est ici :

- Ensuite, il vous faut récupérer le compte Google de votre propre MAP :

- Vous allez sur "Mes cartes"

- et "Créez une nouvelle Carte"

- Vous avez au dessus une zone de saisie pour y mettre votre adresse, afin d'être localisé. Vous pouvez juste entrer votre ville :

soit vous entrez : "Limoges", et vous aurez votre carte centrée sur Limoges

soit vous entrez : "rue des fleurs, Limoges", et votre carte sera centrée sur votre rue.

Plus simle pour les lazzy-geeks, allez sur le site my-google-map, tou y est automatisé, mais limité bien sur aux fonctions de base.

Préparer l'insertion de sa Google Map sur son Blog :

Vous devez créer une page html nommée google.html (par exemple), l'héberger chez votre fournisseur, puis, récupérer son url.

ATTENTION : Il vous faut absolument un lien direct avec votre URL, non un lien "interprété" par des fournisseurs de stockage qui compressent ou "flashisent" votre lien. Votre url doit etre du type :

"http://mon_hebergeur/mon_dossier/google.html"

Vous devez ensuitez introduire le code suivant dans le sandbox html. :

Ce qui donnera une fois le fichier créé et hébergé (Cliquez sur l'image ci-dessous..) :

Agrandir le plan

Contenu du fichier google.html:

- Code général pour la map. Faites bien attention à insérer vos valeurs propres, que vous aurez récupéré lors de la création de votre carte perso

Pour avoir votre key perso c'est ici

Key = c'est votre clé google donnée lors de votre création de carte

Vous devez bien sur mettre les coordonnées de votre lieu, que vous aurez lors de la création de la carte, ces coordonnées exemples étant les miennes.

Réglages et amélioration de votre carte :

Vous devrez pour chaque amélioration entrer des lignes de code dans le fichier javascript :

- Trouver et mettre une bulle avec du texte :

map.openInfoWindow(map.getCenter(),
document.createTextNode(Votre texte"));

- Trouver et afficher votre ville ou domicile :

map.setCenter(new GLatLng(37.4419, -122.1419), 13);
( longitude, latitude et puissance du zoom)

- Ajouter les contrôles du zoom et du déplacement :

map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());

- Avoir les coordonnées du centre de la carte sur déplacement :

GEvent.addListener(map, "moveend", function() {
var center = map.getCenter();
document.getElementById("message").innerHTML = center.toString();
});
map.setCenter(new GLatLng(72167742756552, 3.1585693359375),12);

- Ajouter des marqueurs sur la carte :
var point =(new GLatLng(37.4419, -122.1419), 13);
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
map.addOverlay(new GMarker(point));

- Ajouter un marqueur sur un clic souris :

GEvent.addListener(map, "click", function(marker, point) {
if (marker) {
map.removeOverlay(marker);
} else {
map.addOverlay(new GMarker(point));

- Ajouter des marqueurs et des fenetres d'information dessus :

// Créer un marqueur au point donné avec un label donné
function createMarker(point, number) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml("Marker #" + number + "");
});
return marker;
}

- Avoir des bulles à onglet :

// Contenu des bulles, les onglets
var infoTabs = [
new GInfoWindowTab("Tab #1", "This is tab #1 content"),
new GInfoWindowTab("Tab #2", "This is tab #2 content")
];
// Placer les marqueurs sur la carte et ouvrir les bulles sur clic
var marker = new GMarker(map.getCenter());
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowTabsHtml(infoTabs);
});
map.addOverlay(marker);
marker.openInfoWindowTabsHtml(infoTabs);

- Créer de petits marqueurs icones :

var icon = new GIcon();
icon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
icon.iconSize = new GSize(12, 20);
icon.shadowSize = new GSize(22, 20);
icon.iconAnchor = new GPoint(6, 20);
icon.infoWindowAnchor = new GPoint(5, 1);
var point = new GLatLng(37.4419, -122.1419), 13);
map.addOverlay(new GMarker(point, icon));

- Mettre des marqueurs amovibles :

var center = new GLatLng(37.4419, -122.1419);
map.setCenter(center, 13);
var marker = new GMarker(center, {draggable: true});
GEvent.addListener(marker, "dragstart", function() {
map.closeInfoWindow();
});
GEvent.addListener(marker, "dragend", function() {
marker.openInfoWindowHtml("Just bouncing along...");
});map.addOverlay(marker);

- Tracer des parcours sur les cartes (2 segments, trois points):

var polyline = new GPolyline([
new GLatLng(37.4419, -122.1419),
new GLatLng(37.4519, -122.1519),
new GLatLng( 37.4619, -122.1819)
], "#FF0000", 10);
map.addOverlay(polyline);

- Encoder des tracés (plusieurs points) :

var encodedPolyline = new GPolyline.fromEncoded({
color: "#FF0000",
weight: 10,
points: "yzocFzynhVq}@n}@o}@nzD",
levels: "BBB",
zoomFactor: 32,
numLevels: 4
});
map.addOverlay(encodedPolyline);

L'explication de l'encodage des coordonnées est détaillée ici

- Mettre des marqueurs personnalisés avec un fichier klm ou un flux RSS :

( Voyez les explications ici)

// Le GGeoXml constructeur a une URL pointant vers un fichier KML ou GeoRSS.
// Vous ajoutez l'objet GGeoXml à la carte comme un overlay, et l'enlevez commeoverlay aussi.
// L'API des cartes détermine implicitement si le fichier est KML ou GeoRSS.

var map;
var geoXml = new GGeoXml("http://nigel.tao.googlepages.com/blackbirds.kml");

function onLoad() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.setCenter(new GLatLng(49.496675,-102.65625), 3);
map.addControl(new GLargeMapControl());
map.addOverlay(geoXml);
}
}

Il existe d'autres modules javascripts plus complexes mai bon, c'est déjà pas mal comme cela..

Commenter cet article

Commenter
Les messages comportant des attaques verbales contre les personnes seront supprimés. Vous pouvez renouveler le code de sécurité en appliquant un rafraîchissement à votre navigateur. Appliquer cette méthode de rafraîchissement si vous avez entré un mauvais code de sécurité.
Nom
E-mail
Site web
Titre
BBCode:
Commentaire
Code:*
	Je désire être prévenu par mail des commentaires qui suivront

Powered by AkoComment Tweaked Special Edition v.1.4.6
AkoComment © Copyright 2004 by Arthur Konze - www.mamboportal.com
All right reserved