web-dev-qa-db-fra.com

Affichage Google Maps: Aucun Problème

J'essaie de configurer une carte Google qui s'affiche lorsqu'un clic sur un lien est affiché, puis masquée lorsqu'un autre lien est cliqué. Tout fonctionne bien, sauf lorsque j'affiche la carte: aucune, elle ne s'affiche pas correctement.

J'ai lu sur l'utilisation de google.maps.event.trigger (map, 'resize'); mais je ne suis pas assez compétent avec Javascript et JQuery pour savoir comment l'ajouter.

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 très appréciée,

Quintin

javascriptjquerygoogle-maps
36
Quintin Hobson

Ce problème se produit également avec les onglets jquery. Au lieu d'appliquer "display: none", vous pouvez essayer de masquer la carte de cette manière:

Ajoutez les styles suivants lorsque vous essayez de masquer la carte au lieu d'utiliser display: none

position: absolute;
left: -100%;

Vous pouvez également ajouter des transitions telles que: transition: soulagement des 1 à gauche;

Vous pouvez essayer avec google event listener de le déclencher après avoir affiché 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>
41
javiertoledos

J'ai rencontré ce même problème aujourd'hui et je l'ai finalement trouvé au niveau officiel Google Maps Javascript API V3 Reference :

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

Comme display:none équivaut à laisser le <div> de taille 0, le changer en display:block devient en fait un changement de taille, ce qui rend nécessaire de déclencher l'événement de redimensionnement de la carte. 

A fonctionné à merveille pour moi.

UPDATE 2018-05-22

Avec une nouvelle version de rendu dans la version 3.32 de l'API JavaScript de Maps, l'événement resize ne fait plus partie de la classe Map.

La documentation indique

Lorsque la carte est redimensionnée, le centre de la carte est fixe

  • Le contrôle plein écran conserve maintenant le centre.

  • Il n'est plus nécessaire de déclencher l'événement de redimensionnement 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

71
vaelico

Le problème avec la taille de la carte est qu’elle a besoin de connaître la taille de la div à laquelle elle rend le rendu. Au moment où vous initialisez une carte au chargement du document lorsque votre div est masquée, la carte ne peut pas calculer correctement sa taille. Pour résoudre ce problème, il vous suffit de l'initialiser pour la première fois que vous affichez la div (pas en charge).

<!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>
12
Michal

Il suffit d’initialiser la carte lorsque vous souhaitez l’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 changez le script toggleDiv 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';  
   }  
}
3
user2559310

.map_container {display: none;} 

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

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

// gmaps - instance of particular map ...
gmaps.refresh()
1
testCoder

Il vaut mieux utiliser la technique off-left !
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 .

1
ifaour

Assez simple ... lorsque vous initialisez la carte, toutes ses divisions extérieures doivent déjà être affichées.

Donc, initialisez la carte à la toute fin:

setTimeout(function(){
    $mapsOuterDiv.slideToggle(700);
    setTimeout(function(){
        initializeGoogleMap();
    },300);
},300);
1
kaleazy
document.getElementById('map_canvas').style.display = 'none';

Cela a bien fonctionné pour moi - je ne sais pas si c'est parce que je cache la toile plutôt que la div qui la contient .... fonctionne bien dans IE, Firefox et Chrome. Bien sûr, vous pouvez masquer votre conteneur une fois le fond de carte masqué.

0
James Prout

J'ai essayé d'animer mes cartes sans succès et j'ai finalement trouvé ceci:

CSS: Nous définissons le wrapper de la carte avec position:absolute; et visibility:hidden; car il doit avoir ses dimensions normales pour 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);
    });
});
0
Mario

En règle générale, google.maps.event.trigger (map, 'resize') va actualise la carte et ajoute ainsi le code après chaque affichage, car son état d'affichage précédent est "none":

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