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


Autre exemple mais avec un affichage de l'infobulle au passage de la souris au dessus du marqueur. L'infobulle s'affiche au survol de la souris sur le marqueur vert.


DEMO - L'infobulle s'affiche au passage de la souris

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() {
  //***Plan d'accès ***//
   
  latlng_c=[48.855141,2.341303] //"Point de centrage de la carte"//
 
  var latlng = new google.maps.LatLng(latlng_c[0],latlng_c[1]);
  var myOptions = {
    zoom: 12,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  
var map = new google.maps.Map(document.getElementById("carte"),myOptions);
  
   
//************************************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, 'mouseover',	function() { 
    // Ouverture de l'infobulle 
	infowindow1.open(map, marker1);  
	});  
	
//**************************************************************************************************//		
	 
}	
</script>


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 : CarteMarqueurInfobulle03.zip



Lire la suite »






0462191