Dans un article précédent, nous avons vu comment afficher une carte Google Maps. Nous allons voir ici comment placer et personnaliser un marqueur.

Déclaration du script 

À placer de préférence dans le header de la page, en indiquant votre clé API GoogleMaps.

<script src='https://maps.googleapis.com/maps/api/js?v=3.exp&key=CLÉAPI'></script>

Création de la carte 

Elle s’appelle ici carte_gite. J’indique le centrage, le zoom et le type de carte (ROADMAP, SATELLITE,TERRAIN ou HYBRID). Les options suivantes concernent l’icône de contrôle du zoom, le zoom avec la molette et le double clic.

1
2
3
4
5
6
7
8
var carte_gite = new google.maps.Map( document.getElementById( 'div_carte'),{
  'center' : new google.maps.LatLng(49.582134, 2.081288), 
  'zoom' : 8,			     
  'mapTypeId' : google.maps.MapTypeId.ROADMAP,
  'zoomControl' : true,             
  'scrollwheel' : true,                  
  'disableDoubleClickZoom' : true   
});

Création du marker 

J’ai choisi un marqueur vert, indiqué sa position, son titre et sur quelle carte il doit se placer.

1
2
3
4
5
6
var oMarker = new google.maps.Marker({
  'icon' : 'http://maps.google.com/mapfiles/marker_green.png', 
  'position' : new google.maps.LatLng(49.581931, 2.081612),    
  'title' : 'Le gîte de la chevêche',				
  'map' : carte_gite                                                 
});

Création de l’infobulle 

Ici, un titre, une image et deux paragraphes ont été mis.

1
2
3
4
var contenuInfoBulle =	'<h1>Le gîte de la chevêche</h1>' +	
  '<img id="lettrineImage" src="http://gitedelacheveche.com/data/medias/facade_web.jpg" title="La plage" />' +
  '<p><span class="infobulle">Ce gîte se situe dans un petit village qui vous offrira son calme et vous permettra de découvrir les paysages verdoyants et variés de Picardie. <br />Vous pourrez à proximité découvrir un château du XVIème et vous promener au long de la coulée verte, ancienne voie ferrée aménagée pour la randonnée ou le VTT.</span></p>' +
  '<p><span class="infobulle">Pour en savoir plus : <a href="http://gitedelacheveche.com" target="_blank">Le gîte de la chevêche</a></span></p>';

Le résultat 

Le code complet 

Les explications se trouvent dans les commentaires.

 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
<script src='https://maps.googleapis.com/maps/api/js?v=3.exp&key=cléapi'></script>
<script>
function initCarte(){
// création de la carte
 var carte_gite = new google.maps.Map( document.getElementById( 'div_carte'),{
  'center' : new google.maps.LatLng(49.582134, 2.081288), //position du centre de la carte (Rotangy)
  'zoom' : 8, // réglage du niveau de zoom
  'mapTypeId' : google.maps.MapTypeId.ROADMAP, // type de carte (ROADMAP, SATELLITE,TERRAIN ou HYBRID)
  'zoomControl' : true, // supprime l'icône de contrôle du zoom  (true ou false)
  'scrollwheel' : true, // désactive le zoom avec la molette de la souris (true ou false)
  'disableDoubleClickZoom' : true // désactive le zoom sur le double-clic (true ou false)
});
// création du marker
 var oMarker = new google.maps.Marker({
  'icon' : 'http://maps.google.com/mapfiles/marker_green.png',// affiche un marker vert (green, yellow)
  'position' : new google.maps.LatLng(49.581931, 2.081612), // position d'ancrage du marker sur la carte
  'title' : 'Le gîte de la chevêche', // Contenu de l'infobulle
  'map' : carte_gite // l'objet carte sur lequel est affiché le marker
});
// création de l'infobulle		
 var contenuInfoBulle =	'<h1>Le gîte de la chevêche</h1>' +	
  '<img id="lettrineImage" src="http://gitedelacheveche.com/data/medias/facade_web.jpg" title="La plage" />' +
  '<p><span class="infobulle">Ce gîte se situe dans un petit village qui vous offrira son calme et vous permettra de découvrir les paysages verdoyants et variés de Picardie. <br />Vous pourrez à proximité découvrir un château du XVIème et vous promener au long de la coulée verte, ancienne voie ferrée aménagée pour la randonnée ou le VTT.</span></p>' +
  '<p><span class="infobulle">Pour en savoir plus : <a href="http://gitedelacheveche.com" target="_blank">Le gîte de la chevêche</a></span></p>';
  var optionsInfoBulle = {
  content: contenuInfoBulle,
};
var infoBulle = new google.maps.InfoWindow( optionsInfoBulle );				
  google.maps.event.addListener(oMarker, 'click', function() {
  infoBulle.open(carte_gite, oMarker);
});
}
// init lorsque la page est chargée
google.maps.event.addDomListener( window, 'load', initCarte);
</script>

Le CSS 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
#div_carte {
  height : 600px; /* IMPERATIF */
  width : 800px;
  margin : auto;
  border : 1px solid #888;
  }			
  #lettrineImage{
  float: left;
  width: 220px;
  height: 163px;
  margin: 0 1em 1em 0;
}
#EmplacementDeMaCarte{
  height:100%;
}
.infobulle {
  font-size:1.2em;
}
p {
text-align:justify;
}