Carte Google Maps et marqueur cliquable


La carte est maintenant balisée par un marqueur centré sur la ville de Paris. Nous allons pouvoir cliquer dessus et faire apparaître une infobulle fixe que l'on fermera en recliquant sur la petite croix dans le coin supérieur droit.

On verra ensuite comment faire apparaître cette infobulle seulement quelques secondes ou la faire apparaître uniquement au survol de la souris au dessus du marqueur.

DEMO Carte Google Maps

Exemple de code javascript pour cette carte avec marqueur


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

//************************************le marqueur******************************************************//   
	  //marker1 : Paris
      var marker1 = new google.maps.Marker();
      marker1.setPosition(new google.maps.LatLng(48.855141,2.341303));
      marker1.setIcon('http://webinfotuto.free.fr/rubriques/siteweb/GoogleMaps/images/markers/vert.png');
	 
	 // marker1.setShadow('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() { 
    google.maps.event.addListener(marker1, 'click', function() {
	// Ouverture de l'infobulle en cliquant
	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 : CarteMarqueurCliquable.zip



Lire la suite »






0239051