Afficher plusieurs cartes google maps sur une page ?

**chuckichucki** · 20/04/2011, 11h07

Bonjour,

Sur mon site, je voudrais créer une page avec une liste de lieux issus de ma base de données.

Je voudrais afficher, au survol de la souris sur un élément (a priori un texte du type "Voir la carte"), afficher la carte google maps associée, ce qui permettrait à l'utilisateur de visualiser l'emplacement de ce lieu.

J'arrive à afficher 2 cartes, mais je dois dupliquer tout le code 2 fois, ce qui est évidemment n'est pas optimal. D'autant plus que je voudrais afficher une vingtaine de cartes et non pas 2.

Est-ce quelqu'un aurait la solution pour alléger ce code et me permettre d'afficher 20 cartes sans pour autant créer une usine à gaz ?

Voici ci-dessous le code que j'ai pour le moment.

Par avance merci de votre aide

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
59
60
61
62
63
64
65
66
67
 
<!DOCTYPE html>
<html>
<head>
 
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0px; padding: 0px }
 
 #maps_container1 { margin-left:35px;width:500px; height:500px;}
 
 #map_canvas1 { height: 500px; width:500px; }
 #maps_container1 #map_canvas1 { display:none;width:500px; height:500px;}
 #maps_container1:hover #map_canvas1{ position:absolute;display:block; width:500px; height:500px; }
 
 #maps_container2 { margin-left:35px;width:500px; height:500px;}
 #map_canvas2 { height: 500px; width:500px; }
 #maps_container2 #map_canvas2 { display:none;width:500px; height:500px;}
 #maps_container2:hover #map_canvas2{ position:absolute;display:block; width:500px; height:500px; }
 
</style>
<script type="text/javascript"
    src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var map1,map2;
 
 function initialize() {
  var myLatlng = new google.maps.LatLng(-34.397, 150.644);
  var myOptions = {
    zoom: 8,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map1 = new google.maps.Map(document.getElementById("map_canvas1"), myOptions);
  map2 = new google.maps.Map(document.getElementById("map_canvas2"), myOptions);
}
 
function loadScript() {
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize";
  document.body.appendChild(script);
}
 
window.onload = loadScript;
</script>
</head>
<body onload="initialize()">
 
<div id="maps_container1">Lieu 1 : Voir la carte
 
  <div id="map_canvas1" style="width:500px; height:500px;"></div>
 
</div>
 
 
<div id="maps_container2">Lieu 2 : Voir la carte
 
  <div id="map_canvas2" style="width:500px; height:500px;"></div>
 
</div>			
 
 
 
</body>
</html>

**NoSmoking** · 20/04/2011, 18h56

Bonjour,

J'arrive à afficher 2 cartes, mais je dois dupliquer tout le code 2 fois, ce qui est évidemment n'est pas optimal. D'autant plus que je voudrais afficher une vingtaine de cartes et non pas 2

c'est typiquement le job des fonctions.

Une petite fonction creatMap() et le tour est joué pour peu que tu ais crée un tableau de description

Remarques sur ton code :
il existe

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

google.maps.event.addDomListener(window, 'load', initialize);

qui t'évites de mettre

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
function loadScript() {
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize";
  document.body.appendChild(script);
}
window.onload = loadScript;

et

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<body onload="initialize()">

**chuckichucki** · 27/04/2011, 19h25

Bonjour NoSmoking

Et merci pour ton aide.

J'avoue, je suis assez nul en javascript. Peux-tu me mettre sur la piste pour cette fameuse fonction CreateMap ? Je ne vois pas trop comment la créer.

Concernant le code, je suis sûr que le tien est meilleur, mais celui que j'ai mis m'a été donné par la documentation de l'API Google Maps elle-même et permet de faire des appels asynchrones, ce qui m'intéresse beaucoup car je dois afficher beaucoup de cartes (une vingtaine) sur une seule et même page. Est-ce que le code que tu m'as donné permet aussi de faire de l'asynchrone ?

Merci et bonne soirée

**NoSmoking** · 29/04/2011, 13h03

Concernant le code, je suis sûr que le tien est meilleur, mais celui que j'ai mis m'a été donné par la documentation de l'API Google Maps elle-même et permet de faire des appels asynchrones, ce qui m'intéresse beaucoup car je dois afficher beaucoup de cartes (une vingtaine) sur une seule et même page. Est-ce que le code que tu m'as donné permet aussi de faire de l'asynchrone ?

la seule différence et que dans ton cas le javascript est chargé une fois la page chargée avec toutefois l'inconvénient de scratcher les éventuelles autres actions misent sur le onload.

Concernant la création des maps tout va dépendre de la façon dont tu va les utiliser.
- Création même si pas d'utilisation
- Création uniquement si besoin

Dans le premier cas sur la fonction initialize tu crées toutes tes cartes, via une boucle
Dans le deuxième cas tu passes à la fonction les infos de la carte à créer et tu la crées

Je voudrais afficher, au survol de la souris...

sur ce coup vu le nombre important de cartes dont tu parles seul des essais pourraient dire le moins pénalisant à l'affichage.

**chuckichucki** · 30/04/2011, 20h02

Merci NoSmoking pour ton aide.

J'ai tenté le code suivant, mais j'obtiens des erreurs et je ne vois pas comment corriger .... Si tu as une idée je suis preneur. Merci

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
<style type="text/css">
...
</style>
 
<script type="text/javascript"
    src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var map=new Array(); 
 
 
 function initialize(latitude,longitude, map_id) {
  var myLatlng = new google.maps.LatLng(latitude, longitude);
  var myOptions = {
    zoom: 8,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map[map_id] = new google.maps.Map(document.getElementById('map_canvas'+map_id), myOptions);
 }
 
google.maps.event.addDomListener(window, 'load', initialize);
 
</script>
</head>
<body>
 
<div id="maps_container1" onmouseover="initialize(48.8779195,2.2918112,1)">Lieu 1 : Voir la carte
 
  <div id="map_canvas1" style="width:500px; height:500px;" ></div>
 
</div>
 
<div id="maps_container2" onmouseover="initialize(43.2098291,6.6479883,2)">Lieu 2 : Voir la carte
 
  <div id="map_canvas2" style="width:500px; height:500px;" ></div>
 
</div>
 
<div id="maps_container3" onmouseover="initialize(45.545454,3.54565,3)">Lieu 3 : Voir la carte
 
  <div id="map_canvas3" style="width:500px; height:500px;" ></div>
 
</div>

**NoSmoking** · 30/04/2011, 23h32

le soucis est que tu recrées à chaque mouseover une carte que tu as crée au premier survol, tu mets en tableau mais tu ne l'utilises pas...

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
var map = new Array();
function initialize(latitude,longitude, map_id) {
  // creation si non existant uniquement
  if( !map[map_id]){
    var myLatlng = new google.maps.LatLng(latitude, longitude);
    var myOptions = {
      zoom: 8,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    // sauvegarde realisation map
    map[map_id] = new google.maps.Map(document.getElementById('map_canvas'+map_id), myOptions);
  }
}
// l'initialisation sur le load e te sert pas
//google.maps.event.addDomListener(window, 'load', initialize);

**chuckichucki** · 04/05/2011, 21h36

Merci !!! Ca marche du feu de dieu

Un seul truc qui m'échappe c'est au niveau de la css : comment faire pour éviter d'avoir des tonnes de code css sur la page ? J'ai l'impression que je suis obligé de travailler avec des "id" et que je ne peux pas tout passer en class... pourtant c'est le même code à chaque fois donc ca devrait être jouable....

En gros aujourd'hui j'ai ma CSS

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
 
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0px; padding: 0px }
 
.map_canvas{width:500px; height:500px;}
 
#maps_container1 #map_canvas1 { display:none;}
#maps_container1:hover #map_canvas1{ position:absolute;display:block;  }
 
#maps_container2 #map_canvas2 { display:none;}
#maps_container2:hover #map_canvas2{ position:absolute;display:block;  }
 
#maps_container3 #map_canvas3 { display:none;}
#maps_container3:hover #map_canvas3{ position:absolute;display:block; }
 
</style>

Et mon code body

<body>

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
<div id="maps_container1" onmouseover="initialize(48.8779195,	2.2918112,1)">Lieu 1 : Voir la carte
 
  <div id="map_canvas1" class="map_canvas" ></div>
 
</div>
 
<div id="maps_container2" onmouseover="initialize(43.2098291,6.6479883,2)">Lieu 2 : Voir la carte
 
  <div id="map_canvas2" class="map_canvas"  ></div>
 
</div>
 
<div id="maps_container3" onmouseover="initialize(45.545454,3.54565,3)">Lieu 3 : Voir la carte
 
  <div id="map_canvas3" class="map_canvas" ></div>
 
</div>
 
</body>

Merci

**NoSmoking** · 04/05/2011, 22h49

pourtant c'est le même code à chaque fois donc ca devrait être jouable....

un petit exemple

Code html :

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
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.conteneur {
  border : 1px solid red;
}
.map_canvas {
  display : none;
  height : 500px;
  width : 500px;
}
.conteneur:hover .map_canvas{
  display : block;
}
</style>
</head>
<body>
  <div class="conteneur">Lieu 1 : Voir la carte
    <div class="map_canvas"></div>
  </div>
  <div class="conteneur">Lieu 2 : Voir la carte
    <div class="map_canvas"  ></div>
  </div>
  <div class="conteneur">Lieu 3 : Voir la carte
    <div class="map_canvas" ></div>
  </div>
</body>
</html>

**chuckichucki** · 05/05/2011, 17h57

Merci encore NoSmoking, tout marche nickel maintenant et je suis bien fier de ma page qui fuse !

Afficher plusieurs cartes google maps sur une page ? [Google Maps]

APIs Google

Discussions similaires

Partager

Partager