La classe GMap2 - configuration

Voici la liste des fonctions et méthodes de la classe GMap2.

Il s’agit de la classe principale de l’Api Google Map.

NB: Les paramètres entre crochets sont optionnels.

Voir aussi : controls, types de carte, état de la carte, modifier l’état de la carte, overlays, info window [bientôt en ligne], conversions des coordonnées [bientôt en ligne], rotation [bientôt en ligne], événements [bientôt en ligne].

Créer une carte Google Map

La signature de la méthode permettant de créer la carte Google est la suivante:

GMap2(eltDom, [options]);

- Cette méthode instancie l’objet Map en créant une nouvelle carte dans l’élément html déclaré via la variable eltDom. Il s’agit habituellement d’un div.

- Les arguments optionnels [options] peuvent être des instances de la classe GMapOptions que nous aborderons dans un autre article.

- Si aucune option n’est définie, la carte Google par défaut sera utilisée (G_DEFAULT_MAP_TYPES).

- Idem, si aucune taille n’est définie dans les options, la taille par défaut sera celle de l’élément html.

- Si une taille est renseignée dans les options, l’élément html contenant la carte sera redimensionné en fonction.

Une carte doit être “centrée” avant d’être utilisée. Ainsi, pour que votre carte s’affiche, il est nécessaire d’appeler la méthode GMap2.setCenter().

<script type="text/javascript">

   var map = new GMap2(document.getElementById('map'));
   /* Ici, nous déclarons l'élément html ayant pour id "map" comme conteneur de la map */

</script>

Configuration de la map

Les différentes méthodes de configuration de l’api Google Map sont les suivantes :

Pour appliquer chaque paramètre à la carte, il suffit d’utiliser la notation pointée sur l’objet map déclaré.

enableDragging()

La méthode enableDragging permet de rendre disponible le glisser / déposer sur la map. Cette option est activée par défaut.

<script type="text/javascript">

   var map = new GMap2(document.getElementById('map'));
   /* Ici, nous déclarons l'élément html ayant pour id "map" comme conteneur de la map */

   map.enableDragging();
   /* rend disponible le glisser / déposer sur la carte */
</script>

disableDragging()

La méthode disableDragging permet de bloquer le glisser / déposer sur la map.

<script type="text/javascript">

   var map = new GMap2(document.getElementById('map'));
   /* Ici, nous déclarons l'élément html ayant pour id "map" comme conteneur de la map */

   map.disableDragging();
   /* interdit le glisser / déposer sur la carte */
</script>

draggingEnabled()

La méthode draggingEnabled permet de tester si le glisser / déposer est autorisé sur la map.

<script type="text/javascript">

   var map = new GMap2(document.getElementById('map'));
   /* Ici, nous déclarons l'élément html ayant pour id "map" comme conteneur de la map */

   if(map.draggingEnabled)
     alert('Le glisser / déposer est autorisé');

</script>

enableInfoWindow()

La méthode enableInfoWindow permet de rendre disponible l’ouverture la fenêtre d’information rattachée à un marker. Cette fenêtre est communément nommée infoWindow. Par défaut, cette option est activée.

<script type="text/javascript">

   var map = new GMap2(document.getElementById('map'));
   /* Ici, nous déclarons l'élément html ayant pour id "map" comme conteneur de la map */

   map.enableInfoWindow();
   /* Active l'ouverture des fenêtres d'information */

</script>

disableInfoWindow()

La méthode disableInfoWindow désactive l’ouverture des fenêtres d’information rattachées aux markers.

<script type="text/javascript">

   var map = new GMap2(document.getElementById('map'));
   /* Ici, nous déclarons l'élément html ayant pour id "map" comme conteneur de la map */

   map.disableInfoWindow();
   /* Désactive l'ouverture des fenêtres d'information */

</script>

infoWindowEnabled()

La méthode infoWindowEnabled permet de tester si l’ouverture des fenêtres associées à un marker est autorisée sur la map. Cette méthode retourne true si l’ouverture des fenêtres est permise.

<script type="text/javascript">

   var map = new GMap2(document.getElementById('map'));
   /* Ici, nous déclarons l'élément html ayant pour id "map" comme conteneur de la map */

   if(map.infoWindowEnabled)
     alert('L\'ouverture des fenêtres est autorisée');

</script>

enableDoubleClickZoom()

La méthode enableDoubleClickZoom permet d’activer le zoom sur la map suite à un double click. Si cette option est activée, un double click sur le bouton gauche de la souris déclenchera un zoom + 1 sur la carte.

Un doucble click sur le bouton droit déclenchera quant à lui un zoom - 1 sur la map.

Le double click recentre automatiquement la carte sur le point où le double click a eu lieu. Cette option est désactivée par défaut.

<script type="text/javascript">

   var map = new GMap2(document.getElementById('map'));
   /* Ici, nous déclarons l'élément html ayant pour id "map" comme conteneur de la map */

   map.enableDoubleClickZoom();
   /* active le zoom (+ / - 1) sur la map suite à un double click */
</script>

disableDoubleClickZoom()

La méthode enableDoubleClickZoom permet de bloquer le zoom sur la map suite à un double click (gauche ou droit).

<script type="text/javascript">

   var map = new GMap2(document.getElementById('map'));
   /* Ici, nous déclarons l'élément html ayant pour id "map" comme conteneur de la map */

   map.disableDoubleClickZoom();
   /* Désactive le zoom (+ / - 1) sur la map suite à un double click */
</script>

doubleClickZoomEnabled()

La méthode doubleClickZoomEnabled permet de tester si le zoom (+/- 1) sur la map suite à un double click est autorisé.

<script type="text/javascript">

   var map = new GMap2(document.getElementById('map'));
   /* Ici, nous déclarons l'élément html ayant pour id "map" comme conteneur de la map */

   if(map.doubleClickZoomEnabled)
     alert('Le zoom suite au double click est autorisé sur la map');

</script>

enableContinuousZoom()

La méthode enableContinuousZoom permet d’activer un zoom plus sensible dans la mesure où le zoom effectué (+ ou -) sera moins important.

Par défaut, cette option est désactivée.

<script type="text/javascript">

   var map = new GMap2(document.getElementById('map'));
   /* Ici, nous déclarons l'élément html ayant pour id "map" comme conteneur de la map */

   map.enableContinuousZoom();
   /* Active le zoom  doux ("smooth zooming") sur la map */
</script>

disableContinuousZoom()

La méthode disableContinuousZoom permet de désactiver le zoom sensible (smooth) sur la map. Voir également la méthode enableContinuousZoom.

<script type="text/javascript">

   var map = new GMap2(document.getElementById('map'));
   /* Ici, nous déclarons l'élément html ayant pour id "map" comme conteneur de la map */

   map.disableContinuousZoom();
   /* Désactive le zoom  doux ("smooth zooming") sur la map */
</script>

ContinuousZoomEnabled()

La méthode ContinuousZoomEnabled permet de tester si le zoom (+/- 1) sensible (smooth) sur la map est autorisé. Cette méthode retourne true si cette option est acitvée, false le cas échéant.

<script type="text/javascript">

   var map = new GMap2(document.getElementById('map'));
   /* Ici, nous déclarons l'élément html ayant pour id "map" comme conteneur de la map */

   if(map.ContinuousZoomEnabled)
     alert('Le zoom sensible est autorisé sur la map');

</script>

enableGoogleBar()

La méthode enableGoogleBar() ajoute la GoogleBar au sein de la carte. Il s’agit d’un moteur de recherche intégré à la map. S’il est activé, il prendra la place du logo “Powered By Google”. Ce moteur n’est pas activé par défaut.

enableGoogleBar

<script type="text/javascript">

   var map = new GMap2(document.getElementById('map'));
   /* Ici, nous déclarons l'élément html ayant pour id "map" comme conteneur de la map */

    map.enableGoogleBar();
   /* Ajout du moteur de recherche sur la carte */

</script>

disableGoogleBar()

La méthode disableGoogleBar() désactive la GoogleBar (moteur de recherche intégré à la map). Il est déjà désactivé par défaut.

<script type="text/javascript">

   var map = new GMap2(document.getElementById('map'));
   /* Ici, nous déclarons l'élément html ayant pour id "map" comme conteneur de la map */

    map.disableGoogleBar();
   /* Désactive le moteur de recherche sur la carte */

</script>

enableScrollWheelZoom()

La méthode enableScrollWheelZoom() rend disponible la fonction zoom sur la molette de la souris. Cette action est désactivée par défaut.

<script type="text/javascript">

   var map = new GMap2(document.getElementById('map'));
   /* Ici, nous déclarons l'élément html ayant pour id "map" comme conteneur de la map */

    map.enableScrollWheelZoom();
   /* Autorise le zooming avec la molette d'une souris */

</script>

disableScrollWheelZoom()

La méthode disableScrollWheelZoom() désactive la fonction zoom sur la molette d’une souris. Cette action est déjà désactivée par défaut.

<script type="text/javascript">

   var map = new GMap2(document.getElementById('map'));
   /* Ici, nous déclarons l'élément html ayant pour id "map" comme conteneur de la map */

    map.disableScrollWheelZoom();
   /* Désactive le zooming avec la molette d'une souris */

</script>

scrollWheelZoomEnabled()

La méthode scrollWheelZoomEnabled() permet de tester si le zooming avec la molette d’une souris est autorisé. Si tel est le cas, le test renvoie true.

<script type="text/javascript">

   var map = new GMap2(document.getElementById('map'));
   /* Ici, nous déclarons l'élément html ayant pour id "map" comme conteneur de la map */

   if(map.scrollWheelZoomEnabled)
     alert('Le zoom avec la molette de la souris est activé');

</script>

enablePinchToZoom()

La méthode enablePinchToZoom() active le zoom tactile (suite à l’écartement des doigts = “pinching” - pincer) sur iPhone ou iPod. Ce type de zoom est activé par défaut.

<script type="text/javascript">

   var map = new GMap2(document.getElementById('map'));
   /* Ici, nous déclarons l'élément html ayant pour id "map" comme conteneur de la map */

    map.enablePinchToZoom();
   /* Active le zooming avec la main */

</script>

disablePinchToZoom()

La méthode disablePinchToZoom() désactive le zoom tactile (suite à l’écartement des doigts = “pinching” - pincer) sur iPhone ou iPod.

<script type="text/javascript">

   var map = new GMap2(document.getElementById('map'));
   /* Ici, nous déclarons l'élément html ayant pour id "map" comme conteneur de la map */

    map.disablePinchToZoom();
   /* Désctive le zooming avec la main */

</script>

pinchToZoomEnabled()

La méthode pinchToZoomEnabled() permet de tester si le zooming avec la main est autorisé (pour iTouch ou iPod). Si tel est le cas, le test renvoie true.

<script type="text/javascript">

   var map = new GMap2(document.getElementById('map'));
   /* Ici, nous déclarons l'élément html ayant pour id "map" comme conteneur de la map */

   if(map.pinchToZoomEnabled)
     alert('Le zoom avec la main est activé');

</script>

Laisser une réponse

Security Code: