Ajouter Logo et Légende

**toinehxc** · 03/05/2013, 10h27

Bonjour à tous.

Je me permets de poster ici car j'ai un soucis pour rajouter un logo et une légende à ma carte.

J'ai réussi à créer une carte avec l'api v3, à l'incorporer sur mon site internet, mais je voudrais que sur cette même carte ajouter logo et légende que j'ai préalablement créé en format image.

Je ne sais pas du tout comment faire, j'ai testé dans le code html en créant des <div> imbriquées mais seule la div de la map s'affiche, et j'ai essayé direcement dans le code js de google map mais j'ai seulement réussi à afficher des images géoréférencées.

En vous remerciant d'avance.

**NoSmoking** · 03/05/2013, 13h53

Bonjour,
tu peux faire cela en utilisant des overlay customisés ou encore faire un control customisé et ajouter ton élément aux contrôles de la map.

Attention toutefois à ne pas surcharger les cartes avec des éléments trop gros, comme on peut le voir de temps en temps, sachant que certaines info peuvent se trouver avantageusement à l'extérieur de celle ci.

Nota: La méthode présenté dans la documentation est très "sale", il est préférable de créer ton élément dans la page puis de l'affecter à la map, cela permet notamment d'avoir une meilleure visibilité de ce que l'on veut faire.

Exemple simple d'ajout de logo en bas à droite.

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
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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>[Google Maps API] Intégrer un logo dans une Map</title>
<meta name="Author" content="NoSmoking">
<style type="text/css">
html, body {
  margin:1em 0;
  padding :0;
  font-family : Verdana;
  font-size : 0.9em;
  background-color : #F8F8F8;
}
#page {
  position:relative;
  width:800px;
  padding:0;
  margin:0 auto 1em;
  background-color:#FFF;
  border: 1px solid #B0B0FF;
  box-shadow: 0px 0px 5px 2px #C0C0C0;
  overflow:hidden;
}
#header{
  margin:1px;
  background-color:#E1E4F2;
}
#header h1{
  color:#006699;
  font-size:1.5em;
  font-style:normal;
  margin:0;
  padding:0.5em;
  text-shadow:1px 1px 0px #FFF;
}
#header span {
  float: right;
  font-size: 0.5em;
  font-style: italic;
}
.section{
  margin: 2em;
}
#cadre_carte {
  margin:0 auto;
  padding:5px;
  width:600px;
  height:600px;
  border:1px solid #888;
  border-radius:5px;
  border:1px solid #CCC;
  box-shadow: 0 2px 4px 2px #CCC;
}
#div_carte {
  height:600px;
  width:600px;
  margin:auto;
}
#map_logo{
  margin:5px;
  padding:2px;
  background:#FFF;
  box-shadow:0 2px 5px #333;
}
#map_logo img{
  display:block;
}
#map_logo:hover{
  background:#3BF;
}
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
(function(){
  function initCarte(){
    // creation de la carte
    var oMap = new google.maps.Map(document.getElementById("div_carte"),{
      'center': new google.maps.LatLng(46.80, 1.70),
      'zoom' : 6,
      'backgroundColor' : '#fff',
      'streetViewControl' : false,
      'zoomControlOptions' : {
        'style' : google.maps.ZoomControlStyle.SMALL
      },
      'mapTypeId': google.maps.MapTypeId.ROADMAP
    });
    // récup. élément du logo
    var oLogo = document.getElementById('map_logo');
    // ajout élément aux contrôles de la map
    oMap.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(oLogo);
  }
  // init lorsque la page est chargée
  google.maps.event.addDomListener(window, 'load', initCarte);
})();
</script>
</head>
<body>
<div id="page">
  <div id="header">
    <h1><span>[Google Maps API]</span>Intégrer un logo dans une Map</h1>
  </div>
  <div class="section">
    <div id="cadre_carte">  
      <div id="div_carte"></div>
    </div>
  </div>
  <div style="display:none">
    <!-- le logo à ajouter -->
    <a id="map_logo" href="http://www.developpez.net/forums/f1562/webmasters-developpement-web/javascript/bibliotheques-frameworks/apis-google/">
      <img src="http://club.developpez.com/webdesign/Developpez.com/Badges/badges_dvp2.gif" alt="developpez.com">
    </a>
  </div>
</div>
</body>
</html>

Ajouter Logo et Légende [Google Maps]

APIs Google

Discussions similaires

Partager

Partager