Dans la version 1 de l’Api Google Map, un objet de type GPoint représentait un point par ses coordonnées géographiques, c’est-à-dire par sa latitude et sa longitude exprimées en degrés.
Depuis la version 2 de l’Api, un objet de type GPoint représente un point sur la map représenté par ses coordonnées en pixels. Il faut dorénavant faire appel à la classe GLatLng pour définir un point par ses coordonnées géographiques en degrés.

NB : Dans le système de coordonnées de la Google Map, en augmentant la valeur x (abscisses) d’un objet de type GPoint, celui-ci se déplacera vers la gauche. En augmentant sa valeur y (ordonnées), celui-ci se déplacera vers le haut.

Bien que les propriétés x et y soient accessibles en écriture, Google recommande de toujours créer un nouveau point (une nouvelle instance de la classe GPoint) afin d’éviter de modifier des valeurs existantes.

Le constructeur GPoint

Signature de la classe GPoint : GPoint(x:Number, y:Number).

Créé un nouvel objet GPoint ayant pour coordonnées (en pixels) les valeurs x et y.

<script type="text/javascript">

   var myIcons = [];
   /* Considérons un tableau d'icônes (objets de type GIcon) */

   Pour positionner une icône par rapport à son origine par défaut
   (sur un objet de type GMarker par exemple) il faut procéder ainsi :

   myIcons[0].iconAnchor = new GPoint(10,20);
   /* Dans cet exemple, l'icône sera décalée de 10px vers la gauche
   et de 20px vers le haut par rapport à son point d'accroche
   par défaut */

</script>

propriété x

La propriété x d’un objet de type GPoint correspond à son décalage en abscisse (axe horizontal) par rapport à son origine par défaut.
Si cette valeur est positive, cet objet sera décalé vers la gauche par rapport à son origine prévue. Si elle est négative, il sera décalé vers la droite.

propriété y

La propriété y d’un objet de type GPoint correspond à son décalage en ordonnées (axe vertical) par rapport à son origine par défaut.
Si cette valeur est positive, cet objet sera plus haut que son origine prévue. Si elle est négative, il sera plus bas.

toString()

La méthode toString() retournera une chaîne contenant les coordonnées x et y de l’objet de type GPoint passé en référence séparées par une virgule et entourées de parenthèses.

<script type="text/javascript">

   var myIcons = [];
   /* Considérons un tableau d'icônes (objets de type GIcon) */

   Pour positionner une icône par rapport à son origine par défaut
   (sur un objet de type GMarker par exemple) il faut procéder ainsi :

   myIcons[0].iconAnchor = new GPoint(10,20);
   /* Dans cet exemple, l'icône sera décalée de 10px vers la gauche
   et de 20px vers le haut par rapport à son point d'accroche
   par défaut */

   var coordPoint = myIcons[0].toString();
   /* coordPoint contient (10,20) */

</script>

equals(other:GPoint)

La métode equals compare deux objets de type GPoint et retourne true si les propriétés et leurs valeurs de ces 2 objets sont égales.

Un objet de type GBounds représente une aire rectangulaire de la map par ses coordonnées en pixels.
La classe GLatLngBounds définit quant à elle une aire rectangulaire définie par les coordonnées géographiques de ses coins (extrémités), en l’occurrence le coin inférieur gauche (sud-ouest) et le coin supérieur droit (nord-est).

Le constructeur GBounds

Signature de la classe GBounds : GBounds(points:GPoint[]).

Créé un nouvel objet GBounds. Il s’agit d’un rectangle qui contient l’ensemble des points (objets GPoint) passés en paramètres.

NB : depuis la version 2 de l’Api Google Map, l’objet GPoint ne représente plus un point par ses coordonnées géographiques mais par ses coordonnées en pixels. Les coordonnées géographiques sont maintenant représentées par des objets de type GLatLng.

<script type="text/javascript">

   var map = new GMap2(document.getElementById('map'), { size: new GSize(200,200)});
   /* Ici, nous déclarons l'élément html ayant pour id "map" comme conteneur de la map
   avec une taille de 200 * 200 pixel */

   var myPoints = [];
   /* Déclaration du tableau qui contiendra nos points, objets GLatLng. */

   myPoints.push( new GLatLng(48.8566667, 2.3509871)); // Paris
   myPoints.push( new GLatLng(48.8123155, 2.2381535)); // Meudon
   myPoints.push( new GLatLng(48.3906042, -4.4869013)); // Brest
   myPoints.push( new GLatLng(50.6371834, 3.0630174)); // Lille 
   /* On remplit notre tableau  */

   var region = new GBounds(myPoints);
   /* region est un rectangle définit par des coordonnées en pixels
   qui contient l'ensemble des points (objets de type GLatLng)
   du tableau myPoints passé en paramètre  */

</script>

minX

Soit l’objet region, un objet de type GBounds.
La propriété minX contient la longitude exprimée en degrés du coin inférieur gauche de region.

minY

Soit l’objet region, un objet de type GBounds.
La propriété minY contient la latitude exprimée en degrés du coin inférieur gauche de region.

maxX

Soit l’objet region, un objet de type GBounds.
La propriété maxX contient la longitude exprimée en degrés du coin supérieur droit de region.

maxY

Soit l’objet region, un objet de type GBounds.
La propriété maxY contient la latitude exprimée en degrés du coin supérieur droit de region.

En utilisant ces 4 propriétés (minX, minY, maxX, maxY), on peut afficher une carte contenant l’ensemble des points passés en paramètre à l’objet GBounds :

<script type="text/javascript">

   var map = new GMap2(document.getElementById('map'), { size: new GSize(200,200)});
   /* Ici, nous déclarons l'élément html ayant pour id "map" comme conteneur de la map
   avec une taille de 200 * 200 pixel */

   var myPoints = [];
   /* Déclaration du tableau qui contiendra nos points, objets GLatLng. */

   myPoints.push( new GLatLng(48.8566667, 2.3509871)); // Paris
   myPoints.push( new GLatLng(48.8123155, 2.2381535)); // Meudon
   myPoints.push( new GLatLng(48.3906042, -4.4869013)); // Brest
   myPoints.push( new GLatLng(50.6371834, 3.0630174)); // Lille 
   /* On remplit notre tableau  */

   var region = new GBounds(myPoints);
   /* region est un rectangle définit par des coordonnées en pixels
   qui contient l'ensemble des points (objets de type GLatLng)
   du tableau myPoints passé en paramètre  */

   var SW = new GLatLng(region.minY,region.minX);
   /* SW représente le point du coin inférieur gauche de region
   par ses coordonnées en degrés. */

   var NE = new GLatLng(region.maxY,region.maxX);
   /* NE représente le point du coin supérieur droit de region
   par ses coordonnées en degrés. */

   var bounds = new GLatLngBounds(SW,NE);
   /*  bounds représente region par ses coordonnées en degrés */

   var zoom = map.getBoundsZoomLevel(bounds);
   /* zoom contient la valeur du zoom nécessaire à l'affichage de la carte
   pour que celle-ci puisse contenir l'ensemble des points myPoints */

   var centre = bounds.getCenter();
   /*  centre contient les coordonnées du centre de cette vue en degrés */

   map.setCenter(centre, zoom);
   /*  Initialisation de la carte avec l'ensemble de ces éléments  */   

</script>

toString()

Soit l’objet region, un objet de type GBounds.
La méthode toString() retournera une chaîne contenant les coordonnées des coins inférieur droit (southEast) et supérieur gauche (northWest) de region en degrés, séparées par une virgule et entourées de parenthèses.

<script type="text/javascript">

   var map = new GMap2(document.getElementById('map'), { size: new GSize(200,200)});
   /* Ici, nous déclarons l'élément html ayant pour id "map" comme conteneur de la map
   avec une taille de 200 * 200 pixel */

   var myPoints = [];
   /* Déclaration du tableau qui contiendra nos points, objets GLatLng. */

   myPoints.push(new GLatLng(48.8566667, 2.3509871)); // Paris
   myPoints.push(new GLatLng(48.8123155, 2.2381535)); // Meudon
   myPoints.push(new GLatLng(48.3906042, -4.4869013)); // Brest
   myPoints.push(new GLatLng(50.6371834, 3.0630174)); // Lille 
   /* On remplit notre tableau  */

   var region = new GBounds(myPoints);
   /* region est un rectangle définit par des coordonnées en pixels
   qui contient l'ensemble des points (objets de type GLatLng)
   du tableau myPoints passé en paramètre  */

   var cornerCoords = region.toString();
   /*  Ici, cornerCoords contient ((-4.4869013, 44.3509239), (2.5735101, 50.6371834))  */   

</script>

equals(other)

La métode equals compare deux objets de type GBounds et retourne true si tous les paramètres de ces 2 objets sont égaux (depuis la version 2.98 de l’Api Google Map).

mid()

Soit l’objet region, un objet de type GBounds.
La méthode mid() retourne un objet de type GPoint représentant le point central de region par ses coordonnées en pixels (depuis la version 2.88 de l’api).

<script type="text/javascript">

   var map = new GMap2(document.getElementById('map'), { size: new GSize(200,200)});
   /* Ici, nous déclarons l'élément html ayant pour id "map" comme conteneur de la map
   avec une taille de 200 * 200 pixel */

   var myPoints = [];
   /* Déclaration du tableau qui contiendra nos points, objets GLatLng. */

   myPoints.push(new GLatLng(48.8566667, 2.3509871)); // Paris
   myPoints.push(new GLatLng(48.3906042, -4.4869013)); // Brest
   /* On remplit notre tableau  */

   var region = new GBounds(myPoints);
   /* region est un rectangle définit par des coordonnées en pixels
   qui contient l'ensemble des points (objets de type GLatLng)
   du tableau myPoints passé en paramètre  */

   var centerCoords = region.mid();
   /*  Ici, centerCoords représente le centre de region par ses
   coordonnées en pixels */   

</script>

min()

Soit l’objet region, un objet de type GBounds.
La méthode min() retourne un objet de type GPoint représentant le coin supérieur gauche (northWest) de region par ses coordonnées en pixels.

<script type="text/javascript">

   var map = new GMap2(document.getElementById('map'), { size: new GSize(200,200)});
   /* Ici, nous déclarons l'élément html ayant pour id "map" comme conteneur de la map
   avec une taille de 200 * 200 pixel */

   var myPoints = [];
   /* Déclaration du tableau qui contiendra nos points, objets GLatLng. */

   myPoints.push(new GLatLng(48.8566667, 2.3509871)); // Paris
   myPoints.push(new GLatLng(48.3906042, -4.4869013)); // Brest
   /* On remplit notre tableau  */

   var region = new GBounds(myPoints);
   /* region est un rectangle définit par des coordonnées en pixels
   qui contient l'ensemble des points (objets de type GLatLng)
   du tableau myPoints passé en paramètre  */

   var coordsUpperLeft = region.min();
   /*  Ici, coordsUpperLeft représente le coin supérieur gauche
   de region par ses coordonnées en pixels */   

</script>

max()

Soit l’objet region, un objet de type GBounds.
La méthode max() retourne un objet de type GPoint représentant le coin inférieur droit (southEast) de region par ses coordonnées en pixels.

<script type="text/javascript">

   var map = new GMap2(document.getElementById('map'), { size: new GSize(200,200)});
   /* Ici, nous déclarons l'élément html ayant pour id "map" comme conteneur de la map
   avec une taille de 200 * 200 pixel */

   var myPoints = [];
   /* Déclaration du tableau qui contiendra nos points, objets GLatLng. */

   myPoints.push(new GLatLng(48.8566667, 2.3509871)); // Paris
   myPoints.push(new GLatLng(48.3906042, -4.4869013)); // Brest
   /* On remplit notre tableau  */

   var region = new GBounds(myPoints);
   /* region est un rectangle définit par des coordonnées en pixels
   qui contient l'ensemble des points (objets de type GLatLng)
   du tableau myPoints passé en paramètre  */

   var coordsLowerRight = region.max();
   /*  Ici, coordsLowerRight représente le coin inférieur droit
   de region par ses coordonnées en pixels */   

</script>

containsBounds(other:GBounds)

La méthode containsBounds() compare 2 objets de type GBounds. Si l’objet comparé est entièrement inclus dans l’objet de référence, la méthode retourne true.

<script type="text/javascript">

   var map = new GMap2(document.getElementById('map'), { size: new GSize(200,200)});
   /* Ici, nous déclarons l'élément html ayant pour id "map" comme conteneur de la map
   avec une taille de 200 * 200 pixel */

   var myPoints_1 = [];
   var myPoints_2 = [];
   /* Déclaration des tableaux qui contiendront nos points, objets GLatLng. */

   myPoints_1.push(new GLatLng(48.8566667, 2.3509871)); // Paris
   myPoints_1.push(new GLatLng(48.3906042, -4.4869013)); // Brest

   myPoints_2.push(new GLatLng(48.8123155, 2.2381535)); // Meudon
   myPoints_2.push(new GLatLng(50.6371834, 3.0630174)); // Lille 

   /* On remplit nos tableaux  */

   var region_1 = new GBounds(myPoints_1);
   var region_2 = new GBounds(myPoints_2);

   if(region_1.containsBounds(region_2))
     GLog.write('region_2 est entièrement incluse dans region_1');

</script>

containsPoint(point:GPoint)

Soit region, un objet de type GBounds.
La méthode containsPoint() retourne true si region englobe le point (objet de type GPoint) passé en paramètre.

<script type="text/javascript">

   var map = new GMap2(document.getElementById('map'), { size: new GSize(200,200)});
   /* Ici, nous déclarons l'élément html ayant pour id "map" comme conteneur de la map
   avec une taille de 200 * 200 pixel */

   var myPoints = [];
   /* Déclaration du tableau qui contiendra nos points, objets GLatLng. */

   myPoints.push(new GLatLng(48.8566667, 2.3509871)); // Paris
   myPoints.push(new GLatLng(48.3906042, -4.4869013)); // Brest
  /* On remplit notre tableau  */

   var Lille = new GLatLng(50.6371834, 3.0630174);
   var region = new GBounds(myPoints);

   if(region.containsPoint(Lille))
     GLog.write('Lille est incluse dans la région Paris / Brest');

</script>

extend(point:GPoint)

Soit region, un objet de type GBounds.
La méthode extend() élargit la surface rectangulaire définie par region de sorte que le point (objet de type GPoint) passé en paramètre y soit inclus.

<script type="text/javascript">

   var map = new GMap2(document.getElementById('map'), { size: new GSize(200,200)});
   /* Ici, nous déclarons l'élément html ayant pour id "map" comme conteneur de la map
   avec une taille de 200 * 200 pixel */

   var myPoints = [];
   /* Déclaration du tableau qui contiendra nos points, objets GLatLng. */

   myPoints.push(new GLatLng(48.8566667, 2.3509871)); // Paris
   myPoints.push(new GLatLng(48.3906042, -4.4869013)); // Brest
  /* On remplit notre tableau  */

   var Lille = new GLatLng(50.6371834, 3.0630174);
   var region = new GBounds(myPoints);

   if(!region.containsPoint(Lille)){
     GLog.write('Lille est hors de la région rectangulaire définie par Paris et Brest');
     region.extend(Lille);
   }
   /*  Ici, si Lille n'est pas incluse dans region,
   on élargit region afin que Lille y soit finalement incluse */

</script>

Un objet de type GLatLngBounds représente une aire rectangulaire définie par les coordonnées géographiques de ses coins (extrémités), en l’occurrence le coin inférieur gauche (sud-ouest) et le coin supérieur droit (nord-est).
La classe GBounds définit quant à elle une zone rectangulaire de la carte par ses coordonnées en pixels.

Le constructeur GLatLngBounds

Signature de la classe GLatLngBounds : GLatLngBounds(sw?:GLatLng, ne?:GLatLng).

Créé un nouvel objet GLatLngBounds. Il s’agit d’un rectangle ayant pour limites les points sud-ouest et nord-est renseignés lors de l’instanciation de la classe.

À noter que ces paramètres sont optionnels. Il est possible de créer une instance de la classe GLatLngBounds sans aucun argument.

<script type="text/javascript">

   var bounds = new GLatLngBounds();
   /* Création de l'objet bounds de type GLatLngBounds */

</script>

equals(other)

La métode equals compare deux objet de type GLatLngBounds et retourne true si les propriétés de ces 2 objets ont exactement les mêmes valeurs (à un certain arrondi près).

containsLatLng()

Depuis la version 2.88 de l’Api Google Map la signature de la méthode est containsLatLng(latlng:GLatLng). Avant cette version sa signature était contains(latlng:GLatLng).

La méthode containsLatLng() retourne true si l’objet GLatLng passé en paramètre est inclus dans la zone rectangulaire définie par l’intanciation de la classe GLatLngBounds.

<script type="text/javascript">

   var map = new GMap2(document.getElementById('map'), { size: new GSize(200,200)});
   /* Ici, nous déclarons l'élément html ayant pour id "map" comme conteneur de la map
   avec une taille de 200 * 200 pixel */

   var Paris = new GLatLng(48.8566667, 2.3509871);
   var Meudon = new GLatLng(48.8123155, 2.2381535);
   var Brest = new GLatLng(48.3906042, -4.4869013);
   /* Paris, Meudon et Brest sont des instances de la classe GLatLng.  */

   var bounds = new GLatLngBounds( Meudon, Paris);
   /* Création de l'objet bounds de type GLatLngBounds
   Ici, la zone déclarée est un rectangle
   ayant pour coin inférieur gauche : Meudon et pour coin
   supérieur droit : Paris.*/ 

   if(bounds.containsLatLng(Brest))
     GLog.write('Brest est bien compris entre Paris et Meudon');
   else
     GLog.write('Brest n\'est pas compris entre Paris et Meudon');

   /* Affiche  "Brest n'est pas compris entre Paris et Meudon" bien entendu ... */

</script>

intersects(other:GLatLngBounds)

La métode intersects compare deux objet de type GLatLngBounds et retourne true si l’objet GLatLngBounds comparé intersecte l’objet GLatLngBounds de référence.

<script type="text/javascript">

   var map = new GMap2(document.getElementById('map'), { size: new GSize(200,200)});
   /* Ici, nous déclarons l'élément html ayant pour id "map" comme conteneur de la map
   avec une taille de 200 * 200 pixel */

   var Paris = new GLatLng(48.8566667, 2.3509871);
   var Meudon = new GLatLng(48.8123155, 2.2381535);
   var Brest = new GLatLng(48.3906042, -4.4869013);
   /* Paris, Meudon et Brest sont des instances de la classe GLatLng.  */

   var bounds_1 = new GLatLngBounds( Meudon, Paris);
   var bounds_2 = new GLatLngBounds( Brest, Paris);
   /* Création des objets bounds de type GLatLngBounds */ 

   if(bounds_2.intersects(bounds_1))
     GLog.write('Les 2 zones se chevauchent');

</script>

containsBounds()

La signature de la méthode containsBounds() est la suivante : containsBounds(other:GLatLngBounds). Elle retourne true si l’objet de type GLatLngBounds comparé est entièrement inclus dans l’objet de type GLatLngBounds de référence.

<script type="text/javascript">

   var map = new GMap2(document.getElementById('map'), { size: new GSize(200,200)});
   /* Ici, nous déclarons l'élément html ayant pour id "map" comme conteneur de la map
   avec une taille de 200 * 200 pixel */

   var Paris = new GLatLng(48.8566667, 2.3509871);
   var Meudon = new GLatLng(48.8123155, 2.2381535);
   var Brest = new GLatLng(48.3906042, -4.4869013);
   /* Paris, Meudon et Brest sont des instances de la classe GLatLng.  */

   var bounds_1 = new GLatLngBounds(Meudon, Paris);
   var bounds_2 = new GLatLngBounds(Brest, Paris);
   /* Création des objets bounds de type GLatLngBounds */ 

   if(bounds_2.containsBounds(bounds_1))
     GLog.write('La région bounds_1 est entièrement incluse dans la région bounds_2');

</script>

extend()

La signature de la méthode extend() est la suivante : extend(latlng:GLatLng) .
Cette méthode va élargir la carte afin d’avoir un zoom suffisamment large pour y inclure tous les points (objet GLatLng) qu’on lui passera en paramètre.

Cette méthode est en général utilisée dans des boucles qui listent une quantité de points afin de récupérer le zoom approprié pour afficher tous les points sur la carte. Cf exemple ci-dessous :

<script type="text/javascript">

   var map = new GMap2(document.getElementById('map'), { size: new GSize(200,200)});
   /* Ici, nous déclarons l'élément html ayant pour id "map" comme conteneur de la map
   avec une taille de 200 * 200 pixel */

   var myPoints = [];
   /* Déclaration du tableau qui contiendra nos points, objets GLatLng. */

   var bounds = new GLatLngBounds();
   /* Instanciation de la classe GLatLngBounds */

   myPoints.push(new GLatLng(48.8566667, 2.3509871));
   myPoints.push(new GLatLng(48.8123155, 2.2381535));
   myPoints.push(new GLatLng(48.3906042, -4.4869013));
   /* On remplit notre tableau  */

   for(var i = 0; i < myPoints.length; i++)
     bounds.extend(myPoints[i]);
   /* Extension des limites de la carte afin d'y insérer tous les points */ 

   On peut ensuite utiliser une méthode map State de la classe GMap2
   intitulée getBoundsZoomLevel qui récupère le zoom nécessaire pour afficher
   la carte en fonction de ses limites.

   var newZoom = map.getBoundsZoomLevel(bounds);

   De la même manière, on récupère le centre de la région (objet GLatLngBounds)
   à l'aide de la méthode getCenter().

   var newCentre = bounds.getCenter();

   Il suffit ensuite d'initialiser la carte avec ces éléments.

   map.setCenter(newCentre, newZoom);

</script>

getSouthWest()

La méthode getSouthWest() retourne un objet de type GLatLng, en l’occurrence le point représentant le coin inférieur gauche de la carte.

<script type="text/javascript">

   var map = new GMap2(document.getElementById('map'), { size: new GSize(200,200)});
   /* Ici, nous déclarons l'élément html ayant pour id "map" comme conteneur de la map
   avec une taille de 200 * 200 pixel */

   var Paris = new GLatLng(48.8566667, 2.3509871);
   /* Paris est une instance de la classe GLatLng.
   Il s'agit donc d'un point représenté par ses coordonnées  */

   map.setCenter(Paris, 11);
   /* Affichage de la carte centrée sur Paris avec un zoom 11 */

   var pointInfGauche = bounds.getSouthWest();
   /* pointInfGauche est un objet de type GLatLng correspondant
   au coin inférieur gauche de la map */

   Pour récupérer sa latitude et sa longitude, on peut utiliser les
   méthodes de la classe GLatLng : lat() et lng():

   var latitudePointInfGauche = PointInfGauche.lat();
   var longitudePointInfGauche = PointInfGauche.lng();

</script>

getNorthEast()

La méthode getNorthEast() retourne un objet de type GLatLng, en l’occurrence le point représentant le coin supérieur droit de la carte.
Elle fonctionne de la même manière que la méthode getSouthWest().

toSpan()

La méthode toSpan() retourne la hauteur et la largeur de la carte en degrés. Cela correspond à la (latitude du coin supérieur droit - la latitude du coin inférieur gauche) et à (la longitude du coin supérieur droit - la longitude du coin inférieur gauche).

<script type="text/javascript">

   var map = new GMap2(document.getElementById('map'), { size: new GSize(200,200)});
   /* Ici, nous déclarons l'élément html ayant pour id "map" comme conteneur de la map
   avec une taille de 200 * 200 pixel */

   var Paris = new GLatLng(48.8566667, 2.3509871);
   /* Paris est une instance de la classe GLatLng.
   Il s'agit donc d'un point représenté par ses coordonnées  */

   map.setCenter(Paris, 11);
   /* Affichage de la carte centrée sur Paris avec un zoom 11 */

   var amplitudeCoordonnees = bounds.toSpan();
   /* amplitudeCoordonnees est un objet de type GLatLng ayant
   pour latitude la différence entre la latitude du coin supérieur droit
   et la latitude du coin inférieur gauche et pour longitude
   la différence entre la longitude du coin supérieur droit
   et la longitude du coin inférieur gauche*/

</script>

isFullLat()

La méthode isFullLat() retourne true si le rectangle défini par l’objet de type GLatLngBounds s’étend du pôle nord au pôle sud.

<script type="text/javascript">

   var map = new GMap2(document.getElementById('map'), { size: new GSize(200,200)});
   /* Ici, nous déclarons l'élément html ayant pour id "map" comme conteneur de la map
   avec une taille de 200 * 200 pixel */

   var Paris = new GLatLng(48.8566667, 2.3509871);
   /* Paris est une instance de la classe GLatLng.
   Il s'agit donc d'un point représenté par ses coordonnées  */

   map.setCenter(Paris, 11);
   /* Affichage de la carte centrée sur Paris avec un zoom 11 */

   if(bounds.isFullLat()){
      ...
   }

</script>

isFullLng()

La méthode isFullLng() retourne true si le rectangle défini par l’objet de type GLatLngBounds s’étend autour de la Terre entière dans le sens de la longitude.

<script type="text/javascript">

   var map = new GMap2(document.getElementById('map'), { size: new GSize(200,200)});
   /* Ici, nous déclarons l'élément html ayant pour id "map" comme conteneur de la map
   avec une taille de 200 * 200 pixel */

   var Paris = new GLatLng(48.8566667, 2.3509871);
   /* Paris est une instance de la classe GLatLng.
   Il s'agit donc d'un point représenté par ses coordonnées  */

   map.setCenter(Paris, 11);
   /* Affichage de la carte centrée sur Paris avec un zoom 11 */

   if(bounds.isFullLng()){
      ...
   }

</script>

isEmpty()

La méthode isEmpty() retourne true si le rectangle défini par l’objet de type GLatLngBounds est vide.

<script type="text/javascript">

   var map = new GMap2(document.getElementById('map'), { size: new GSize(200,200)});
   /* Ici, nous déclarons l'élément html ayant pour id "map" comme conteneur de la map
   avec une taille de 200 * 200 pixel */

   var Paris = new GLatLng(48.8566667, 2.3509871);
   /* Paris est une instance de la classe GLatLng.
   Il s'agit donc d'un point représenté par ses coordonnées  */

   map.setCenter(Paris, 11);
   /* Affichage de la carte centrée sur Paris avec un zoom 11 */

   if(bounds.isEmpty()){
      ...
   }

</script>

getCenter()

La méthode getCenter() retourne un objet de type GLatLng représentant le centre de la région déclarée par l’objet de type GLatLngBounds.

Cf la méthode extend pour visualiser un exemple de son utilisation.

Un objet de type GLatLng représente un point géographique par sa latitude et sa longitude.

NB: bien qu’habituellement la longitude soit représentée par une coordonnée en x et la longitude en y, Google a choisi de suivre la terminologie cartographique qui veut que la latitude s’écrive en premier et la longitude en second, comme le montre le constructeur GlatLng.
En outre, vous ne pouvez pas modifier les coordonnées d’un objet GLatLng. Si vous souhaitez modifier un point, il est nécessaire d’en créer un nouveau.

Le constructeur GLatLng

Signature de la classe GLatLng : GLatLng(lat,lng,[unbounded]).

Créé un nouvel objet GLatLng. Si unbounded vaut true, la latitude et la longitude passées en paramètre seront utilisées. Sinon, la latitude sera comprise entre -90 degrés et +90 degrés et la longitude entre -180 et +180 degrés.

<script type="text/javascript">

   var map = new GMap2(document.getElementById('map'), { size: new GSize(200,200)});
   /* Ici, nous déclarons l'élément html ayant pour id "map" comme conteneur de la map
   avec une taille de 200 * 200 pixel */

   var Paris = new GLatLng(48.8566667, 2.3509871);
   /* Paris est une instance de la classe GLatLng.
   Il s'agit donc d'un point représenté par ses coordonnées  */

   map.setCenter(Paris, 13);
   /* Affichage de la carte centrée sur Paris avec un zoom 13 */

</script>

lat()

La méthode lat() retourne la latitude d’un point en degrés.

<script type="text/javascript">

   var map = new GMap2(document.getElementById('map'), { size: new GSize(200,200)});
   /* Ici, nous déclarons l'élément html ayant pour id "map" comme conteneur de la map
   avec une taille de 200 * 200 pixel */

   var Paris = new GLatLng(48.8566667, 2.3509871);
   /* Paris est une instance de la classe GLatLng.
   Il s'agit donc d'un point représenté par ses coordonnées  */

   map.setCenter(Paris, 13);
   /* Affichage de la carte centrée sur Paris avec un zoom 13 */

   GLog.write(Paris.lat());
   /* Affiche  48.8566667 */

</script>

lng()

La méthode lng() retourne la longitude d’un point en degrés.

<script type="text/javascript">

   var map = new GMap2(document.getElementById('map'), { size: new GSize(200,200)});
   /* Ici, nous déclarons l'élément html ayant pour id "map" comme conteneur de la map
   avec une taille de 200 * 200 pixel */

   var Paris = new GLatLng(48.8566667, 2.3509871);
   /* Paris est une instance de la classe GLatLng.
   Il s'agit donc d'un point représenté par ses coordonnées  */

   map.setCenter(Paris, 13);
   /* Affichage de la carte centrée sur Paris avec un zoom 13 */

   GLog.write(Paris.lng());
   /* Affiche  2.3509871 */

</script>

latRadians()

La méthode latRadians() retourne la latitude d’un point en radians comprise entre -PI/2 et +PI/2.

<script type="text/javascript">

   var map = new GMap2(document.getElementById('map'), { size: new GSize(200,200)});
   /* Ici, nous déclarons l'élément html ayant pour id "map" comme conteneur de la map
   avec une taille de 200 * 200 pixel */

   var Paris = new GLatLng(48.8566667, 2.3509871);
   /* Paris est une instance de la classe GLatLng.
   Il s'agit donc d'un point représenté par ses coordonnées  */

   map.setCenter(Paris, 11);
   /* Affichage de la carte centrée sur Paris avec un zoom 11 */

   GLog.write(Paris.latRadians());
   /* Affiche  0.8527096954644726 */

</script>

lngRadians()

La méthode lngRadians() retourne la longitude d’un point en radians comprise entre -PI et +PI.

<script type="text/javascript">

   var map = new GMap2(document.getElementById('map'), { size: new GSize(200,200)});
   /* Ici, nous déclarons l'élément html ayant pour id "map" comme conteneur de la map
   avec une taille de 200 * 200 pixel */

   var Paris = new GLatLng(48.8566667, 2.3509871);
   /* Paris est une instance de la classe GLatLng.
   Il s'agit donc d'un point représenté par ses coordonnées  */

   map.setCenter(Paris, 11);
   /* Affichage de la carte centrée sur Paris avec un zoom 11 */

   GLog.write(Paris.lngRadians());
   /* Affiche  0.04103246556691319 */

</script>

equals(other)

La métode equals compare deux objet de type GLatLng et retourne true si les propriétés de ces 2 objets ont exactement les mêmes valeurs (à un certain arrondi près).

<script type="text/javascript">

   var map = new GMap2(document.getElementById('map'), {mapTypes: [G_PHYSICAL_MAP]});
   /* Ici, nous déclarons l'élément html ayant pour id "map" comme conteneur de la map
   avec une vue de type "terrain" par défaut */

   var Paris = new GLatLng(48.8566667, 2.3509871);
   var Versailles = new GLatLng(48.80233, 2.1298227);
   /* Instanciation de 2 objets GLatLng */

   if(Paris.equals(Versailles))
	GLog.write('Les propriétés de ces 2 objets ont les mêmes valeurs');

</script>

distanceFrom()

Jusqu’à la version 2.89 de l’Api Google Map, la signature de la méthode distanceFrom était : distanceFrom(Other: GLatLng).
Depuis la version 2.89, sa signature est : distanceFrom(other:GLatLng, radius?:Number) .

La métode distanceFrom() retourne la distance (à vol d’oiseau) en mètres entre 2 points donnés. Par défaut, cette distance est calculée par rapport au rayon (à l’Équateur) de la Terre, soit 6378137 mètres.

La Terre étant considérée comme une sphère, la distance peut différer de 0,3%, en particulier pour les extrêmes polaires.

Il est cependant possible de renseigner un argument optionnel (radius) correspondant à un rayon différent de celui par défaut.

<script type="text/javascript">

   var map = new GMap2(document.getElementById('map'), {mapTypes: [G_PHYSICAL_MAP]});
   /* Ici, nous déclarons l'élément html ayant pour id "map" comme conteneur de la map
   avec une vue de type "terrain" par défaut */

   var Paris = new GLatLng(48.8566667, 2.3509871);
   var Versailles = new GLatLng(48.80233, 2.1298227);
   /* Instanciation de 2 objets GLatLng */

   GLog.write('Distance Paris > Versailles : '+Paris.distanceFrom(Versailles)+' mètres');
   /* Affiche :  Distance Paris > Versailles : 17299.26593292102 mètres */

</script>

toUrlValue()

Jusqu’à la version 2.78 de l’Api Google Map, la signature de la méthode toUrlValue était : toUrlValue().
Depuis la version 2.78, sa signature est : toUrlValue(precision?:Number) .

La métode toUrlValue() retourne une chaîne de caractères contenant la latitude et la longitude du point séparées par une virgule. Cette chaîne de caractères peut directement être utilisée dans une URL pour afficher ce point via un navigateur.

Par défaut, la précision est de 6 chiffres après la virgule.
Cette précision (disponible depuis la version 2.78) peut être modifiée afin de réduire le temps de chargement du serveur pour l’affichage du point.

<script type="text/javascript">

   var map = new GMap2(document.getElementById('map'), {mapTypes: [G_PHYSICAL_MAP]});
   /* Ici, nous déclarons l'élément html ayant pour id "map" comme conteneur de la map
   avec une vue de type "terrain" par défaut */

   var Paris = new GLatLng(48.8566667, 2.3509871);
   /* Instanciation d'un objet GLatLng */

   GLog.write(Paris.toUrlValue());
   /* Affiche :  48.856667,2.350987 */

   En récupérant ce résultat, l'url suivante affichera directement
   le point sur la Google Map :
   http://maps.google.fr/maps?hl=fr&tab=wl&q=48.856667,2.350987

</script>

fromUrlValue()

Cette méthode est disponible depuis la version 2.78. Sa signature est : GLatLng.fromUrlValue(latlng:String) .

La métode fromUrlValue() convertit la chaîne de caractères (latitude/longitude) passée en paramètre en un objet de type GLatLng. Le format de ce paramètre est: latitude,longitude.
Cette retourne un objet de type GLatLng avec une précision de 6 chiffres après la virgule.

Par défaut, la précision est de 6 chiffres après la virgule.
Cette précision (disponible depuis la version 2.78) peut être modifiée afin de réduire le temps de chargement du serveur pour l’affichage du point.

<script type="text/javascript">

   var map = new GMap2(document.getElementById('map'), {mapTypes: [G_PHYSICAL_MAP]});
   /* Ici, nous déclarons l'élément html ayant pour id "map" comme conteneur de la map
   avec une vue de type "terrain" par défaut */

   var coordonneesParis = '48.8566667, 2.3509871';
   /* Ici on dispose des coordonnées d'un point */

   var Paris = GLatLng.fromUrlValue(coordonneesParis);
   /* Paris sera donc un objet de type GLatLng */

</script>

Un objet de type GSize représente la taille en pixel d’un élément rectangulaire sur la carte.
Ses 2 propriétés sont la largeur (width) et la hauteur (height).

NB: bien que ces 2 propriétés soient accessibles (en lecture et écriture), Google recommande de créer un nouvel objet GSize lorsque l’on souhaite modifier la taille d’un élément plutôt que de changer directement ces valeurs.

Le constructeur GSize

Signature de la classe GSize : GSize(width,height).

<script type="text/javascript">

   var map = new GMap2(document.getElementById('map'), { size: new GSize(200,200)});
   /* Ici, nous déclarons l'élément html ayant pour id "map" comme conteneur de la map
   avec une taille de 200 * 200 pixel */

   map.addControl(new GNavLabelControl,
                  new GControlPosition(G_ANCHOR_BOTTOM_LEFT, new GSize(10,10)));
   /* Ici, la classe GSize est utilisée pour modifier l'emplacement de
   l'élément GNavLabelControl par rapport aux bords de la map */ 

</script>

propriétés GSize

Les propriétés de l’objet Gsize sont la largeur (width) et la hauteur (height). Ces deux valeurs sont exprimées en pixels.

<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 */

   var largeurMap = map.getSize().width;
   /* largeurMap contient la largeur de la carte */

</script>

méthodes GSize

La classe GSize dispose de 2 méthodes :

equals(other)

La méthode equals retourne true si les 2 objets GSize comparés ont exactement les mêmes valeurs.

<script type="text/javascript">

   var map = new GMap2(document.getElementById('map'), {mapTypes: [G_PHYSICAL_MAP]});
   /* Ici, nous déclarons l'élément html ayant pour id "map" comme conteneur de la map
   avec une vue de type "terrain" par défaut */

   map.setCenter(new GLatLng(48.8566667, 2.3509871), 13);
   /* Affichage de la carte centrée sur Paris */

   var elt_1 = new GSize(200,200);
   var elt_2 = new GSize(400,400);
   /* Instanciation de 2 objets GSize */

   if(elt_1.equals(elt_2))
	GLog.write('Les propriétés de ces 2 objets ont les mêmes valeurs');

</script>

toString()

La méthode toString retourne une chaîne de caractères contenant la largeur et la hauteur de l’élément. Ces 2 valeurs sont séparées par une virgule et entourées de parenthèses.

<script type="text/javascript">

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

   map.setCenter(new GLatLng(48.8566667, 2.3509871), 13);
   /* Affichage de la map centrée sur Paris */

   var dimMap = map.getSize().toString();
   /* dimMap contient (400,200) */

</script>

Les méthodes liées à l’état de la carte (map State) permettent de récupérer des informations liées à la vue courante de la map comme le niveau de Zoom, les coordonnées du centre de la carte ou encore sa taille.

isLoaded()

La méthode isLoaded() retourne true si la map a été initialisée avec la méthode 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 */

   map.setCenter(new GLatLng(48.8566667, 2.3509871), 13);
   /* Affichage de la carte centrée sur Paris */

   if(map.isLoaded())
     alert('La carte a bien été initialisée');

</script>

getCenter()

La méthode getCenter() retourne un objet de type GLatLng contenant notamment les coordonnées du centre la carte de la vue courante.
Il est possible de les récupérer en lui appliquant les méthodes lat() et lng().

<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.setCenter(new GLatLng(48.8566667, 2.3509871), 13);
   /* Affichage de la carte centrée sur Paris */

   var infosCenterMap = map.getCenter();

   var latitude = infosCenterMap.lat();
   var longitude = infosCenterMap.lng();
   /* Récupération des coordonnées du centre de la carte */

</script>

getBounds()

La méthode getBounds() retourne un objet de type GLatLngBounds. Cet objet contient les informations relatives aux limites de la map.
Il est ensuite possible de récupérer les coordonnées (latitude et longitude) des points inférieur gauche et supérieur droit (limites de la carte) de la vue courante de la map en appliquant les méthodes suivantes :

• getSouthWest.lat() : latitude du coin inférieur gauche
• getSouthWest.lng() : longitude du coin inférieur gauche
• getNorthEast.lat() : latitude du coin supérieur droit
• getNorthEast.lng() : longitude du coin supérieur droit

<script type="text/javascript">

   var map = new GMap2(document.getElementById('map'), {mapTypes: [G_PHYSICAL_MAP]});
   /* Ici, nous déclarons l'élément html ayant pour id "map" comme conteneur de la map
   avec une vue de type "terrain" par défaut */

   map.setCenter(new GLatLng(48.8566667, 2.3509871), 13);
   /* Affichage de la carte centrée sur Paris */

   var latitudeCoinSupDroit = map.getBounds().getNorthEast().lat();
   /* latitudeCoinSupDroit contient le latitude du coin supérieur droit.
   Ces méthodes peuvent s'avérer très utiles pour affecter à la carte
   des zoom automatiques  par exemple */

</script>

getBoundsZoomLevel(bounds)

La méthode getBoundsZoomLevel(bounds) retourne la valeur du zoom de la vue nécessaire pour que l’objet GLatLngBounds puisse s’afficher entièrement dans l’élément html contenant la carte. Le paramètre à renseigner est un objet de type GLatLngBounds.
À noter que la valeur du zoom peut varier selon le type de carte affiché.

<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.setCenter(new GLatLng(48.8566667, 2.3509871), 13);
   /* Affichage de la carte centrée sur Paris */

   var bounds =  map.getBounds();
   /* instanciation d'un objet de type GLatLngBounds */

   var zoomBound =  map.getBoundsZoomLevel(bounds);
   /* zoomBound contient la valeur du zoom de la carte affichée  */

</script>

getSize()

La méthode getSize() retourne un objet de type GSize. On peut ainsi récupérer les dimensions de la carte à l’aide des index width et height.

<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.setCenter(new GLatLng(48.8566667, 2.3509871), 13);
   /* Affichage de la carte centrée sur Paris */

   var infosSize = map.getSize();
   var widthMap = infosSize['width'];
   var heightMap = infosSize['height'];
   /* Récupération des dimensions de la map */

   Autre notation possible
   var widthMap = map.getSize().width;

</script>

getZoom()

La méthode getZoom() retourne la valeur du zoom de la vue affiché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.setCenter(new GLatLng(48.8566667, 2.3509871), 13);
   /* Affichage de la carte centrée sur Paris */

   var zoomCourant = map.getZoom();
   /* zoomCourant contient le zoom de la vue affichée */

</script>

getDragObject()

La méthode getDragObject() retourne un objet de type GDraggableObject utilisé au sein de la carte.
Cette méthode est disponible depuis la version 2.93 de l’Api Google 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.setCenter(new GLatLng(48.8566667, 2.3509871), 13);
   /* Affichage de la carte centrée sur Paris */

   var objDragg = map.getDragObject();
   /* objDragg contient l'ensemble des propriétés de l'objet
   de type GDraggableObject de la carte */

   Comme tout objet, il est possible d'en lister son contenu à l'aide de la boucle
   for(i in Object) et de la méthode GLog.write(i + ' : ' + Object[i])

</script>

Les méthodes liées aux types de carte (map Types) permettent de lire, de modifer et d’ajouter des types de carte à votre google Map.

getMapTypes()

La méthode getMapTypes() retourne un tableau de type GMapType comprenant l’ensemble des propriétés des objets GMapType enregistrés dans la carte.

<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 */

   var infosTypeMap = map.getMapTypes();
   /* le tableau infosTypeMap ainsi retourné contient l'ensemble des propriétés
   des objets GMapType de la carte */

   Il est ensuite possible de lire le contenu de ce tableau à l'aide de
   la boucle for ( i in Object ) et de la méthode GLog.write.
</script>

getCurrentMapType()

La méthode getCurrentMapType() retourne un tableau de type GMapType comprenant l’ensemble des propriétés des objets GMapType pour le type de carte en cours uniquement.

<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 */

   var infosTypeMap = map.getCurrentMapType();
   /* le tableau infosTypeMap ainsi retourné contient l'ensemble des propriétés
   des objets GMapType de la carte en cours d'affichage */

   Comme précédemment, il est possible de lire le contenu de ce tableau à l'aide
   de la boucle for ( i in Object ) et de la méthode GLog.write.
</script>

setMapType(type)

La méthode setMapType(type) permet de modifier le type de carte à afficher. Le type de carte doit avoir été déclaré au préalable dans les types de cartes disponibles à l’aide de la méthode addMapType().

<script type="text/javascript">

   var map = new GMap2(document.getElementById('map'), {mapTypes: [G_PHYSICAL_MAP]});
   /* Ici, nous déclarons l'élément html ayant pour id "map" comme conteneur de la map
   avec une vue de type "terrain" par défaut */

   map.setMapType(G_HYBRID_MAP);
   /* Nous forçons finalement l'affichage avec la vue de type Hybride */

</script>

addMapType(type)

La méthode addMapType(type) ajoute un nouvel objet GMapType personnalisé à la carte. Il doit donc au préalable avoir été déclaré / créé.
Voir les types de carte disponibles 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.addMapType(MON_TYPE_CARTE_PERSONNALISÉ);
   /* Ajout d'un type de carte personnalisé  */

</script>

removeMapType(type)

La méthode removeMapType(type) retire (rend indisponible) de la carte l’objet GMapType passé en paramètre.

<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.removeMapType(MON_TYPE_CARTE_PERSONNALISÉ);
   /* Retire le type de carte personnalisé des types disponibles */

</script>

La méthode GLog.write permet de tracer les événements sur votre application Google Map, notamment en phase de développement.

Plutôt que d’utiliser le classique alert() pour débugger vos scripts, la méthode GLog.write ouvre une fenêtre contextuelle sur votre page qui affiche une liste de messages qui peut s’avérer utile pour le débuggage de votre application.

Par exemple, si par curiosité vous souhaitez savoir quelles méthodes et quelles propriétés Javascript un objet de la map dispose, tel que l’objet GMap2, vous pouvez ajouter les lignes suivantes à votre code:

<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.setCenter(new GLatLng(48.8566667, 2.3509871), 13);
   /* Affichage de la carte centrée sur Paris */

   for(i in map)
     GLog.write(i);
</script>

L’interface GControl peut être implémentée dans le but de fournir des menus personnalisés sur vos cartes. Les contrôleurs seront ajoutés en utilisant les méthodes de GMap2.addControl().

constructeur GControl

La signature du constructeur GControl est la suivante : GControl([printable],[selectable]).

Ce constructeur créé l’instance d’une nouvelle classe de type contrôle. Si le booléen printable vaut true, les panneaux de contrôle seront visibles sur la version imprimée de la map.

Le booléen selectable indique si les textes présents dans les contrôleurs peuvent être sélectionnés ou pas.

méthodes GControl

printable()

Le type de donnée renvoyé par l’appel à la méthode printable() est un booléen. Si la méthode retourne true, les éléments de contrôles seront visibles sur la version imprimée de la map. Le cas échéant, la méthode retourne false.

selectable()

L’appel à la méthode selectable() retourne true si les contrôleurs contiennent du texte sélectionnable. Sinon retourne false.

initialize(map)

La méthode initialize() sera appelée par la carte de sorte que le contrôleur puissent s’initialiser. Cette méthode utilise la méthode GMap2.getContainer() afin de récupérer l’élément du DOM contenant la carte. La méthode retourne cet élément.

getDefaultPosition()

L’appel à la méthode getDefaultPosition() retourne la position ou apparaissent les panneaux de contrôle par défaut. Cette position peut être modifiée en renseignant le second argument (optionnel) de la méthode GMap2.addControl().

Classe GControl

Voici une liste des implémentations possibles de l’interface Gcontrol.

GSmallMapControl()

Le constructeur GSmallMapControl() ajoute un bouton multidirectionnel sur la carte (permettant de naviguer dans les 4 directions) ainsi que 2 boutons zoom positif et zoom négatif.

exemple d’utilisation

<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.setCenter(new GLatLng(48.8566667, 2.3509871), 13);
   /* Affichage de la carte centrée sur Paris */

   map.addControl(new GSmallMapControl());
   // On ajoute les contrôleurs: navigation multidirectionnelle, zoom + et zoom - 

</script>

GLargeMapControl()

Le constructeur GLargeMapControl() créé les mêmes boutons de contrôle que le constructeur GSmallMapControl en y ajoutant une barre de zoom progressif.

GSmallZoomControl()

Le constructeur GSmallZoomControl() ajoute 2 boutons : zoom positif et zoom négatif.

GLargeMapControl3D()

Le constructeur GLargeMapControl3D() ajoute la dernière version des boutons de contrôle de la Google Map : le bouton multidrectionnel, zoom positif et lezoom négatif ainsi qu’une barre de zoom progressif.
Si l’espace disponible sur la carte ne permet pas d’afficher cette barre, seuls les deux boutons zoom + et zoom - appraîtront.

GSmallZoomControl3D()

Le constructeur GSmallZoomControl3D() ajoute 2 boutons (de la dernière version) sur la carte : zoom positif et zoom négatif.

GScaleControl()

Le constructeur GScaleControl() ajoute une échelle sur la carte qui varie en fonction du zoom utilisé.

GMapTypeControl()

Le constructeur GMapTypeControl() créé un type de contrôleur standard sur la map sous forme de boutons permettant de choisir et de basculer sur les différents types de vue dipsonibles.

GMenuMapTypeControl()

Le constructeur GMenuMapTypeControl() créé un type de contrôleur standard sur la map sous forme de menu déroulant permettant de choisir et de basculer sur les différents types de vue dipsonibles.

GHierarchicalMapTypeControl()

Le constructeur GHierarchicalMapTypeControl() créé un type de contrôleur standard sur la map sous forme de boutons avec des menus déroulant contenant des cases à cocher et permettant de choisir et de basculer sur les différents types de vue dipsonibles.

GOverviewMapControl()

Le constructeur GOverviewMapControl() créé une carte miniature dans le coin en bas à droite de la map. Il est possible de naviguer sur cette miniature en la draggant (glisser /déposer). Contrairement à d’autres contrôleurs on ne peut pas modifier l’emplacement de cette miniature.

GNavLabelControl()

Le constructeur GNavLabelControl() ajoute un fil d’Ariane sur la map. Cette méthode est disponible depuis la version 2.141 de l’Api Google Map.
Pour pouvoir l’utiliser, vous devez donc modifier votre appel au fichier javascript Google en remplaçant la version 2 par le terme 2.x.

Ce fil d’Ariane permet alors de naviguer directement de vue en vue. Par exemple, pour la ville de Paris, on peut directement afficher la vue du département (Paris) ou la région (Ile de France), ou encore le pays(France).

<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.setCenter(new GLatLng(48.8566667, 2.3509871), 13);
   /* Affichage de la carte centrée sur Paris */

   map.addControl(new GNavLabelControl());
   // On ajoute le fil d'Ariane sur la carte 

   map.addControl(new GNavLabelControl,
                  new GControlPosition(G_ANCHOR_BOTTOM_LEFT, new GSize(10,10)));
   // Ici, on modifie la position du fil d'ariane en renseignant les marges
   // par rapport aux bords de la map

</script>

classe GControlPosition()

La classe GControlPosition() permet de définir l’emplacement des différents outils de contrôle sur la map. Pour l’utiliser, il est nécessaire de renseigner une des constantes GControlAnchor ainsi que les valeurs des marges latérales (par rapport aux bords de la carte).

Sa signature est la suivante : GControlPosition(anchor, offset).

anchor est une constante GControlAnchor parmi celles disponibles.
offset est objet de type GSize qui attend en paramètres les valeurs de décalage par rapport aux bords de 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.setCenter(new GLatLng(48.8566667, 2.3509871), 13);
   /* Affichage de la carte centrée sur Paris */

   map.addControl(new GNavLabelControl,
                  new GControlPosition(G_ANCHOR_BOTTOM_LEFT, new GSize(10,10)));
   // Ici, on affiche un fil d'ariane puis on modifie sa position.
   // Pour cela, nous utilisons GControlPosition que nous initialisons dans le
   // coin  bas / gauche de la carte à l'aide de la constante G_ANCHOR_BOTTOM_LEFT.
   // Pour appliquer les marges, l'origine à prendre en compte est le coin bas / gauche.
   // Le décalage s'effectuera donc par rapport aux bords gauche et bas de la carte.

</script>

Les constantes GControlAnchor

Les constantes GControlAnchor permettent de redéfinir l’emplacement par défaut des différents outils de contrôle sur la map.

Les différentes valeurs disponibles sont:

• G_ANCHOR_TOP_RIGHT : le coin supérieur droit de la map
• G_ANCHOR_TOP_LEFT : le coin supérieur gauche de la map
• G_ANCHOR_BOTTOM_RIGHT : le coin inférieur droit de la map
• G_ANCHOR_BOTTOM_LEFT : le coin inférieur gauche de la map

La méthode addControl permet de gérer les objets GControl qui seront affichés sur la carte.

addControl(control,[position])

Cette méthode ajoute les éléments de l’objet GControl que l’on souhaite. Le paramètre optionnel [position] est une instance de la classe GControlPosition. Il détermine l’endroit où afficher les panneaux de contrôle.
Si ce paramètre n’est pas renseigné, la position des contrôleurs sera déterminée par la méthode GControl.getDefaultPosition().

Il n’est possible d’ajouter qu’une instance de chaque contrôleur par appel à la méthode addControl. Si l’on souhaite afficher plusieurs types de contrôleurs, on devra à chaque fois appeler cette méthode.

<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.setCenter(new GLatLng(48.8566667, 2.3509871), 13);
   /* Affichage de la carte centrée sur Paris */

   map.addControl(new GLargeMapControl3D());
   // On ajoute le contrôleur "zoom grand format" sur la carte 

   map.addControl( new GMenuMapTypeControl());
   // On ajoute un menu déroulant pour permettre à l'utilisateur
   // de choisir le type de vue

   map.addControl( new GMenuMapTypeControl(),
                    new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(10,10)));
   // On ajoute le menu déroulant des différents types de vue possible en bas,
   // à droite de la carte.
   // On le décale de 10px des bords de la carte avec l'option new GSize

</script>

removeControl(control)

La méthode removeControl permet d’enlever les contrôleurs suite à une action de l’utilisateur par exemple.

Dans le script ci-dessous, nous allons déclarer un contrôleur à afficher sur la carte puis le faire disparaître lorsque l’utilisateur effectue un dragNdrop (glisser / déposer) de la carte.

<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.setCenter(new GLatLng(48.8566667, 2.3509871), 13);
   /* Affichage de la carte centrée sur Paris */

   var mapTypeControl = new GMapTypeControl();
   // Déclaration du contrôleur à afficher

   map.addControl(mapTypeControl);
   // Affichage du contrôleur sur la carte

   GEvent.addListener(map, "dragend", function() {
    map.removeControl(mapTypeControl);
   });
   // Fonction qui fait disparaître le choix du type de vue de la carte
   // lorsque l'utilisateur effectue un glisser / déposer

</script>

Voici les 2 propriétés de la classe GMapOptions qui peuvent être renseignées (de manière optionnelle) lors de l’instanciation de l’objet GMap2.

Pour rappel, l’écriture de l’instanciation de l’objet GMap2 est la suivante:

GMap2(idEltHtml, [options]);
Ces 2 arguments sont représentés par le paramètre [options].

GSize(width,height)

L’objet GSize définit la taille de l’élément html qui contiendra la Google Map.
Si cet élément a une taille différente, celui-ci sera redimensionné avec les dimensions déclarées dans GSize.

Width et height attendent des entiers qui représenteront les dimensions en pixels.

Si l’argument GSize n’est pas renseignée, la map aura la taille de l’élément html.

<script type="text/javascript">

   var map = new GMap2(document.getElementById('map'), {size: new GSize(100,100)});
   /* Ici, nous déclarons l'élément html ayant pour id "map" comme conteneur de la map
      avec pour dimensions 100 pixels sur 100 pixels */

</script>

mapTypes[type_vue]

Le propriété optionnelle mapTypes définit le type de carte à afficher sur la Google Map. Il est possible d’utiliser un ou plusieurs types prédéfinis par Google mais également ses propres types de carte personnalisés.
Les différents types (prédéfinis) disponibles sont:

• G_NORMAL_MAP : affiche la carte classique en 2D de la Google Map
• G_SATELLITE_MAP : affiche la vue satellite
• G_AERIAL_MAP : affiche des images aériennes (depuis la version 2.193)
• G_HYBRID_MAP : affiche un mix des vues plan et satellite. La carte est affichée selon le mode satellite mais le nom des villes et des rues apparaissent également.
• G_AERIAL_HYBRID_MAP : affiche une couche transparente des rues principales au-dessus de l’imagerie aérienne (depuis la version 2.193)
• G_DEFAULT_MAP_TYPES : affiche la vue par défaut avec un menu déroulant proposant les autres types de vue.
• G_PHYSICAL_MAP : affiche une vue basée sur des informations relatives au terrain / plan.
• G_MAPMAKER_NORMAL_MAP : affiche une carte de rue avec des tuiles créées à l’aide de Google cartographe.
  Note: Lorsque vous utilisez un type de carte Mapmaker, les utilisateurs ne verront des cartes que dans les pays où Google Map Maker est lancé. (depuis la version 2.145)
• G_MAPMAKER_HYBRID_MAP : affiche une couche transparente des rues principales créées à l’aide de Google Mapmaker sur des images satellite.
  Note: Lorsque vous utilisez un type de carte Mapmaker, les utilisateurs ne verront des cartes que dans les pays où Google Map Maker est lancé. (depuis la version 2.145)
• G_SATELLITE_3D_MAP : ce type de carte, en rapport avec le Plug-in Google Earth, affiche une carte interactive en 3D avec des images satellites. Ce type de carte n’est pas disponible par défaut. Si l’utilisateur n’a pas le Plug-in Google Earth d’installé dans son navigateur, il sera alors invité à le faire.
  Pour ceux l’ayant déjà installé, une vue en 3D s’affichera. Il faut alors utiliser la classe GMap2.getEarthInstance() et manipuler l’Api Google Earth.
  Les markers ainsi que les infowindows et les polylines sont disponibles avec cette api mais les autres éléments ne le sont pas encore. Google y travaille cependant. (depuis la version 2.113)
• G_MAPMAKER_MAP_TYPES : contient un tableau regroupant les différents types disponibles pour G_MAPMAKER (G_MAPMAKER_NORMAL_MAP, G_SATELLITE_MAP, et G_MAPMAKER_HYBRID_MAP)
• LES VUES DE LA LUNE
  • G_MOON_ELEVATION_MAP : affiche une carte de type terrain de la surface de la Lune augmenté d’un code couleur pour l’altitude. (depuis la version 2.95)
  • G_MOON_VISIBLE_MAP : affiche une vue (sous forme de photos) de la lune(depuis la version 2.95)
  • G_MOON_MAP_TYPES : contient un tableau regroupant les différents types disponibles pour la lune (G_MOON_ELEVATION_MAP et G_MOON_VISIBLE_MAP)
• LES VUES DE MARS
  • G_MARS_ELEVATION_MAP : affiche une carte de type terrain de la surface de Mars augmenté d’un code couleur pour l’altitude. (depuis la version 2.95)
  • G_MARS_VISIBLE_MAP : affiche une vue (sous forme de photos) de Mars. (depuis la version 2.95)
  • G_MARS_INFRARED_MAP : présente une carte infrarouge ombrée de la surface de Mars. Les zones où les régions sont les plus chaudes apparaissent brillantes et les plus froides apparaissent plus sombres.(depuis la version 2.95)
  • G_MARS_MAP_TYPES : contient un tableau regroupant les différents types disponibles pour Mars (G_MARS_ELEVATION_MAP, G_MARS_VISIBLE_MAP, et G_MARS_INFRARED_MAP)
• LES VUES DU CIEL
  • G_SKY_VISIBLE_MAP : montre une mosaïque du ciel, couvrant intégralement la sphère céleste.(depuis la version 2.95)
  • G_SKY_MAP_TYPES : contient un tableau regroupant les différents types disponibles pour le ciel (G_SKY_VISIBLE_MAP)

Si l’argument GMapType n’est pas renseigné, c’est la vue par défaut qui sera affichée, c’est-à-dire la vue G_DEFAULT_MAP_TYPES.

<script type="text/javascript">

   var map = new GMap2(document.getElementById('map'), {mapTypes: [G_SATELLITE_MAP]});
   /* Ici, nous déclarons l'élément html ayant pour id "map" comme conteneur de la map
      avec une vue satellite.
      Il est possible de renseigner plusieurs vues sous la forme d'un tableau:
      mapTypes: [G_SATELLITE_MAP, G_HYBRID_MAP, ...]   */

</script>

GSize + mapTypes[type_vue]

L’exemple ci-dessous montre comment déclarer une taille et un type de vue.

<script type="text/javascript">

   var map = new GMap2(document.getElementById('map'),
                    {size: new GSize(100,100)},
                    {mapTypes: [G_SATELLITE_MAP]});
   /* Ici, nous déclarons l'élément html ayant pour id "map" comme conteneur de la map
      avec une vue satellite et pour dimensions 100px * 100px   */

</script>

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.

<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>