Google Maps Display:None Problem

Question

I'm trying to set up a Google map that will display when a link is clicked and then hide when another link is clicked. Everything works fine, except when I show the map from display:none, it doesn't display properly.

I read about using google.maps.event.trigger(map, 'resize'); but I'm not proficient enough with Javascript and JQuery to know how to add it in.

Here's the code I've been using:

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

Any help would be much appreciated,

Quintin

Community · Accepted Answer · 2020-06-20 09:12:55Z

72

I ran into this same problem today and eventually found this at the official Google Maps Javascript API V3 Reference:

Developers should trigger this event on the map when the div changes size: google.maps.event.trigger(map, 'resize') .

As display:none is equivalent to leaving the <div> with size 0, changing it to display:block becomes in fact a change of size, making therefore necessary to trigger the map resize event.

Worked like a charm for me.

UPDATE 2018-05-22

With a new renderer release in version 3.32 of Maps JavaScript API the resize event is no longer a part of Map class.

The documentation states

When the map is resized, the map center is fixed

The full-screen control now preserves center.

There is no longer any need to trigger the resize event manually.

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

google.maps.event.trigger(map, "resize"); doesn't have any effect starting from version 3.32

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Dec 21, 2011 at 20:08

vaelico

7615 silver badges2 bronze badges

This is all that's needed. No shenanigans, just one simple event trigger.
– Eric L.
Commented May 11, 2015 at 19:36
For the folks coming from angular js this could do the trick google.maps.event.trigger($scope.map.control.getGMap(), 'resize');
– Bikal Basnet
Commented Dec 5, 2015 at 19:58
This make my day, happy x-mas! btw, this is the right link to Google Reference: developers.google.com/maps/documentation/javascript/…
– candlejack
Commented Dec 24, 2017 at 11:21
Very good. If you are using a wrapper library, then you will need to find an equivalent solution to this. In my case, I am using VueGoogleMaps inside VueStrap Tabs. I fixed this with <tabs nav-style="tabs" @active="tabActive"> and an event listener tabActive(index) { this.$gmapDefaultResizeBus.$emit('resize') }
– Damien
Commented Feb 13, 2018 at 4:58

Add a comment |

Barney · Accepted Answer · 2015-06-17 23:31:36Z

This problems also happens with the jquery tabs, instead of applying "display:none", you can try hidding the map in this way:

Add the following styles when you are trying to hide the map, instead of using display:none

position: absolute;
left: -100%;

You can also add transitions like: transition: left 1s ease;

You can try with google event listener triggering it after you display the map:

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

Hi Javier,Is there any way to do it without using absolute positioning? Do you know how to implement google.maps.event.trigger(map, 'resize'); into my code? — Quintin Hobson, Commented Jan 15, 2011 at 16:25
Hi, I did some minor changes to your javascript and works fine for me, I put the map variable outside the function so it can be available for other functions (in your case the toggleDiv1 function) and then when your map div is displayed again, you can trigger the resize map event. I suggest you to do these things with jQuery so you can avoid writing extra code. — javiertoledos, Commented Jan 15, 2011 at 17:00
That seems to work for the display of the map, but for some reason it isn't centered where it should be. If you scroll to the left there is a red balloon where it should be centred. It works fine if make the map visible from the start. But something happens when the div goes for none to block, and it doesn't stay centered. Do you know why this might be? — Quintin Hobson, Commented Jan 15, 2011 at 17:24
I had no idea why this happen, but you can center again the map after you trigger the resize event with map.setCenter( latlng ). In your code you will need to place the var latlng outside the function. Btw sorry for my broken english. — javiertoledos, Commented Jan 15, 2011 at 18:16

Michal · Accepted Answer · 2011-01-16 01:24:13Z

The problem with size of the map is that it needs to know the size of the div that it is rendering to. At the moment you are initializing a map on document load when your div is hidden so the map cannot calculate its size correctly - to solve this problem you simply need to initialize it first time you show the div (not 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>

Hah awesome, thanks. No idea why your answer isn't the accepted one. — unexist, Commented Jun 28, 2011 at 18:48

chappjc · Accepted Answer · 2015-01-23 23:56:21Z

Just initialize the map when you want to display it. I had the same problem and solved it this way.

Remove this line:

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

And change the toggleDiv script this way:

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';  
   }  
}

Best approach. Only loads when the map is being show.
– José
Commented Jun 22, 2015 at 5:53 — José, Commented Jun 22, 2015 at 5:53

Barney · Accepted Answer · 2015-06-18 00:16:49Z

2

.map_container {display:none;}

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

edited Jun 18, 2015 at 0:16

Barney

2,3713 gold badges23 silver badges38 bronze badges

answered Feb 26, 2013 at 14:42

Webdesign7 London

7751 gold badge8 silver badges14 bronze badges

Add a comment |

ifaour · Accepted Answer · 2011-01-15 19:21:24Z

You indeed better using the off-left technique!
Here is my edits:

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

Example Link.

Thanks for another solution, I will try both methods and see which works best for what I'm trying to do — Quintin Hobson, Commented Jan 16, 2011 at 1:39

kaleazy · Accepted Answer · 2014-08-20 21:58:11Z

1

Pretty simple... by the time you initialize the map all of its outer divs have to already be displayed.

So just initialize the map at the very end:

setTimeout(function(){
    $mapsOuterDiv.slideToggle(700);
    setTimeout(function(){
        initializeGoogleMap();
    },300);
},300);

answered Aug 20, 2014 at 21:58

kaleazy

6,2422 gold badges49 silver badges52 bronze badges

Add a comment |

testCoder · Accepted Answer · 2014-10-30 14:23:14Z

1

Also i have found another solution. Sometimes you need to call refresh() on google maps object and map will be forced to resize.

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

answered Oct 30, 2014 at 14:23

testCoder

7,40513 gold badges59 silver badges77 bronze badges

Add a comment |

James Prout · Accepted Answer · 2012-03-08 12:50:43Z

0

document.getElementById('map_canvas').style.display = 'none';

This worked fine for me - don't know if that's because I'm hiding the canvas rather than the containing div....works fine in IE, Firefox and Chrome. Sure you can hide your container once the map canvas is hidden.

answered Mar 8, 2012 at 12:50

James Prout

111 bronze badge

Add a comment |

fedosov · Accepted Answer · 2014-04-04 16:52:05Z

I've been trying to animate my maps with no luck and finally came up with this:

CSS: We set the map wrapper with position:absolute; and visibility:hidden; because it has to have its normal dimensions to properly render.

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);
    });
});

M Ciel · Accepted Answer · 2016-11-21 04:19:24Z

0

Generally google.maps.event.trigger(map, 'resize') will refresh the map and thus append the code after whenever it is displayed, since the previous state of display is "none":

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

answered Nov 21, 2016 at 4:19

M Ciel

1999 bronze badges

Add a comment |

VMC · Accepted Answer · 2019-03-22 21:40:48Z

0

There is an example in the documentation: https://developers.google.com/maps/documentation/javascript/examples/control-replacement

And if you don't want the control to be located in the map area, just comment out the following line:

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

edited Mar 22, 2019 at 21:40

answered Mar 22, 2019 at 21:24

VMC

1,3884 gold badges16 silver badges32 bronze badges

Add a comment |

Dmitriy · Accepted Answer · 2011-08-02 13:48:25Z

-1

This code work right (using 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;
  });
});

answered Aug 2, 2011 at 13:48

Dmitriy

71 bronze badge

Add a comment |

Collectives™ on Stack Overflow

Google Maps Display:None Problem

13 Answers 13

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

13 Answers 13

Your Answer

Sign up or log in

Post as a guest

Linked

Related