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)


DEMO - L'infobulle s'affiche après un clic sur le marqueur vert.

Exemple de code javascript pour cette carte avec marqueur et infobulle


<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>



Exemple de code HTML à insérer pour l'infobulle


<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 />


Téléchargez le fichier de cette démonstration et adaptez le à votre convenance en modifiant les coordonnées de latitude et longitude ainsi que le code html pour l'infobulle.





Entrez votre adresse mail:

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



Lire la suite »






0231897