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 ...
Fichier circuit.php
Code : Sélectionner tout - Visualiser dans une fenêtre à part
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 Google Map
Code : Sélectionner tout - Visualiser dans une fenêtre à part
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'; } ?>
Code : Sélectionner tout - Visualiser dans une fenêtre à part
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 : Sélectionner tout - Visualiser dans une fenêtre à part
1
2<div id="circuit"></div>
Partager