Récupérer les informations liées à la map Google

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>

3 Réponses à “Récupérer les informations liées à la map Google”

  1. Portekoi :

    Clair, simple et précis. Super article :)

  2. Apprenti :

    Bonjour,

    Avec la méthode GetBounds peut-on conditionner l’apparition des marqueurs? Le but est de ne faire apparaitre que ceux qui sont visibles à l’écran. C’est pas la clusterisation mais si ca marche c’est toujours ça en plus.

    Cordialement,
    Apprenti.

  3. webmaster :

    Re Bonjour Apprenti,

    Oui, comme expliqué dans le tutoriel, la méthode getBounds permet de récupérer les coordonnées des 4 coins de la map.
    Ensuite, il suffit de les utiliser dans une requête SQL pour filtrer tes résultats, le but étant de ne récupérer que les points inclus dans le rectangle représenté par ses extrémités.

    Cdlt,

Laisser une réponse

Security Code: