11486 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

J'ai un problème assez difficile à résoudre avec thickbox et l'API Googlemaps. En effet actuellement j'arrive à ouvrir un pop up thickbox en chargeant une Googlemaps directement, puis au clic de l'utilisateur, la Googlemaps est affiché sans rechargement avec une fenêtre thickbox (donc le fond de la page est en grisé et la Googlemap s'affiche.
J'ai créé un bouton via l'API de Googlemaps pour fermer cette fenêtre, mais voici que j'aimerais créer un bouton Streetview qui me permette d'avoir un autre cadre qui s'ouvre (avec peut-être un resize de la Googlemaps) me proposant une image de l'endroit sur le lequel j'ai cliqué sur la Googlemap.

Or en utilisant l'API, j'ay arrive sans problème, mais dans mon cas précis, je dois passer par thickbox pour afficher le contenu non pas sur la page, mais dans la popup !

Je vous poste ici mon code actuel, si l'un de vous a des pistes, je lui en serait très reconnaissant Smiley smile

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key='.GMAP_KEY.'" type="text/javascript"></script>
    <script type="text/javascript">

    //<![CDATA[

    var map = null;
    var geocoder = null;

	var adresse = \''.str_replace("'", "\'", $adresse).'\';


    function load() {
      if (GBrowserIsCompatible()) {
        map = new GMap2(document.getElementById("gmap"));
        geocoder = new GClientGeocoder();
		showAddress(adresse);
      }
    }

    function showAddress(address) {
      if (geocoder) {
        geocoder.getLatLng(
          address,
          function(point) {
            // adresse non trouvé
			if (!point) {
				Element.hide("gmap");
				// TODO !
				//document.write("Carte non disponible.");
            } else {
				map.setCenter(point, 10);
				var marker = new GMarker(point);
				map.addOverlay(marker);
				
				map.addControl(new GLargeMapControl());
				var bottomRight = new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(10,10));
				map.addControl(new GMapTypeControl(), bottomRight);
				map.addControl(new TextualZoomControl());
            }
          }
        );
      }
    }
	function TextualZoomControl() {}
	TextualZoomControl.prototype = new GControl();
	
	TextualZoomControl.prototype.initialize = function(map) {
	  var container = document.createElement("div");
	
	  // Creation du bouton Fermer
	  var closeDiv = document.createElement("div");
	  this.setButtonStyle_(closeDiv);
	  container.appendChild(closeDiv);
	  closeDiv.appendChild(document.createTextNode("Fermer"));
	  GEvent.addDomListener(closeDiv, "click", function() {
	    tb_remove();
	  });
	  
	  // Creation du bouton Streetview
	  var street = document.createElement("div");
	  street.class="thickbox";
	  street.id="streetview";
	  this.setButtonStyle_(street);
	  container.appendChild(street);
	  street.appendChild(document.createTextNode("Streetview"));
	  GEvent.addDomListener(street, "click", function() {
	  	if (!divStreet) {
		    // tb_resize(500,300);
		    
			// Creation du div
		    /* var divStreet = document.createElement("div");
		    container.appendChild(divStreet);
		    divStreet = createDivStreet(divStreet);
		    */
		    // Creation de l\'overlay sur le div
		    var myPano = new GStreetviewPanorama(divStreet);
	        var svOverlay = new GStreetviewOverlay();
	        map.addOverlay(svOverlay);
	        
	        GEvent.addListener(map,"click", function(overlay,point) {
	          myPano.setLocationAndPOV(point);
	        });
	        
		}
	  });
	
	  map.getContainer().appendChild(container);
	  return container;
	}
	
	// By default, the control will appear in the top left corner of the
	// map with 7 pixels of padding.
	TextualZoomControl.prototype.getDefaultPosition = function() {
	  return new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(7, 7));
	}
	
	// Sets the proper CSS for the given button element.
	TextualZoomControl.prototype.setButtonStyle_ = function(button) {
	  button.style.color = "black";
	  button.style.backgroundColor = "white";
	  button.style.font = "small Arial";
	  button.style.fontWeight = "bold";
	  button.style.border = "1px solid black";
	  button.style.padding = "2px";
	  button.style.marginBottom = "3px";
	  button.style.textAlign = "center";
	  button.style.width = "6em";
	  button.style.cursor = "pointer";
	}
	
	// Fonction qui va créer un gros cadre en bas
	
	function createDivStreet(div) {
	  div.style.color = "black";
	  div.style.display = "block";
	  div.style.backgroundColor = "white";
	  div.style.font = "small Arial";
	  div.style.fontWeight = "bold";
	  div.style.border = "1px solid black";
	  div.style.padding = "2px";
	  div.style.marginBottom = "3px";
	  div.style.width = "300px";
	  div.style.height = "500px";
	  div.style.textAlign = "center";
	  div.style.cursor = "pointer";
	  div.style.marginBottom = "0";
	  
	  return div;
	}

	window.onunload = function() { GUnload() }
	window.onload = function() { load(); }
	

    //]]>
    </script>
Bon, étant donné que je ne trouvait pas de solution, j'ai tout simplement changé mon fusil d'épaule et au lieu de charger un div caché, j'ai tout simplement appelé une nouvelle page avec thickbox. Je n'ai donc plus de problème et ai pu faire afficher le cadre streetview simplement.

Merci quand même !