course entre jquerry et google map
bonjour à tous,
voilà mon soucis,
j'utilise le bootstrap de tweeter ainsi qu'une google map.
si j'utilise la configuration suivante j'ai un soucis
page html
<script>
$( document ).ready(function(){
// Détecte le hash dans l'url, l'utilise pour sélectionner le lien correspondant, déclenche le clique
$("a[href='" + window.location.hash + "']").trigger('click')
});
</script>
<div class="container">
<div class="row">
<div class="col-lg-12">
<ul class="nav nav-tabs">
<li><a href="#home" data-toggle="tab">Home</a></li>
<li><a href="#localisation" data-toggle="tab">Localiser ses avions</a></li>
<li><a href="#préparation" data-toggle="tab">Préparation d'un vols</a></li>
<li><a href="#lancement" data-toggle="tab">Lancement d'un vols</a></li>
<li><a href="#gestion" data-toggle="tab">Gérer sa flotte d'avions</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home">
Bienvenue dans votre bureau.<br><br>
De cette page vous avez la possibilité de voir ou sont vos avions, de préparer un plan de vol,
lancer un vol et de surveillez l'état de vos aéronefs'.<br><br>
<?php
include './site/membre/pages/vol/vol_cil/resume.php';
?>
</div>
<div class="tab-pane" id="localisation">
<?php
include './site/membre/pages/vol/vol_cil/aircraft_map.php';
?>
</div>
<div class="tab-pane" id="préparation">azer</div>
<div class="tab-pane" id="lancement">
<?php
include './site/membre/pages/vol/vol_cil/resa/index.php';
?>
</div>
<div class="tab-pane" id="gestion">azer</div>
</div>
</div>
</div>
</div>aircraft_map.php
<script>
var map;
function initialize() {
var mapOptions = {
autozoom: true,
disableDefaultUI: true,
zoom: 5,
center: new google.maps.LatLng(46.2293411, 6.106630699999982),
mapTypeId: google.maps.MapTypeId.TERRAIN,
refreshTime: 10000
};
map = new google.maps.Map(document.getElementById('map-loc'), mapOptions);
<?php
try{
$DBPDO = new PDO($dbdns5,$dbuser5 , $dbpass5,
array( PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES utf8"));
$DBPDO-> setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
try{
$sql="SELECT tracker_mega_airports.icao, tracker_mega_airports.lat, tracker_mega_airports.lng,
tracker_mega_airports.name, tracker_mega_airports.country, enr_cil_aircraft_pilot.id_aircraft,
enr_cil_aircraft_pilot.position,enr_cil_aircraft_pilot.id_pilot, enr_cil_aircraft_pilot.id_achat,
enr_cil_aircraft_sup.id, enr_cil_aircraft_sup.fullname, enr_cil_aircraft_sup.imagelink
FROM enr_cil_aircraft_pilot
LEFT JOIN enr_cil_aircraft_sup ON enr_cil_aircraft_pilot.id_aircraft = enr_cil_aircraft_sup.id
LEFT JOIN tracker_mega_airports ON enr_cil_aircraft_pilot.position = tracker_mega_airports.icao
WHERE enr_cil_aircraft_pilot.id_pilot= '$t_cil_pilote[pilotid]'";
$req = $DBPDO ->query($sql);
while($map_aircraft=$req->fetch(PDO::FETCH_OBJ))
{
if ($enc_icao!=$map_aircraft->icao)
{
$count=$count+1;
$count2=$count-1;
?>
var contentString<?php echo $count2; ?> = '<?php echo $info; ?>';
var infowindow<?php echo $count2; ?> = new google.maps.InfoWindow({content: contentString<?php echo $count2; ?>});
<?php
unset($info);
unset($info2);
$pos_lat=$map_aircraft->lat;
$pos_lng=$map_aircraft->lng;
$img=$map_aircraft->imagelink;
?>
airport = new google.maps.LatLng(<?php echo $pos_lat; ?>, <?php echo $pos_lng; ?>);
var marker<?php echo $count; ?> = new google.maps.Marker({
position: airport,
map: map,
title: '<?php echo $map_aircraft->icao ?>, <?php echo $map_aircraft->pays ?>'
});
google.maps.event.addListener(marker<?php echo $count; ?>, 'click', function() {
infowindow<?php echo $count; ?>.open(map,marker<?php echo $count; ?>);
});
<?php
$info2='</br>Appareil sur site:</br></br>'.$map_aircraft->fullname.'</br><img src="'.$img.'" width="150px"></br>';
$info=$info.$info2;
}
else
{
$img=$map_aircraft->imagelink;
$info2=''.$map_aircraft->fullname.'</br><img src="'.$img.'" width="150px"></br>';
$info=$info.$info2;
}
$enc_icao=$map_aircraft->icao;
}
$count=$count+1;
$count2=$count-1;
?>
var contentString<?php echo $count2; ?> = '<?php echo $info; ?>';
var infowindow<?php echo $count2; ?> = new google.maps.InfoWindow({
content: contentString<?php echo $count2; ?>
});
<?php
}
catch (PDOException $e){}
}
catch (PDOException $e){}
?>
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<br>
<br>
<div id="map-loc" style="position: relative;background-color: rgb(229, 227, 223);overflow: hidden;-webkit-transform: translateZ(0px);width: 800px;height: 450px;margin-left: auto; margin-right:auto;"></div>
<br>
<br>il semblerai que si la google map est démarré trop tot, ça provoque mon soucis, c'est à dire un mauvais affichage de la carte.
par contre si je supprime la ligne
google.maps.event.addDomListener(window, 'load', initialize);et que je lance la fonction initialize() manuellement via la console de google après le chargement de la page, c'est nickel
J'ai essayé plusieurs variante de lancement
<script type="text/javascript">initialize();</script>en fin de page
<script type="text/javascript">google.maps.event.addDomListener(window, 'load', initialize);</script>en fin de page
<script>
$( document ).ready(function(){initialize()});
</script>en fin de page
mais toujours pareil, pas de message d'erreur du script, et un mauvais affichage.
Pourriez vous m'aider
Merci d'avance Flo
2 réponses
donc voici après avoir un peu cherché avec mon anglais approximatif.
Donc il s'agit d'un prb connu de compatibilité entre les onglets de bootstrap et google map.
Si la carte n'est pas sur l'onglet actif lors du chargement, les informations de hauteur et largeur sont pas pris en compte.
Donc il faut à la fin de votre page lancer un resize et un centrage
<script type="text/javascript">
setTimeout(reboot_map, 5000);
function reboot_map ()
{
google.maps.event.trigger(map, 'resize');
map.setCenter ({lat: 48.7233, lng: 2.3794});
};
</script>je pense qu'il est possible de faire mieux, au lieux de mettre une tempo, attendre le fin de chargement de la page, mais je ne sais pas encore faire, si une âme charitable pouvait m'aider.
alors j'avance un peu, sans trop comprendre
si ma google map n'est pas dans la tab-pane active de démarrage, ça plante,
par contre si elle y est, c'est nickel.
Donc je suppose un soucis avec les fonction onglet de jquery et google map.
Quelqu'un à t'il connaissance de la blague ainsi que d'une parade?