Carte Google Maps avec marqueur et infobulle (1/5)

Nous allons voir plusieurs exemples et plusieurs méthodes pour afficher l'infobulle d'un marqueur sur une carte.
- L'infobulle qui s'affiche après le clic sur marqueur. (1/5)
- L'infobulle qui s'affiche N secondes après le clic puis disparaît. (2/5)
- L'infobulle qui s'affiche au passage de la souris. (3/5)
- L'infobulle qui s'affiche au passage de la souris puis disparaît. (4/5)
- L'infobulle qui s'affiche N secondes après le passage de la souris. (5/5)

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
 //***Coordonnées***
  
 latlng=[48.855141,2.341303] //"Point de centrage de la carte"//
 
  var latlng = new google.maps.LatLng(latlng[0],latlng[1]);
  var parametres = {
    zoom: 12,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
var map = new google.maps.Map(document.getElementById("carte"),parametres);
 
   
//************************************les markers******************************************************   
	  //marker1 : Paris
      var marker1 = new google.maps.Marker();
      marker1.setPosition(new google.maps.LatLng(48.855141,2.341303));
      //marker1.setIcon("http://www...image.png");
	  //marker1.setShadow("http://www....shadow.png");
	  marker1.setIcon('http://webinfotuto.free.fr/rubriques/siteweb/GoogleMaps/images/markers/vert.png');
	  marker1.setShadow('http://webinfotuto.free.fr/rubriques/siteweb/GoogleMaps/images/markers/ombre.png');
	  marker1.setTitle("Paris");
      marker1.setMap(map);
	  
//***********************************infobulle par marker********************************************  
	
	// On crée une infobulle
	var infowindow1 = new google.maps.InfoWindow({         maxWidth: 300, 
	//On définit la position d'origine de l'infoWindow (la position du marqueur) 
	position: new google.maps.LatLng(48.855141,2.341303), 
	//On définit le texte à afficher dans l'infoWindow 
	content: " INSERER ICI DU CODE HTML POUR CETTE INFOBULLE "   });
	//On ajoute un listener d'événement : on écoute le clic sur le marqueur
	google.maps.event.addListener(marker1, 'click', function() {
	// Ouverture de l'infobulle 
	infowindow1.open(map, marker1);  
	});  
	
//**************************************************************************************************		
}
</script>

<a><span style='text-align:center; font-size:18px; font-weight:bold; color: #236342;'>Paris</span></a><br /><a><span style='color: #236342;'>Centre de la capitale Française</span></a><br /><a><span style='color: #236342;'></span></a><br />

Vous pouvez télécharger le code et le fichier HTML de cette démonstration avec le zip suivant : CarteMarqueurInfobulle01.zip