back.projets.erasme.orgAccueil > [old] Information > Archives > Technologies > Archives > Veille & Expérimentations > Géolocalisation > GoogleMaps - trucs et astuces
GoogleMaps - trucs et astuces
GoogleMaps - trucs et astuces
mardi 15 mai 2007, par
Construction d’URL
Google Maps permets la construction de
cartes en passant les paramètres d’affichage dans l’URL.
Voici la liste des paramètres que l’on peut spécifier à http://maps.google.com/maps? :
q : adresse
– spécifie le centre de la carte si ll n’est pas indiqué
– un marqueur se positionne sur l’adresse
– http://maps.google.com/maps?q=10+rue+de+la+république+Lyon+france
ll : centre de la carte (latitude / longitude)
– http://maps.google.com/maps?ll=45.741652,4.888916
z : zoom
– Valeurs allant de 1 à 17 (du plus large au plus étroit)
– http://maps.google.com/maps?z=13
saddr & daddr : itinéraire (adresse source / adresse destination)
– http://maps.google.com/maps?saddr=saint+clément+les+places&daddr=10+rue+de+la+république+Lyon+france
– http://maps.google.com/maps?saddr=42,9&daddr=42,10
q & near : ressources de l’annuaire
– http://maps.google.com/maps?q=college&near=rue+république+lyon
t : variations du fond de carte
– k pour satellite, h pour mixte, rien pour l’affichage classique
– http://maps.google.com/maps?t=h
hl : langue
– http://maps.google.com/maps?hl=en
ie : jeu de caractères de la page
– http://maps.google.com/maps?ie=UTF8
Exemple Google Maps commenté
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<script src="http://maps.google.com/maps?file=api&v=2.63&key=xxx" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible())
{
/*Définition du fond de carte*/
var map = new GMap2(document.getElementById("map"));
/*Creation d'une carte personnalisee*/
var copyright = new GCopyright(1,
new GLatLngBounds(new GLatLng(45.7548,4.8298),new GLatLng(46.2548,4.7298) ),12, "2006 - Rhone.fr");
var copyrightCollection = new GCopyrightCollection("Map Data:");
copyrightCollection.addCopyright(copyright);
CustomGetTileUrl=function(a,b){
return "/canton_6903/"+a.x+"_"+a.y+"_"+(b)+".gif"
}
var tilelayers = [new GTileLayer(copyrightCollection,1,17)];
tilelayers[0].getTileUrl = CustomGetTileUrl;
var custommap = new GMapType(tilelayers, new GMercatorProjection(15), "Old OS",{errorMessage:_mMapError});
map.addMapType(custommap);
/*Initialise la carte*/
map.setCenter(new GLatLng(45.9361,4.7182), 12, custommap);
//map.setCenter(new GLatLng(45.838,4.6221), 9);
/*Ajoute les barres d'outil de controle du Zoom et du Type d'affichage Plan ou Satellite*/
map.addControl(new GSmallMapControl(), new GControlPosition(G_ANCHOR_TOP_RIGHT,new GSize(-60,0)));
map.addControl(new GMapTypeControl(), new GControlPosition(G_ANCHOR_TOP_RIGHT,new GSize(60,-10)));
map.addControl(new GOverviewMapControl(), new GControlPosition(G_ANCHOR_BOTTOM_RIGHT,new GSize(20,0)));
//map.enableContinuousZoom();
/*Creation de points et de marqueurs*/
/* Creer des points */
//monsols
var point1 = new GLatLng(46.2205,4.5198);
//beaujeu
var point2 = new GLatLng(45.619,4.6713);
//anse
var point3 = new GLatLng(45.9361,4.7182);
//arbresles
var point4 = new GLatLng(45.8366,4.6165);
var point5 = new GLatLng(45.7336,4.9086);
/* Creer ses propres icones pour les marqueurs */
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 icon2 = new GIcon();
icon2.image = "http://labs.google.com/ridefinder/images/mm_20_green.png";
icon2.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
icon2.iconSize = new GSize(12, 20);
icon2.shadowSize = new GSize(22, 20);
icon2.iconAnchor = new GPoint(6, 20);
icon2.infoWindowAnchor = new GPoint(5, 1);
/*Afficher des marqueurs sur la carte avec les points definis*/
map.addOverlay(new GMarker(point1));
map.addOverlay(new GMarker(point3, icon2));
/*Gestion des marqueurs et evenements avances*/
/*Afficher un marqueur avec une fenêtre d'information au clic (fonction a déclarer une seule fois)*/
function createMarker(point, texte, icon)
{
var marker = new GMarker(point, icon);
map.addOverlay(marker);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(texte);
});
}
createMarker(point4, "<img src='http://www.google.com/mapfiles/maps_res_logo.gif'>Larbresles et ses beaux paturages", icon);
createMarker(point3, "<img src='http://www.google.com/mapfiles/maps_res_logo.gif'>Anse et ses beaux paturages", icon);
createMarker(point2, "<img src='http://www.google.com/mapfiles/maps_res_logo.gif'>Bruliolles et ses beaux paturages", icon);
/*Initialise les outils de geodoing et place un marqueur a partir d'une adresse */
var geocoder = new GClientGeocoder();
function showAddress(address) {
geocoder.getLatLng(
address,
function(point)
{
if (!point) {alert(address + " not found");}
else
{
var marker = new GMarker(point , {draggable: true});
map.addOverlay(marker);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(address);
});
}
}
);
}
showAddress ("2 place de la bourse lyon france") ;
/*Drag and Drop des marqueurs / dialogue avec la base de données*/
function markerDragend(marker, id)
{
document.getElementById("message").innerHTML = "Patientez...mise à jour des coordonnées...";
GDownloadUrl("http://localhost/?request=set_coords&lat=" + marker.getPoint().lat() + "&lng=" + marker.getPoint().lng() + "&id=" + id,
function(data, responseCode) {
var xml = GXml.parse(data);
var status = xml.documentElement.getElementsByTagName("status");
if (status[0].getAttribute("error") == 1) {
alert("Vous devez avoir les droits pour mettre à jour la base.\n" +
"Or vous êtes actuellement connecté sous l'utilisateur '" +
status[0].getAttribute("username") + "' et ne possédez pas ces droits");
} else {
document.getElementById("message").innerHTML = "Modification de coordonnées réussie.";
}
});
return true;
};
/*Ajout d'un marqueur dragable sur la carte avec écoute des événements - affichage des coordonnées lors du dragend*/
/*GMarkerOptions.draggable = true;*/
function createMarkerDragable (point,icon)
{
var marker = new GMarker(point,{draggable:true, icon:icon});
map.addOverlay(marker);
marker.enableDragging();
GEvent.addListener(marker, "dragstart", function()
{
map.closeInfoWindow();
});
GEvent.addListener(marker, "dragend", function()
{
marker.openInfoWindowHtml("X:"+marker.getPoint().lat()+"<br /> Y: "+marker.getPoint().lng());
//markerDragend(marker, 1);
});
}
createMarkerDragable (point5,icon2);
/*Afficher un trajet sur la carte*/
/*Dessin d'un trajet*/
/*à la main*/
var polyline = new GPolyline([
new GLatLng(45.7548,4.7298),
new GLatLng(46.7548,4.8298),
new GLatLng(47.7548,4.9298)
], "#FF0000", 10);
//map.addOverlay(polyline);
/*avec l'outil : http://www.google.fr/apis/maps/documentation/polylineutility.html*/
var ep_b1 = "afivGabq[siN_lb@nqP}}[ljW_lb@fwHlyjBkly@~aO";
var el_b1 = "BBBBBB";
var parcours = new GPolyline.fromEncoded
({
color: "blue",
weight: 10,
points: ep_b1,
levels: el_b1,
zoomFactor: 32,
numLevels: 4
});
map.addOverlay(parcours);
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 1000px; height: 800px"></div>
<div id="message" style="position: absolute; background:#FFFFFF; z-index:100000;" ></div>
</body>
</html>Un message, un commentaire ?
Pour participer à ce forum, vous devez vous enregistrer au préalable. Merci d’indiquer ci-dessous l’identifiant personnel qui vous a été fourni. Si vous n’êtes pas enregistré, vous devez vous inscrire.
Messages
1. GoogleMaps - trucs et astuces, 9 octobre 2007, 15:55, par Jean-Philippe
Votre clef Google Maps n’est plus active,
apparemment.
1. GoogleMaps - trucs et astuces, 21 janvier 2008, 17:16, par Guillaume
rien à voir, il faut une clef par NDD