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ée</h1>
</div>
<div class="section">
<h2>Création marqueur optimisé</h2>
<p>La propriété <code>optimized</code> du marqueur prend par défaut la valeur <code>true</code>. Il n'est donc pas nécessaire de l'initialiser dans le code.</p>
<h4>Aperç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é, votre navigateur ne prend pas en compte la balise <code>canvas</code>.</p>
</div>
<br>
<div class="section">
<h2>Création marqueur non optimisé</h2>
<p>Pour créer un marqueur avec une image animée, il suffit de mettre à <code>false</code> la valeur de la propriété <code>optimized</code> de ce marqueur.</p>
<h4>Aperçu</h4>
<div class="cadre_carte">
<div id="div_carte2"></div>
</div>
</div>
<br>
</div>
<!-- FIN FICHIER FAQ --> |
Partager