11550 sujets

JavaScript, DOM et API Web HTML5

Problème d’affichage ou non d’une carte Google (switch)

1.- Fonctionnement NOK si l’on masque la carte par défaut (display none) à l’ouverture.
2.- Fonctionnement OK si l’on affiche la carte par défaut à l’ouverture.
Problème CSS ou JavaScript ?
Merci pour votre aide

Code cas 1
[<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr-fr" xmlns:v="urn:schemas-microsoft-com:vml">

<head>
<title>Affichage carte</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAvJ9yqeIoy23wQSIAKnYHxxQ3whw1i-hxgXa2y516i6MDQCic4hRrTU9Jz--L039XAQMiL09MAUiWUg" type="text/javascript"></script>
<style type="text/css">
div#plan {
width: 400px;
height: 250px;
color: #000;
display: none;
}
</style>
<script type="text/javascript">
// Tracé de la carte Google Maps
function load() {
if (GBrowserIsCompatible()) {
var carte = new GMap2(document.getElementById("plan"));
var lieu = new GLatLng(47.512143, 6.80618);
carte.setCenter(lieu, 14);
}
}

// Switch affichage carte
function switchDiv(obj) {
var el = document.getElementById(obj);
if ( el.style.display != 'block' ) {
el.style.display = 'block';
}
else {
el.style.display = 'none';
}
}
</script>
</head>

<body onload="load()" onunload="GUnload()">
<div>
<h1>Plan masqué que l'on veut afficher => NOK</h1>
<a class="fleche2" href="#" onclick="switchDiv('plan');">Afficher / Masquer le plan</a>
<!-- Affichage carte Google -->
<div id="plan"></div>
</div>
</body>
</html>]

Code cas 2 :
[<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr-fr" xmlns:v="urn:schemas-microsoft-com:vml">

<head>
<title>Affichage carte</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAvJ9yqeIoy23wQSIAKnYHxxQ3whw1i-hxgXa2y516i6MDQCic4hRrTU9Jz--L039XAQMiL09MAUiWUg" type="text/javascript"></script>
<style type="text/css">
div#plan {
width: 400px;
height: 250px;
color: #000;
}
</style>
<script type="text/javascript">
// Tracé de la carte Google Maps
function load() {
if (GBrowserIsCompatible()) {
var carte = new GMap2(document.getElementById("plan"));
var lieu = new GLatLng(47.512143, 6.80618);
carte.setCenter(lieu, 14);
}
}

// Switch affichage carte
function switchDiv(obj) {
var el = document.getElementById(obj);
if ( el.style.display != 'none' ) {
el.style.display = 'none';
}
else {
el.style.display = 'block';
}
}
</script>
</head>

<body onload="load()" onunload="GUnload()"> <!-- Pour affichage carte -->
<div>
<h1>Plan affiché que l'on veut masquer => OK</h1>
<a class="fleche2" href="#" onclick="switchDiv('plan');">Masquer / Afficher le plan</a>
<!-- Affichage carte Google -->
<div id="plan"></div>
</div>
</body>
</html>
]
Sujet clos
Aller à