Insertion d'un onclick dans un infowindow google map

[TYBMHI]

Bonjour à tous !

Je n'arrive pas à insérer un onclick dans le contenu d'une infowindow d'un marker google map. Si le onclick est de la sorte : onclick="alert('Test');" Cela fonctionne très bien. En revanche dès que le onclick renvoie à une fonction ça ne passe pas. Ni avec un "button" ni avec la balise <a>. Quelqu'un peut-il m'aider s'il vous plait ?

var contentString<?php echo $id; ?> = '<div id="content">'+

      '<div id="siteNotice">'+

      '</div>'+

      '<h1 id="firstHeading" class="firstHeading"><?php echo $type; ?></h1>'+

      '<div id="bodyContent" style="margin:-13px 0px 0px 0px;">'+

      '<span style=font-size:0.8em;><?php echo $heure; ?> ><br/></span>' +

      '<span style=font-size:0.8em;><?php echo $ville; ?> (<?php echo $code_postal; ?>)</span>' +

      '<p style="margin:10px 0px 10px 0px;"> Précision : <?php echo $commentaire; ?></p>'+

      '<p>Discutez ici : <a href="#" >tchat</a> </p>'+

      '<p style="width:100%;text-align:center;"><input type="button" value="Zoom++" onclick="zoom_marker();" />     '+

      '<a href="" onclick=retour_zoom_marker(); >Zoom--</a> </p>'+

      '</div>'+

      '</div>';



function zoom_marker(){

 map_france.setZoom(16);

  }


function retour_zoom_marker(){

 map_france.setZoom(6);

  }

Merci d'avance pour votre aide.

Modifié 30 Juillet 2015 par TYBMHI

[captain_torche]

Je passerai outre sur le code, qui mélange allègrement JavaScript et PHP, ce qui est source d'erreurs (En plus d'être une très mauvaise pratique).

Que se passe t'il si, dans ta fonction, tu mets un alert() ?

[TYBMHI]

Bonjour et merci de ta réponse captain_torche,

Désolé pour la qualité du code... Alors j'avais déjà essayé sans succès. Je viens de recommencer pour confirmer à nouveau et toujours sans succès... Il ne se passe absolument rien.

[eric73]

y-a-t il des erreurs javascript dans la console au chargement de la page ? lors d'un click ?

[TYBMHI]

Bonjour et merci également Eric73 pour ton aide. Il n'y a pas d'erreur javascript au chargement de la page selon la console.

[captain_torche]

peux-tu coller ton code généré sur un service comme jsfiddle, qu'on puisse voir le comportement en direct ?

[TYBMHI]

D'accord, je vais essayer ça. Mais je ne connais pas.

[TYBMHI]

Bon, je n'y arrive pas sur le site de jsfiddle, le carré "result" reste blanc. Alors puis-je vous envoyer la page HTML ? Au moins vous verrez en direct le résultat.

test.html

[eric73]

<script type='text/javascript'>//<![CDATA[

var map_france = "test";

var myLatlng = new google.maps.LatLng(48,2);

function zoom_marker(){

alert("zoom_marker");

map_france.setZoom(16);

map_france.panTo(myLatlng);

}

function retour_zoom_marker(){

alert("retour_zoom_marker");

map_france.setZoom(6);

map_france.panTo(myLatlng);

}

function initialize_2(){

var markers = [], // Tableau de google.maps.Marker

bounds = new google.maps.LatLngBounds(), // Zone des markers (non utilisé dans

map_franceOptions = { // Options de la carte

center: new google.maps.LatLng(48,2),

zoom: 6,

mapTypeId: google.maps.MapTypeId.ROADMAP

};

// Création de la carte dans l'élément #map

map_france = new google.maps.Map(document.getElementById('map_france'), map_franceOptions);

var marker = new google.maps.Marker({

position: myLatlng,

map: map_france,

title: 'Hello World!'

});

markers.push(marker);

var contentString = '<div id="content">'+

'<div id="siteNotice">'+

'</div>'+

'<h1 id="firstHeading" >Test</h1>'+

'<div id="bodyContent" style="margin:-5px 0px 0px 0px;">'+

'<p style="width:100%;text-align:center;"><input type="button" value="Zoom++" onclick="zoom_marker();" />'+

'<input type="button" value="Zoom--" onclick="retour_zoom_marker();" /> </p>'+

'</div>'+

'</div>';

var infowindow = new google.maps.InfoWindow({

maxWidth: 350,

content: contentString

});

google.maps.event.addListener(marker, 'click', function(evenement) {

infowindow.open(map_france, marker);

setTimeout(function () { infowindow.close(); }, 15000);

});

// Une fois que toutes les tuiles de la carte sont chargées

google.maps.event.addListenerOnce(map_france, 'tilesloaded', function() {

// Redéfinit la zone des markers avec ça : setBounds();

// Clustering

var cluster, // Le MarkerClusterer

clusterOptions = {

gridSize: 65, // 60 par défaut

maxZoom: 12, // Désactive le clustering au delà de ce niveau de zoom

/*styles: [{

url: '/path/to/cluster/icon',

height: 45,

width: 45,

anchor: [0, 0],

textColor: '#ffffff',

textSize: 16

}]*/

};

cluster = new MarkerClusterer(map_france, markers, clusterOptions);

});

/**

* Redéfinit le centre de la carte pour l'adapter à la zone des markers,

* avec un niveau de zoom maximal.

*/

function setBounds() {

map_france.setCenter(bounds.getCenter());

map_france.fitBounds(bounds);

if (map_france.getZoom() > 13) map_france.setZoom(13);

}

}//]]>

</script>

cela fonctionne avec le javascript ci dessus

Modifié 30 Juillet 2015 par eric73

[TYBMHI]

Super ça fonctionne ! Merci beaucoup eric73 ! Merci aussi à captain_torch. A bientôt !