[Google Maps] News Q/R Markers

Version imprimable

29/04/2013, 22h37
NoSmoking

[Google Maps] News Q/R Markers
Comment modifier la position d'un marker?
Pour modifier la position d'un marker on utilise la méthode setPosition de l'objet google.maps.Marker.
Cette méthode attend un objet au format google.maps.LatLng comme paramètre qui représente la nouvelle position d'affichage du marker.
Code:

1 2 var newPosition = new google.maps.LatLng( 45.188529,5.724524); oMarker.setPosition( newPosition);
On peut également utiliser la méthode setOptions(). Dans ce cas, on passe en paramètre l'objet sous sa forme littérale comme suit :
Code:

1 2 var newPosition = new google.maps.LatLng( 45.188529,5.724524); oMarker.setOptions({ 'position': newPosition});
Comment modifier le texte au survol d'un marker?
Pour modifier le texte apparaisant au survol d'un marker, la propriété title, on utilise la méthode setTitle() de l'objet google.maps.Marker.
Cette méthode attend une string comme paramètre qui représente le texte à afficher.
Code:

1 2 var markerTitle = 'Vous avez le bonjour du marker' oMarker.setTitle( markerTitle);
On peut également utiliser la méthode setOptions(). Dans ce cas, on passe en paramètre l'objet sous sa forme littérale comme suit :
Code:

1 2 var markerTitle = 'Vous avez le bonjour du marker' oMarker.setOptions({'title': markerTitle});
http://www.developpez.com/template/kit/kitwarning.png Le code HTML n'est pas interprété dans la propriété title.
15/05/2013, 14h19
vermine

:salut:

Corrections et ajouts effectués. :)

N'hésite pas à relire un petit coup pour être sûr que je n'ai rien oublié. Il me restera à ajouter la remarque pour la page d'exemple non valide (mais c'est à faire en prod uniquement).

Publication mardi 21 si possible. ;)

:merci:
18/05/2013, 06h59
NoSmoking

Bonjour,
après relecture j'aurais juste une remarque sur

Comment centrer une carte sur un point particulier ?
Si le déplacement est inférieur à la largeur et à la hauteur celui ci s'effectuera avec un effet de glissement.
devient
Si le déplacement est inférieur à la largeur et à la hauteur de la carte, celui ci s'effectuera avec un effet de glissement.

That's all folk !

Citation:

Envoyé par vermine

Il me restera à ajouter la remarque pour la page d'exemple non valide (mais c'est à faire en prod uniquement).

voilà un code qui ne devrait plus poser de problème

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
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
117
118
119
120
121
122
123
124
125
126
127
<!--// DEBUT FICHIER FAQ //-->
<style type="text/css">
#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;
}
#page h2{
  color:#4488bb;
  font-size:1.25em;
  margin:1em 0 0.5em;
}
#page h3 {
  color:#4488bb;
  font-size:1.0em;
  margin:1em 0 0.5em;
}
#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;
}
#content{
  overflow: hidden;
  padding-bottom: 2em;
}
.section{
  margin: 1em 2em;
}
.cadre_carte{
  width:700px;
  height:200px;
  margin:0 auto;
  padding:5px;
  border-radius:5px;
  border:1px solid #CCC;
  box-shadow: 0 2px 4px 2px #CCC;
}
#div_carte1, #div_carte2 {
  height: 100%;
  width: 100%;
}
code{
  color:#00F;
  font: 1em "Courier New",monospace;
}
</style>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript">
(function(){
  function initCarte(){
    document.title = 'Marker et image anim\u00e9e';
    // init
    var position = new google.maps.LatLng( 62.0,-44.0);
    var sId, sImage = 'http://www.developpez.net/forums/images/smilies/pingoin2bis.gif';
    var oMap, oMarker;
    var mapOptions = {
      'backgroundColor': '#FFF',
      'mapTypeControl':  false,
      'streetViewControl': false,
      'panControl':false,
      'zoomControlOptions': {
        'style': google.maps.ZoomControlStyle.SMALL
      },
      'zoom': 4,
      'center': position,
      'mapTypeId': google.maps.MapTypeId.ROADMAP
    };
    for( i=0; i <2; i++){
      // creation de la carte
      sId = 'div_carte' +(i+1);
      oMap = new google.maps.Map(document.getElementById( sId), mapOptions);
      // creation du marqueur
      oMarker = new google.maps.Marker({
       'optimized': 1-i,
       'icon': sImage,
       'position': position,
       'map': oMap
      });
    }
  }
  // init lorsque la page est chargee
  google.maps.event.addDomListener(window, 'load', initCarte);
})();
</script>
<div id="page">
  <div id="header">
    <h1><span>[Google Maps API]</span> Marker et image anim&eacute;e</h1>
  </div>
  <div class="section">
    <h2>Cr&eacute;ation marqueur optimis&eacute;</h2>
    <p>La propri&eacute;t&eacute; <code>optimized</code> du marqueur prend par d&eacute;faut la valeur <code>true</code>. Il n'est donc pas n&eacute;cessaire de l'initialiser dans le code.</p>
    <h4>Aper&ccedil;u</h4>
    <div class="cadre_carte">
        <div id="div_carte1"></div>
    </div>
    <p><img style="vertical-align:middle;margin-right:1em;" src="http://www.developpez.com/template/kit/kitwarning.png" alt="warning">Si le marqueur est anim&eacute;, votre navigateur ne prend pas en compte la balise <code>canvas</code>.</p>
  </div>
  <br>
  <div class="section">
    <h2>Cr&eacute;ation marqueur non optimis&eacute;</h2>
    <p>Pour cr&eacute;er un marqueur avec une image anim&eacute;e, il suffit de mettre &agrave; <code>false</code> la valeur de la propri&eacute;t&eacute; <code>optimized</code> de ce marqueur.</p>
    <h4>Aper&ccedil;u</h4>
    <div class="cadre_carte">
      <div id="div_carte2"></div>
    </div>
  </div>
  <br>
</div>
<!-- FIN FICHIER FAQ -->

ce code est a mettre dans la <div class="contenuPage">.

20/05/2013, 17h50
vermine

Parfait. Voila qui devrait être corrigé. ;)