De l'ajax dans du javascript (API Google Map)

Bonjour à tous,

Je suis nouveau sur le forum, alors désolé d'avance si la ma question semble trop simple ...

Je souhaiterai depuis un bouton présent dans une des infobulles d'une google map, charger un div (via un petit fichier php).

Ce qui fonctionne :
- la google map ;
- les infobulles avec les marquers ;

Mon code fonctionne si je n'utilise pas un bouton dans la map mais dans la partie html de la page.
C'est à dire que ma fonction ci-dessous fonctionne que si le code est dans la page html et pas dans le html de la partie javascript de la google map (infobulle) ...
Je ne sais pas si je suis assez clair ?

Etant mauvais en javascript, comment m'orienter pour modifier la fonction ci-dessous qui fonctionnerait avec le javascript de google map ?
Merci d'avance pour votre aide ...

Code:

1
2
3
4
5
6
7
8
9
10
11
 
/*-- Chargement en Ajax du circuit ou spot --*/
/* Fichier circuit.js */
 
$(document).ready(function(){
	$(".btn_circuit").click(function(){
	var url = "circuit.php?id="+$(this).attr("id");
	$("#circuit").load(url);
	alert("La valeur sélectionnée est : " + url);
	});					
});

Fichier circuit.php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
<?php
$id = $_GET["id"];
echo 'Test !!!'; 
switch($id) 
    {
        case '0': 
        echo 'Test !'; 
        break; 
    case '1': 
        echo 'Là bas'; 
        break; 
    case '2': 
        echo 'Squal Park'; 
        break; 
    case '3': 
        echo 'La roseraie'; 
        break; 
    case '4': 
        echo 'Mon Cuq'; 
        break; 
    default: 
        echo 'Le best of'; 
    }
?>

Fichier Google Map

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
 
google.maps.event.addDomListener( window, 'load', function(){
  // définition des données
  var data =[
    {
      'content' : '<div class="InfoBulle"><p>Circuit 1</p><a id="1" class="btn_circuit">Voir</a></div>',
      'lat'  : 43.60460,
      'lng'  : 1.44420
    },
    {
      'content' : '<div class="InfoBulle"><p>Circuit 2</p><a id="2" class="btn_circuit">Voir</a></div>',
      'lat'  : 44.60460,
      'lng'  : 1.54420 
    }
  ];
 
  // creation de la map
  var oMap = new google.maps.Map( document.getElementById('map_canvas'), {
    zoom : 7,
    center : new google.maps.LatLng(43.60460, 1.44420),
    mapTypeId : google.maps.MapTypeId.ROADMAP
  });
 
  // une seule infoBulle
  var infoWindow = new google.maps.InfoWindow();
  // masque infoWindow sur clic map
  google.maps.event.addListener( oMap, 'click', function(){
    infoWindow.close();
  });
 
  // option du marqueur
  var imageMarqueurCircuit = {
	url: "img/circuit2.png",
	size: new google.maps.Size(28, 20),
	anchor: new google.maps.Point(14, 20)
  }
 
  // creation des markers
  var oMarker, oAction, i, nb = data.length;
  for( i=0; i < nb; i++){
		oAction = document.getElementById( data[i].btn);
		oMarker = new google.maps.Marker({
		  'map' : oMap,
		  'position' : new google.maps.LatLng( data[i].lat, data[i].lng),
		  'icon': imageMarqueurCircuit,
		  'content' : data[i].content
		});
 
		// création d'une closure
		(function( marker){
		  // fonction sur click marker
		  google.maps.event.addListener( marker, 'click', function(){
			infoWindow.setContent( this.content);
			infoWindow.open( this.getMap(), this);
		  });
		})(oMarker);
  }
});

Pour la partie Html de la page :

Code:

1
2
 
<div id="circuit"></div>