Récupérer les limites de la carte - getBounds

La méthode getBounds permet de récupérer les coordonnées des coins Nord-Est (supérieur droit) et Sud-Ouest (inférieur gauche) de la carte.

Cette méthode peut par exemple s’avérer très utile pour recharger le contenu de la map suite à un glisser / déposer. En récupérant ces coordonnées, il suffit alors de déclencher un appel ajax au moment de l’événement dragend puis de récupérer les coordonnées des coins de la map.
En passant en paramètres ces valeurs à votre appel ajax, vous pourrez alors n’appeler que les points inclus dans ces limites en vue de les afficher sur la map.

Ce processus est abordé dans cet exemple.

<script type="text/javascript">

  /* Déclaration du centre de la map */ 
  var paris = new google.maps.LatLng(48.8566667, 2.3509871); // Paris

  /* Déclaration des options de la map */ 
  var options = {
   zoom : 7,
   center: paris,
   mapTypeId: google.maps.MapTypeId.HYBRID
  }

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

  /* Chargement de la carte avec ses options */
  var map = new google.maps.Map(myDiv,options);

  /* Fonction qui affiche un marker sur la carte */ 
  function addThisMarker(point){
   var marker = new google.maps.Marker({position: point});
   return marker;
  }

  /* Ajout du marker sur la carte */
  var thisMarker = addThisMarker(paris);
  thisMarker.setMap(map);

  /* Ici, on ajoute l'écouteur d'événement suite à un glisser / déposer  */ 
  google.maps.event.addListener(map, 'dragend', function() {
   /* On récupère les coordonnées des coins de la map */ 
   var bds = map.getBounds();
   var South_Lat = bds.getSouthWest().lat();
   var South_Lng = bds.getSouthWest().lng();
   var North_Lat = bds.getNorthEast().lat();
   var North_Lng = bds.getNorthEast().lng();
   callAjax(South_Lat,South_Lng,North_Lat,North_Lng);
  });

  /* Partons du principe que nous utilisons la librairie javascript JQuery */
  function callAjax(slt,slg,nlt,nlg){
   var sendAjax = $.ajax({
    type: "POST",
    url: 'retrievePoints.php',
    data: 'SO_Lt='+slt+'&SO_lg='+slg+'&NE_lt='+nlt+'&NE_lg='+nlg,
    success: handleResponse
   });

   Le fichier appelé, ici "retrievePoints.php", se chargera
   d'effectuer une requête SQL en filtrant les résultats en fonctions
   des coordonnées des coins de la map passées ici en POST.

   /*  Cette fonction est sensée retourner un ensemble de points à afficher sur la carte */
   function handleResponse(){
    TRAITEMENT DE LA REPONSE AJAX:
    "sendAjax.responseText" OU "sendAjax.responseXML";
   }
  }

</script>