APPLICATIONS-GOOGLE-MAPS.com



Comment utiliser les API's Google Maps, tutoriels Google Maps, cartographie Google Maps


Image
image
image
image




Page précédente   Page suivante

AJOUER UN BOUTON "ZOOM" À LA CARTE GOOGLE MAPS

En cours de modification !!!

5 groupes de boutons de contrôles de zoom sont proposés par Google Maps, voyez-les ci-dessous.
Ces groupes de boutons sont affichés dans le coin supérieur gauche.

Applications Google Maps : Petits boutons de zoom Applications Google Maps : Petits boutons 3D de zoom Applications Google Maps : Petits boutons de zoom et contrôle de direction Applications Google Maps : Grands boutons de zoom et contrôle de direction Applications Google Maps : Grands boutons 3D de zoom et contrôle de direction



Petit groupe de boutons de zoom

<html>
  <head>
    <title>Application Google Maps : Boutons de zoom</title>
    <script src="http://maps.google.com/maps?file=api&v=2&key=
    ABQIAAAAFw0lDRKsdCra15LPvIxvehS3Kl_ZRrzIrsFqDz8GBXIeW1O52xQh3P31Xg2eTvqFRAyuOMY4dQrRQw"
    type="text/javascript"></script>
    <script type="text/javascript">//<![CDATA[
      function load()
        {
        if (GBrowserIsCompatible())
          {
          var map = new GMap2(document.getElementById("map"));
          map.setCenter(new GLatLng(48.85929404029, 2.341461181640), 12);
// ajout de la propriété zoom à la carte "map"
          map.addControl(new GSmallZoomControl());
          }
        }
    //]]></script>
  </head>
  <body onload="load()" onunload="GUnload()">
    <div id="map" style="width: 500px; height: 300px"></div>
  </body>
</html>

Explications :

Cette fois, on ajoute la propriété "addCrontrol" (ajout de contrôle) avec l'attribut "GSmallZoomControl".

Résultat :




Petit groupe de boutons 3D de zoom

<html>
  <head>
    <title>Application Google Maps : Boutons 3D de zoom</title>
    <script src="http://maps.google.com/maps?file=api&v=2&key=
    ABQIAAAAFw0lDRKsdCra15LPvIxvehS3Kl_ZRrzIrsFqDz8GBXIeW1O52xQh3P31Xg2eTvqFRAyuOMY4dQrRQw"
    type="text/javascript"></script>
    <script type="text/javascript">//<![CDATA[
      function load()
        {
        if (GBrowserIsCompatible())
          {
          var map = new GMap2(document.getElementById("map"));
          map.setCenter(new GLatLng(48.85929404029, 2.341461181640), 12);
// ajout de la propriété zoom à la carte "map"
          map.addControl(new GSmallZoomControl3D());
          }
        }
    //]]></script>
  </head>
  <body onload="load()" onunload="GUnload()">
    <div id="map" style="width: 500px; height: 300px"></div>
  </body>
</html>

Explications :

Cette fois, on ajoute la propriété "addCrontrol" (ajout de contrôle) avec l'attribut "GSmallZoomControl3D".

Résultat :




Petit groupe de boutons de contrôle de zoom et direction

<html>
  <head>
    <title>Application Google Maps : Boutons de zoom</title>
    <script src="http://maps.google.com/maps?file=api&v=2&key=
    ABQIAAAAFw0lDRKsdCra15LPvIxvehS3Kl_ZRrzIrsFqDz8GBXIeW1O52xQh3P31Xg2eTvqFRAyuOMY4dQrRQw"
    type="text/javascript"></script>
    <script type="text/javascript">//<![CDATA[
      function load()
        {
        if (GBrowserIsCompatible())
          {
          var map = new GMap2(document.getElementById("map"));
          map.setCenter(new GLatLng(48.85929404029, 2.341461181640), 12);
// ajout de la propriété zoom à la carte "map"
          map.addControl(new GSmallMapControl());
          }
        }
    //]]></script>
  </head>
  <body onload="load()" onunload="GUnload()">
    <div id="map" style="width: 500px; height: 300px"></div>
  </body>
</html>

Explications :

Cette fois, on ajoute la propriérté "addCrontrol" (ajout de contrôle) avec l'attribut "GSmallMapControl".

Résultat :




Grand groupe de boutons de contrôle de zoom et direction

<html>
  <head>
    <title>Application Google Maps : Boutons de zoom</title>
    <script src="http://maps.google.com/maps?file=api&v=2&key=
    ABQIAAAAFw0lDRKsdCra15LPvIxvehS3Kl_ZRrzIrsFqDz8GBXIeW1O52xQh3P31Xg2eTvqFRAyuOMY4dQrRQw"
    type="text/javascript"></script>
    <script type="text/javascript">//<![CDATA[
      function load()
        {
        if (GBrowserIsCompatible())
          {
          var map = new GMap2(document.getElementById("map"));
          map.setCenter(new GLatLng(48.85929404029, 2.341461181640), 12);
// ajout de la propriété zoom à la carte "map"
          map.addControl(new GLargeMapControl());
          }
        }
    //]]></script>
  </head>
  <body onload="load()" onunload="GUnload()">
    <div id="map" style="width: 500px; height: 300px"></div>
  </body>
</html>

Explications :

Cette fois, on ajoute la propriérté "addCrontrol" (ajout de contrôle) avec l'attribut "GLargeMapControl".

Résultat :




Grand groupe de boutons 3D de contrôle de zoom et direction

<html>
  <head>
    <title>Application Google Maps : Boutons 3D de zoom</title>
    <script src="http://maps.google.com/maps?file=api&v=2&key=
    ABQIAAAAFw0lDRKsdCra15LPvIxvehS3Kl_ZRrzIrsFqDz8GBXIeW1O52xQh3P31Xg2eTvqFRAyuOMY4dQrRQw"
    type="text/javascript"></script>
    <script type="text/javascript">//<![CDATA[
      function load()
        {
        if (GBrowserIsCompatible())
          {
          var map = new GMap2(document.getElementById("map"));
          map.setCenter(new GLatLng(48.85929404029, 2.341461181640), 12);
// ajout de la propriété zoom à la carte "map"
          map.addControl(new GLargeMapControl3D());
          }
        }
    //]]></script>
  </head>
  <body onload="load()" onunload="GUnload()">
    <div id="map" style="width: 500px; height: 300px"></div>
  </body>
</html>

Explications :

Cette fois, on ajoute la propriérté "addCrontrol" (ajout de contrôle) avec l'attribut "GLargeMapControl3D".

Résultat :




Page précédente   Page suivante

image


image

Informations :
"Google" et "Google Maps" sont des noms déposés par la société Google, Inc. de Mountain View (Comté de Santa Clara, Californie, USA).





image
  © Copyright 2008© VDC
  Tout droits réservés
  Date de création : 01/06/2008
  Dernière mise à jour : 15/03/2009