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>
