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

<script src="http://maps.google.com/maps?file=api&v=2&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>