#liste_articles {display:block}
designbyinook

|

Technologies

|

Géolocalisation

|

GoogleMaps - trucs et astuces

 

GoogleMaps - trucs et astuces

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 &agrave; jour des coordonn&eacute;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&eacute;es r&eacute;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>

mardi 15 mai 2007 par Patrick Vincent


Exemple Google Maps
(HTML)