11496 sujets

JavaScript, DOM et API Web HTML5

Affichage Info bulle sur une carte

Bonjour,

Tout d'abord je m'excuse si ma question n'est pas appropriée à ce forum.

Je voudrais, lorsque j'ouvre ma page localisation de mon site, que l'infobulle
apparaisse à l'ouverture de la page. Actuellement l'infobulle apparait lorsque
je clique sur le marqueur, et je n'arrive pas à faire la modif.

Est-ce que cela est possible ?

Je joins le code que j'utilise.

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
		<script type="text/javascript">
			function initialisation(){
				var centreCarte = new google.maps.LatLng(48.994966,2.224778);
				var optionsCarte = {
					zoom: 8,
					center: centreCarte,
					mapTypeId: google.maps.MapTypeId.HYBRID
				}
				var maCarte = new google.maps.Map(document.getElementById("ContenairCarte"), optionsCarte);
				var optionsMarqueur = {
					position: centreCarte,
					map: maCarte,
					title: "AAAA"
				}
				var marqueur = new google.maps.Marker(optionsMarqueur);
				var contenuInfoBulle = "<table border='0' width='307' cellpadding='3' cellspacing='0'>"+
                                       "<tr><td valign='top'><div style='color: blue; font-size: 14px; font-weight:bold;'>A A A A</div><br/> <br/><br/>Tél :00 00 00 00 00<br/>"+
                                       "<a href='mailto:aaaa@orange.fr'> Mail : aaaa@orangel.fr</a>"+
                                       "</td>"+
                                       "<td>"+
                                       "<img src='../Outils/Logo/Logo AAAA 100x100.gif' border='0' alt='Photo' vspace='5' align='right' />"+
                                       "</td></tr></table>";
							
				var infoBulle = new google.maps.InfoWindow({
					content: contenuInfoBulle
				})
				google.maps.event.addListener(marqueur, 'click', function() {
					infoBulle.open(maCarte, marqueur);
				});
			}
			google.maps.event.addDomListener(window, 'load', initialisation);
		</script>
	</head>
	
	<body onload "initialisation()">
	    <div class="text-deroulant">
           <marquee 
          </marquee>
        </div>	
		<div id="ContenairCarte"></div>

Merci pour votre aide.

Salutations
Salut,
j'ai juste jeter un oeil rapide mais à la fin de ta fonction initialisation tu fais ça:

google.maps.event.addListener(marqueur, 'click', function() {
					infoBulle.open(maCarte, marqueur);

Plutôt que de rajouter un événement sur le click pour afficher le marqueur, pourquoi ne pas appeller directement la fonction à la fin de l'initialisation afin de l'afficher?

infoBulle.open(maCarte, marqueur);

Modifié par floreo (21 Dec 2013 - 20:53)
Bonjour floreo,

Merci pour ta réponse, elle m'a permis de résoudre mon problème de cette façon :

infoBulle.open(maCarte, marqueur)
					
				google.maps.event.addListener(marqueur, 'click', function() {
					infoBulle.open(maCarte, marqueur);
				});

1 - Ouverture de l'info bulle à l'ouverture de la page.

2 - Fermeture par la croix de l'info bulle.

3- Réouverture de l'info bulle par le marqueur.

Mais un petit problème persiste : à l'ouverture l'info bulle s'affiche avec les deux
ascenseurs, puis lorsque que je ferme l'info bulle avec la croix, et que je l'ouvre
de nouveau avec le marqueur, celle-ci apparait normalement sans les deux ascenseurs.

Un deuxième petit problème : je n'arrive pas à ouvrir la carte sur le nom des rues.

Salutations
Bonsoir,

Personne pour m'aider, surtout pour l'affichage type de carte ?

Merci par avance.

Salutations
Sujet clos
Aller à