HTML

CSS

$(document).ready(function(){

   var map = new GMap2(document.getElementById('map'));

// Centrer la carte sur la Latitude et Longitude (X,Y)

var MapCenter = new GLatLng(44.797916,-93.278046);

// Positionnement de la carte et niveau du Zoom

map.setCenter(MapCenter, 8);

});

// Insertion de 10 points aléatoire

var bounds = map.getBounds();

var southWest = bounds.getSouthWest();

var northEast = bounds.getNorthEast();

var lngSpan = northEast.lng() - southWest.lng();

var latSpan = northEast.lat() - southWest.lat();

var markers = [];

for (var i = 0; i < point =" new" marker =" new"> 
Nous allons maintenant pouvoir  utiliser jQuery et Google Maps.

Utilisons maintenant le tableau des  marqueurs afin d'ajouter de l'interaction

avec jQuery. 
 
$(markers).each(function(i,marker){

GEvent.addListener(marker, "click", function(){

    map.panTo(marker.getLatLng());

});

});
  
Dans la boucle, nous allons utiliser  l'espace de nom GEvent afin d'attacher

un événement sur le clique de  chaque marqueur. La fonction panTo() permet de

centrer la carte sur le  marqueur cliqué.

Insérons maintenant une liste des marqueurs cliquables à droite de notre  carte

à l'aide d'une liste<> 
.

HTML
      < id="list">
  
CSS
 
 


Revenons à notre boucle, et ajoutons une étape à notre fonction afin

que  cette dernière ajoute un lien cliquable dans notre liste 
.

$("").html("Point "+i).click(function(){ map.panTo(marker.getLatLng()); })

.appendTo("#list");

 
Ajoutons des boites de message personalisé à notre carte.

HTML
 


Test text.

 
CSS
 
 
#message { position:absolute; padding:10px; background:#555; color:#fff;

width:75px; }

 
 
 
Nous devons maintenant placer le bloc  
 à l'intérieur de la carte. Pour ce faire, nous allons  utiliser jQuery afin

d'ajouter le tout à un objet. La visualisation de  la carte est séparée en panneau.

Chaque panneau est un bloc 
  une par-dessus l'autre. Il suffit de récupérer le panneau où l'on désire  ajouter

notre bloc 
 à l'aide de la méthode  map.getPane(PANE). Dans le cas actuel,

G_MAP_FLOAT_SHADOW_PANE est le  panneau que nous allons utiliser pour attacher

les messages  personnalisés.
 
$("#message").appendTo(map.getPane(G_MAP_FLOAT_SHADOW_PANE));
 
Afin d'afficher le message à l'endroit  désiré, nous devons séparer l'action du

clic en une fonction séparée.  Pour ce faire,

remplacer map.panTo(marker.getLatLng()); avec  displayPoint(marker,i);

qui appellera la fonction ci-dessous;
 
function displayPoint(marker, i){

map.panTo(marker.getPoint());



var markerOffset = map.fromLatLngToDivPixel(marker.getPoint());

 $("#message").show().css({ top:markerOffset.y, left:markerOffset.x });

}
 
C'est ici que la magie s'installe!  map.fromLatLngToDivPixel(GLatLng);

permets de convertir une latitude et  une longitude d'un marqueur en pixel.

Cette dernière retourne donc une  position en pixel (x,y) en fonction de la

gauche et du haut de la carte.  Afin de terminer en beauté, ajoutons donc un

peu de visuels à tout  ceci. Nous allons donc ajouter un événement suite au

défilement de la  carte. Lorsque cette dernière arrête de défiler, nous allons

ajouter un  peu de "fadeIn".
 
function displayPoint(marker, index){

 $("#message").hide();



 var moveEnd = GEvent.addListener(map, "moveend", function(){

     var markerOffset = map.fromLatLngToDivPixel(marker.getLatLng());

     $("#message")

         .fadeIn()

         .css({ top:markerOffset.y, left:markerOffset.x });



     GEvent.removeListener(moveEnd);

 });

 map.panTo(marker.getLatLng());

}







source : pckult