Google Maps Affichage:Aucun Problème

Je suis en train de configurer une carte Google map qui s'affiche quand un lien est cliqué, et ensuite se cacher quand un autre lien est cliqué. Tout fonctionne bien, sauf quand je montre la carte de l'affichage:aucun, il ne s'affiche pas correctement.

J'ai lu sur l'utilisation de google.cartes.de l'événement.déclencheur(carte, 'redimensionner'); mais je ne suis pas assez habile avec Javascript et JQuery pour savoir comment l'ajouter dans.

Voici le code que j'ai utilisé:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
<html>
<head>
<title></title>
<style type="text/css">
#viewmap {
position:relative;
width:944px;
float:left;
display:none;
}
#hidemap {
position:relative;
width:944px;
float:left;
display:block;
}
#map_canvas {
position:relative;
float:left;
width:944px;
height:300px;
}
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?v=3.2&sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(-27.999673,153.42855);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
}
};
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
var contentString = 'blah';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: latlng, 
map: map
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<script type="text/javascript">
function toggleDiv1(viewmap){
if(document.getElementById(viewmap).style.display == 'block'){
document.getElementById(viewmap).style.display = 'none';
}else{
document.getElementById(viewmap).style.display = 'block';
}
}
function toggleDiv2(hidemap){
if(document.getElementById(hidemap).style.display == 'none'){
document.getElementById(hidemap).style.display = 'block';
}else{
document.getElementById(hidemap).style.display = 'none';
}
}
</script>
</head>
<body>
<div id="viewmap">
<a href="#" onmousedown="toggleDiv1('viewmap'); toggleDiv2('hidemap');">Hide map</a>
<div id="map_canvas"></div>
</div>
<div id="hidemap">
<a href="#" onmousedown="toggleDiv1('viewmap'); toggleDiv2('hidemap');">View map</a>
</div>
</body>
</html>

Toute aide serait grandement appréciée,

Quintin

InformationsquelleAutor Quintin Hobson | 2011-01-15
  1. 42

    Ce problèmes se produit également avec les onglets jquery, au lieu de demander "display:none", vous pouvez essayer de se faufiler la carte de cette façon:

    Ajouter les styles suivants lorsque vous essayez de cacher la carte, au lieu d'utiliser display:none

    position: absolute;
left: -100%;

    Vous pouvez également ajouter des transitions comme: transition: à gauche 1s ease;

    Vous pouvez essayer avec google écouteur d'événement de déclenchement après l'affichage de la carte:

    <script type="text/javascript">
var map; //I placed here the map variable so other functions can see it.
var latlng = new google.maps.LatLng(-27.999673,153.42855); 
//in order to center again the map...
function initialize() {
var myOptions = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
}
};
map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
var contentString = 'blah';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: latlng, 
map: map
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<script type="text/javascript">
function toggleDiv1(viewmap){
if(document.getElementById(viewmap).style.display == 'block'){
document.getElementById(viewmap).style.display = 'none';
}else{
document.getElementById(viewmap).style.display = 'block';
//here is where your map is being displayed again, try here
//to trigger the resize event.
google.maps.event.trigger(map, 'resize');
map.setCenter(latlng);
}
}
function toggleDiv2(hidemap){
if(document.getElementById(hidemap).style.display == 'none'){
document.getElementById(hidemap).style.display = 'block';
}else{
document.getElementById(hidemap).style.display = 'none';
}
}
</script>
    • Salut Javier,Est-il un moyen de le faire sans utiliser le positionnement absolu? Savez-vous comment mettre en œuvre google.cartes.de l'événement.déclencheur(carte, 'redimensionner'); dans mon code?
    • Salut, j'ai fait quelques modifications mineures à votre javascript et fonctionne très bien pour moi, j'ai mis la carte de la variable en dehors de la fonction de sorte qu'il peut être disponible pour d'autres fonctions (dans votre cas, la toggleDiv1 fonction) et puis quand votre carte div s'affiche de nouveau, vous pouvez déclencher le redimensionner la carte de l'événement. Je vous suggère de faire ces choses avec jQuery afin de vous éviter d'écrire du code supplémentaire.
    • Qui semble fonctionner pour l'affichage de la carte, mais pour quelque raison il n'est pas centré où il devrait être. Si vous faites défiler vers la gauche, il y a un ballon rouge, où il doit être centrée. Il fonctionne très bien faire si la carte visible dès le début. Mais quelque chose se passe quand la div en va pour ne rien bloquer, et il ne reste pas centré. Savez-vous pourquoi cela pourrait être?
    • Je n'avais aucune idée de pourquoi cela arrive, mais vous pouvez centrer à nouveau la carte après avoir déclencher l'événement de redimensionnement de la carte.setCenter( latlng ). Dans votre code, vous devrez placer le var latlng en dehors de la fonction. Btw, désolé pour mon mauvais anglais.
    • Merci Javier, qui fonctionne bien maintenant
    • Cela m'a aidé à charges merci.
    • cela a fonctionné à merveille, très bon travail! 🙂
    • sshhh todo un pro el señor toledo jajajaja
    • Comme je suis en utilisant les limites de la carte de google pour récupérer mes données, j'ai juste besoin de mettre la bonne hauteur et la largeur de la carte google sur le dessus de la déplacer vers la gauche -100%

    InformationsquelleAutor javiertoledos
  2. 71

    J'ai rencontré ce même problème aujourd'hui et a finalement trouvé ce à l'officiel Google Maps Javascript API V3 de Référence:

    Les développeurs doivent déclencher cet événement sur la carte lorsque la div changements
    taille: google.maps.event.trigger(map, 'resize') .

    Comme display:none est équivalent à quitter le <div> avec une taille de 0, le changer pour display:block devient en fait un changement de taille, ce qui, par conséquent, nécessaire pour déclencher la carte de l'événement de redimensionnement.

    A fonctionné comme un charme pour moi.

    Mise à JOUR 2018-05-22

    Avec un nouveau moteur de rendu de presse dans la version 3.32 des Maps JavaScript API de l'événement resize n'est plus une partie de Map classe.

    La documentation états

    Lorsque la carte est redimensionné, le centre de la carte est fixé

    • Le plein écran de contrôle conserve désormais centre de.

    • Il n'est plus besoin de déclencher l'événement resize manuellement.

    source: https://developers.google.com/maps/documentation/javascript/new-renderer

    google.maps.event.trigger(map, "resize"); n'a aucun effet à partir de la version 3.32

    • C'est tout ce qui est nécessaire. Pas de manigances, juste un simple événement déclencheur.
    • Pour les gens venant de angular js cela pourrait faire l'affaire google.maps.event.trigger($scope.map.control.getGMap(), 'resize');
    • Cela devrait être la bonne réponse.
    • Ce make my day, happy x-mas! btw, c'est le bon lien vers Google Référence: developers.google.com/maps/documentation/javascript/...
    • Très bon. Si vous utilisez un wrapper de la bibliothèque, alors vous aurez besoin de trouver une solution équivalente à cela. Dans mon cas, j'utilise VueGoogleMaps à l'intérieur VueStrap Onglets. J'ai corrigé cela avec <tabs nav-style="tabs" @active="tabActive"> et un écouteur d'événement tabActive(index) { this.$gmapDefaultResizeBus.$emit('resize') }
    InformationsquelleAutor vaelico
  3. 12

    Le problème avec la taille de la carte, c'est qu'il a besoin de savoir la taille de la div qu'il est rendu. Au moment de l'initialisation d'une carte sur le document de la charge lors de votre div est masqué si la carte ne peut pas calculer correctement la taille - pour résoudre ce problème, il vous suffit de l'initialiser le temps de vous montrer la div (pas onload).

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
<html>
<head>
<title></title>
<style type="text/css">
#viewmap {
position:relative;
width:944px;
float:left;
display:none;
}
#hidemap {
position:relative;
width:944px;
float:left;
display:block;
}
#map_canvas {
position:relative;
float:left;
width:944px;
height:300px;
}
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?v=3.2&sensor=false">
</script>
<script type="text/javascript">
//your global map object
var map = null;
function initialize() {
var latlng = new google.maps.LatLng(-27.999673,153.42855);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
}
};
map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
var contentString = 'blah';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: latlng, 
map: map
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
function toggleDiv1(viewmap){
if(document.getElementById(viewmap).style.display == 'block'){
document.getElementById(viewmap).style.display = 'none';
}else{
document.getElementById(viewmap).style.display = 'block';
//check if map object exists (it is created by you initialize function), if not initialize it
if (!map) {
initialize();
}
}
}
function toggleDiv2(hidemap){
if(document.getElementById(hidemap).style.display == 'none'){
document.getElementById(hidemap).style.display = 'block';
}else{
document.getElementById(hidemap).style.display = 'none';
}
}
</script>
</head>
<body>
<div id="viewmap">
<a href="#" onmousedown="toggleDiv1('viewmap'); toggleDiv2('hidemap');">Hide map</a>
<div id="map_canvas"></div>
</div>
<div id="hidemap">
<a href="#" onmousedown="toggleDiv1('viewmap'); toggleDiv2('hidemap');">View map</a>
</div>
</body>
</html>
    • Ah ok, yer qui fait sens. Merci pour la réponse.
    • Ah génial, merci. Aucune idée de pourquoi votre réponse n'est pas la accepté de une.
    InformationsquelleAutor Michal
  4. 3

    Initialiser la carte lorsque vous souhaitez afficher. J'ai eu le même problème et résolu de cette façon.

    Supprimer cette ligne: 

    google.maps.event.addDomListener(window, 'load', initialize);

    Et modifier le toggleDiv script de cette façon: 

    function toggleDiv1(viewmap){  
if(document.getElementById(viewmap).style.display == 'block'){  
document.getElementById(viewmap).style.display = 'none';  
}else{  
document.getElementById(viewmap).style.display = 'block';  
initialize();  
}  
}  
function toggleDiv2(hidemap){  
if(document.getElementById(hidemap).style.display == 'none'){  
document.getElementById(hidemap).style.display = 'block';  
}else{  
document.getElementById(hidemap).style.display = 'none';  
}  
}
    • Meilleure approche. Charge uniquement lorsque la carte est en cours de spectacle.
    InformationsquelleAutor user2559310
  5. 2

    .map_container {display:none;} 

    $('.show_hide').click(function(){
$('.map_container').toggle({
complete:function (){
google.maps.event.trigger(map, 'resize');
},
duration:'slow'
});
})
    InformationsquelleAutor Webdesign7 London
  6. 1

    Vous, en effet, de mieux utiliser le hors-gauche technique!

    Voici mes modifications: 

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
<html>
<head>
<title></title>
<style type="text/css">
#viewmap {
position:relative;
width:944px;
float:left;
}
#hidemap {
position:relative;
width:944px;
float:left;
}
#map_canvas {
position:relative;
float:left;
width:944px;
height:300px;
}
.good-bye {
position: absolute !important;
left: -10000px !important;
}
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?v=3.2&sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(-27.999673,153.42855);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
}
};
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
var contentString = 'blah';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: latlng,
map: map
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<script type="text/javascript">
function toggleDiv1(viewmap){
if(hasClass(document.getElementById(viewmap), 'good-bye'))
removeClass(document.getElementById(viewmap), 'good-bye');
else
addClass(document.getElementById(viewmap), 'good-bye');
return;
}
function toggleDiv2(hidemap){
if(hasClass(document.getElementById(hidemap), 'good-bye'))
removeClass(document.getElementById(hidemap), 'good-bye');
else
addClass(document.getElementById(hidemap), 'good-bye');
return;
}
//http://snipplr.com/view/3561/addclass-removeclass-hasclass/
function hasClass(ele,cls) {
return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
}
function addClass(ele,cls) {
if (!this.hasClass(ele,cls)) ele.className += " "+cls;
}
function removeClass(ele,cls) {
if (hasClass(ele,cls)) {
var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
ele.className=ele.className.replace(reg,' ');
}
}
</script>
</head>
<body>
<div id="viewmap" class="good-bye">
<a href="#" onmousedown="toggleDiv1('viewmap'); toggleDiv2('hidemap'); return false;">Hide map</a>
<div id="map_canvas"></div>
</div>
<div id="hidemap">
<a href="#" onmousedown="toggleDiv1('viewmap'); toggleDiv2('hidemap');">View map</a>
</div>
</body>
</html>

    Exemple De Lien.

    • Merci pour une autre solution, je vais essayer les deux méthodes et de voir ce qui fonctionne le mieux pour ce que je suis en train de faire
    InformationsquelleAutor ifaour
  7. 1

    Assez simple... par le temps de l'initialisation de la carte la totalité de son enveloppe extérieure divs ont d'ores et déjà être affiché.

    Donc initialiser la carte à la fin: la

    setTimeout(function(){
$mapsOuterDiv.slideToggle(700);
setTimeout(function(){
initializeGoogleMap();
},300);
},300);
    InformationsquelleAutor kaleazy
  8. 1

    J'ai aussi trouvé une autre solution. Parfois, vous devez appeler refresh() sur google maps objet et la carte sera forcé de les redimensionner.

    //gmaps - instance of particular map ...
gmaps.refresh()
    InformationsquelleAutor testCoder
  9. 0

    Ce code de travail à droite (à l'aide de jQuery 1.2.6):
    Css: #gog-map{position:absolute; visibility:hidden;}

    $(document).ready(function() {
$('a#link').click(function() {
if ($('#gog-map').is(':visible')){
$('#gog-map').slideUp('slow');            
} else{
$('#gog-map').slideDown('slow');
$("#gog-map").css('visibility','inherit');
$("#gog-map").css('position','relative');
}
return false;
});
});

    InformationsquelleAutor Dmitriy
  10. 0
    document.getElementById('map_canvas').style.display = 'none';

    Cela a bien fonctionné pour moi - je ne sais pas si c'est parce que je me cache la toile plutôt que la div contenant....fonctionne très bien sous IE, Firefox et Chrome. Bien sûr, vous pouvez masquer votre conteneur une fois la carte de la toile est caché.

    InformationsquelleAutor James Prout
  11. 0

    J'ai essayé d'animer mes cartes avec pas de chance et enfin est venu avec cette:

    CSS:
    Nous avons mis la carte wrapper avec position:absolute; et visibility:hidden; car il doit avoir ses normal dimensions à restituer correctement.

    JavaScript:

    $(document).ready(function() 
{
//We then run this function only once per page load. It places out map back in the document flow but hides it before it starts to toggle its height.
$("#mapBtn").one("click", function() 
{
$("#myMap").hide(); 
$("#myMap").css("visibility", "inherit");
$("#myMap").css("position", "relative");
});
//And now we toggle away nicely
$("#mapBtn").click(function() 
{
$("#myMap").slideToggle(400);
});
});
    InformationsquelleAutor Mario
  12. 0

    Généralement google.cartes.de l'événement.déclencheur(carte, 'redimensionner') sera actualiser la carte et donc ajouter le code après chaque fois qu'il est affiché, depuis l'état précédent de l'écran est "aucun":

        document.getElementById(hidemap).style.display = 'block'; 
Generally google.maps.event.trigger(map, 'resize')
    InformationsquelleAutor M Ciel
  13. 0

    Il y a un exemple dans la documentation: https://developers.google.com/maps/documentation/javascript/examples/control-replacement

    Et si vous ne voulez pas le contrôle doit être situé dans la zone de la carte, juste en commentaire la ligne suivante:

    map.controls[google.maps.ControlPosition.RIGHT_TOP].push(fullscreenControl);
    InformationsquelleAutor Max Damage