Images dans infobulles

**mulys** · 08/05/2013, 16h02

Bonjour,

La faq API Google est vraiment très intéressante, étant novice sur le sujet cela m'aide énormément pour créer ma propre carte.

Malheureusement, je n'arrive pas à intégrer une image différente pour chaque marqueur.

J'ai essayé avec img src, mais ça ne fonctionne pas.

Merci d'avance pour 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
<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>[GoogleMaps API V3] Insertion d'une Carte</title>
    <style type="text/css">
      #div_carte {
        height : 600px; /* IMPERATIF */
        width : 600px;
        margin : auto;
        border : 1px solid #888;
      }
    </style>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
function initCarte(){
  var tMarker = [
 
    { 'lat' :48.856667, 'lon' : 2.350987, 'title' :'Paris',     'info' :'<b>Paris<\/b><br>comment insérer une image...'},
    { 'lat' :44.837368, 'lon' :-0.576144, 'title' :'Bordeaux',  'info' :'<b>Bordeaux<\/b><br>comment insérer une image...'},
    { 'lat' :43.297612, 'lon' : 5.381042, 'title' :'Marseille', 'info' :'<b>Marseille<\/b><br>comment insérer une image...'}
  ];
  var oMap, oMarker, oInfo;
  var i, nb = tMarker.length;
  // création de la carte
  oMap = new google.maps.Map(document.getElementById("div_carte"),{
    'zoom' : 6,
	'panControl' : false,
	'streetViewControl' : false,
	'zoomControl' : false,                     // supprime l'icône de contrôle du zoom  
    'scrollwheel' : false,                     // désactive le zoom avec la molette de la souris 
    'disableDoubleClickZoom' : true,           // désactive le zoom sur le double-clic
    'center' : new google.maps.LatLng( 46.80, 1.75),
    'mapTypeId' : google.maps.MapTypeId.ROADMAP
  });
  // création infobulle
  oInfo = new google.maps.InfoWindow();
  // création des markers
  for( i = 0; i < nb; i++){
    // création marker
    oMarker = new google.maps.Marker({
	'numero' : i,           // ici on sauve la valeur de i
      'position' : new google.maps.LatLng( tMarker[i].lat, tMarker[i].lon),
      'map' : oMap,
      'title' : tMarker[i].title,
	  // Markers drop on the map
	  'animation': google.maps.Animation.DROP
    });
    // événement clic sur le marker
    google.maps.event.addListener( oMarker, 'click', function() {
     // affectation du contenu en utilisant this.numero
      oInfo.setContent( tMarker[this.numero].info);
      // affichage InfoWindow
      oInfo.open( this.getMap(), this);
    });
  }
}
// init lorsque la page est chargée
google.maps.event.addDomListener(window, 'load', initCarte);
    </script>
  </head>
  <body>
        <div id="div_carte"></div>
  </body>
</html>

**NoSmoking** · 12/05/2013, 19h22

Bonjour,
le contenu des infoWindow n'est autre que du HTML, donc tu peux écrire directement

Code :

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

1
2
3
4
5
var tMarker = [
    { 'lat' :48.856667, 'lon' : 2.350987, 'title' :'Paris',     'info' :'<b>Paris<\/b><br><img src="tour_eiffel.jpg">'},
    { 'lat' :44.837368, 'lon' :-0.576144, 'title' :'Bordeaux',  'info' :'<b>Bordeaux<\/b><br><img src="statue_des_girondins.jpg">'},
    { 'lat' :43.297612, 'lon' : 5.381042, 'title' :'Marseille', 'info' :'<b>Marseille<\/b><br><img src="notre_dame_de_la_garde.jpg"'}
  ];

**mulys** · 15/05/2013, 22h18

Bonjour,
Désolé pour cette réponse tardive, merci pour votre réponse!
Effectivement c'est du langage html tout simplement, ça fonctionne.

Merci encore

Images dans infobulles [Google Maps]

APIs Google

Discussions similaires

Partager

Partager