Google Maps in hidden div
Using Google Maps JS API v3 for embeding Google Maps in website is really cool and simple. You can decide if you want to add some markers, what info they should have etc. But you probably know that already and this post isn’t about how great GMaps are ;o)
There are some cases, where you decide to hide div with map inside. Like in some kind of tabs. Unfortunately when the map is revealed it’s not complete and probably look something like that:
That’s not good. Where is the rest of my map?
You can find most basic example for displaying map with this API – of course – in google documentation. And this is where most people will start learning about it.
I will use similar example, but I will put my map, in really simple tab I created in jQuery. See online example of Google Maps hidden in tab. Don’t forget to check source code, before you continue.
As you can see in the example, when you click on “Tab Map” the map looks like it didn’t loaded completely. The code is no diffrent from the google example. I just hide div with map in tab.
What is the solution of this problem? The answer is:
google.maps.event.trigger(map, "resize");
Yep. That’s it. Well… almost. You need to know, where that thing should go ;o)
working solution for hidden map
I added below code to click event for my tab:
if($(this).attr('href')=='#tab2'){
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
}
I’m just checking if the user clicked link for tab with map. If yes, then I should trigger resize. BUT! Putting this piece of code it’s not enough. You need to move var map outside function initialize. That way from local one you changed it to global. If you don’t know the diffrence between global and local variable google it. It’s the basics. Don’t forget to remove var in initialize() function.
There is extra code for setting center, which resolve common problem after resizing. If you don’t set center, then your center will be in left top corner. You need to get coordinates for center BEFORE you resize your map.
Tada!
There is also another solution. You don’t have to initialize map on load. Why not initialize it when it’s needed?
second solution for hidden map
I removed onload event from body and just moved initialize() to on click event. That way map will load when it’s actually needed. Also it’s good to check if map has been already defined/assigned to avoid loading map on every click.
if($(this).attr('href')=='#tab2' && !map){
initialize();
}
jQuery.mobile and map in hidden div
If you use jQuery mobile, pages are load/shown with some transition. So to get this working you need to make sure that map resize is triggered AFTER the transition when div is fully visible. To do so just attach it to pageshow event like this:
$(document).on( "pageshow", function( event, data ){
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
});
and it should work like a charm. Just make sure it’s declared after map is initalized. If you initialize your map in .load event, then this should also be placed there.
Attention
This: google.maps.event.trigger(map, “resize”); really works. If it’s not working for you, you are doing something wrong or something else is not right. Either you can’t access the map object (make sure its in global scope) or you trigger this event too soon.
Thanks for your great article. But do you know how to solve the problem ( http://i.imgur.com/KuMbwGK.png )
If I put the map in responsive tab, the zoom icons are disappeared.
Can you send a fiddle or something with this issue? Maybe it disappears when you are testing responsiveness in your browser by resizing the window? The only idea I have is that it’s a simulation issue, and not actual issue on smaller devices.
Thanks for replying. I have figured it out.
I use Google Map API in my page not in an iframe, maybe some CSS caused it
The following CSS code solved the problem.
.gmnoprint img { width: none !important; mix-width: none !important }
Muchas gracias, problema resuelto!!!
Thanks a lot! It is also very helpfull when having troubles with responsive divs in the Internet Explorer!
Thanks so much for this.
If you use react-google-maps, you’ll want to do something like:
import { triggerEvent } from ‘react-google-maps/lib/utils’;
triggerEvent(map, ‘resize’);
Thanks for sharing JC :o)
Just looking for some solution, click on a link on stackoverflow and, ho surprise, yet the killer code (not a surprise finally).
So just Hi ^^
Lol. Yeah, that happens sometime. Glad to see you again ;o)
Thank you very much for this post. Very concise and to the point. Plus, it worked! Looked all over stackoverflow.com for a solution before finding this.
Hi! Somehow your solution works, somehow not and I am wondering why. I implemented your solution in my show-event: if($('#bss-googlemap').css('display') == 'none') { jQuery(this).next(".bss-googlemap-class").slideDown(500); var center = map.getCenter(); google.maps.event.trigger(map, "resize"); map.setCenter(center); } else { jQuery(this).next(".bss-googlemap-class").slideUp(500); } This however does not work. BUT: It works like this: if($('#bss-googlemap').css('display') == 'none') { jQuery(this).next(".bss-googlemap-class").slideDown(500); var center = map.getCenter(); alert(center); google.maps.event.trigger(map, "resize"); map.setCenter(center); } else { jQuery(this).next(".bss-googlemap-class").slideUp(500); } I added (just for debugging) an alert event after the map.getCenter() to see if there is any variable transmitted (which is). Suddenly, I can unhide and hide my map and it works everytime. So, I figure… Read more »
Sebastian, if you are adding console.log and it starts working, I would say there is something similar to race condition (even tho there isnt something like that in JS). So what can happen is that you are triggering a resize too early while the container isn’t visible yet. When you add console.log, you add a ms of delay before the resize trigger and thats why it’s working. You should trigger the “resize” even when you are sure that the container is visible and not a ms earlier. So in your case you need to add this resize even onComplete. like… Read more »
For those of you struggling with Bootstrap tabs, here is a solution to achieve the same effect using a different event:
$(‘a[data-toggle=”tab”]’).on(‘shown.bs.tab’, function (e){
var center = map.getCenter();
google.maps.event.trigger(map, “resize”);
map.setCenter(center);
});
In case you’re wondering why not a click event: in my case the click event seemed to be reserved by BS for switching tabs. Therefore it shouldn’t be a click event.
Hope this helps.
Thanks for sharing this with us! :o)
Thanks Mark, your solution is what, finally works for me. :)
Simply and perfect, you save my life. :((
Thank you so much!!! <3
Eliza you saved my day! Thanks!
Nice Job, I was struggling for a long time. :)
This is great solution. Helps me a lot.!
Excuse me, but where exactly do you place the "google.maps.event.trigger(map, "resize");" code? Thanks!
Same question.
You need to place it in where you have your action that will show google map. right after is visible. It always depend on your code, where you have a map and how you are showing it. Like everything in IT – it depends ;o)
Thanks Dude. Awesome work.
Btw, Can you please add this info? If someone want to acess map object :
var map_selector = '#map_canvas'
var map = $(map_selector).gmap3("get")
let me kiss you :* ;)
thanks
Thanks, Eliza and everyone!
You helped me a lot to resolve the "hidden google map" issue I had in my project.
Cheers and good luck!
Hello,
I've been struggling with this map issue for a long time, but I have another type of problems.
I fact, I don't have access to the 'map' variable (or object).
Thus, I can not fire the resize event on my map using "google.maps.event.trigger(map, "resize");".
Is there another way to do this without the need to access the map variable?
Thank you in advance,
Mira
After initializing the map and adding the code below it did work beautifully on jQueryMobile! The only change I performed as replacing $(document) for $("#PageName") in order to fire the event only when the desired page was shown.
$(document).on( "pageshow", function( event, data ){
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
});
you are awesome.. you saved me
How could i apply above jquery code to my jquery. I have vertical right blue button to show and hide map. Please i need your help @Eliza Witkowska
<script>
jQuery(function() {
var contentToggle = 0;
jQuery('.button_style').on('click', function() {
if (contentToggle == 0) {
jQuery('.hidden_content').animate({width: '0px'});
jQuery('.jclas').css('margin-left','auto');
jQuery('.jclas').animate({width:'97%'});
jQuery('.button_style').text('Show Map');
jQuery('.span12').animate({ width:'100%'});
contentToggle = 1;
}
else if (contentToggle == 1) {
jQuery('.hidden_content').animate({ width:'34.5%'});
jQuery('.hidden_content').css({'display':'block'});
jQuery('.jclas').animate({width:'100%'});
jQuery('.span12').animate({ width:'65%'});
jQuery("div").removeClass("first");
google.maps.event.trigger(map, "resize");
jQuery('.button_style').text('Hide Map');
contentToggle = 0;
}
})
});
</script>
I am trying all this from 2 weeks :( :(.
Please do some help
Thanks
Ritesh,
this https://aiocollective.com/demo/hidden_map_example.html is an example of the issue, not a solution. Did you read my post? See this https://aiocollective.com/demo/hidden_map_solution1.html it's working fine. If it's not working for you, provide jsfiddle or sth.
Hey there,
Your example is not working on my browser.
What browser that would be?
None of the solution is working even the example url you guys have provided has the same issue.. https://aiocollective.com/demo/hidden_map_example.html
Please help..!!
Thank you for solution.
good job tenz :o)
hey thanks,
finally… i just figure out.. !!!!! its working perfectly fine now .. thanks to you this is what i use
google.maps.event.addListener(map, "idle", function(){
var center = map.getCenter();
google.maps.event.trigger(map, 'resize');
map.setCenter(center);
});
after
marker.setMap(map);
cheerssss@-@
i am having the same issue, big time .. i tried putting your code in mine basically everywhere .. still no clue .. can you check this out .. as you can see i don't have function initialize();
// #b30 ==< li id=30>, when user click on list thirty it would show this location
$("#b30").on("click",function(){
var mapProp = {
center:new google.maps.LatLng(40.7321, -74.17321),
zoom:17,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
var mapProp = new google.maps.LatLng(40.7321, -74.17321)
var marker = new google.maps.Marker({
position: mapProp,
map: map,
icon: 'img/marker.png',
animation: google.maps.Animation.DROP
});
marker.setMap(map);
});
google.maps.event.addDomListener(window, 'load');
thanks
p.s. using this <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
Jessus! Haha.. I just lost 4 hours trying to figure out what the hell is wrong with the map.. I used Firefox Inspector, Firebug, checked every freakin div.. positioned absolute, relative, zindex, top, left, overflow, you name it. I have lots of hidden divs on the page created dynamically. And youu.. you… saved the day with the resize.. :))))). Thank you.
Thanks a lot man!
You saved a lot of my time.
Apparently I'm the only dummy one. I have tried your code everywhere in the js file and no luck. I have been searching online for a fix for weeks and still nothing. My project should be delivered on Sunday…I'm so scrolled :( Could you help me please? I really don't know what to do anymore! Sending parts of my html and js file. Thanks a million! var map=new google.maps.Map(document.getElementById("googleMap") ,mapProp); $('#myTab a').click(function (e) { e.preventDefault() $(this).tab('show') if($(this).attr('href')=='#wwhere'){ var center = map.getCenter(); google.maps.event.trigger(map, "resize"); map.setCenter(center); } }); function initialize(){ var mapProp = { center:new google.maps.LatLng(51.508742,-0.120850), zoom:5, mapTypeId:google.maps.MapTypeId.ROADMAP }; }; google.maps.event.addDomListener(window, 'load',… Read more »
Thanks!!! now I do not have to initialize Google map on every click event of hide div.
Excelent, Thanks!
With jquery mobile the problem probably is that wherever you put resize it triggers before page is shown, so there you won't see any effects.. But after binding it with pageshow (http://api.jquerymobile.com/pageshow/) you make sure it's triggered when that part of page is visible.
$( document ).on( "pageshow", function( event, data ){
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
});
Can you upload this html document somewhere and provide link to it? Do you see any errors in the console in developers tools or firebug?
Hey again,
Thank you for you time and help with this.
I created a blank html document and inputted the code from the jsfiddle link above.
The only lines I added that are not in your jsfiddle code are the two <script scr links above or else the accordion doesn't load.
Still no luck with getting this to work although I've stripped all the code back to the basics.
Ant B, Here you can see working code http://jsfiddle.net/Z2SWy/1/ I attached jquery, jquery mobile and maps as resources in jsfiddle. You should attach resize map to "expand" event – it's something like click i think, and not in "window.on(load)". You need to "reload" your map when it's visible, and even though all resources are loaded, map isnt necessary visible. Also variable "map" must be in global scope. When you define it with var inside function you're making it local variable, and after that you get "map is undefined" when you try center. Plus, not sure if you have it in… Read more »
Very weirdly every 3rd time I reload the website the map displays fine … very conufusing.
I've added the parts that I think are relevant (Hoping I didn't leave too much out): http://jsfiddle.net/Z2SWy/
If I comment out both the lines beginning with <script src= it removes all styling but the map does then fully load.
Ant B, can you show some code? Try to create some example of your code, maybe in jsfiddle.net. Sometimes it helps to exclude all unnecessary code to find what cause this. Version of jQuery wont tell me why this isn;t working for you. ;o)
This seems to be working for everyone except me. I'm not sure if I've missed something or something I'm doing is blocking the code from working? I'm using:
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
Thanks :D
Yep that did it. Cool monsters btw.
Thanks! This took me a while to fix
Wow, thanks =)
Thank you brother.
You helped me.
Thanks a lot! I tried by this way, but using Asynchronous Loading the API was easier for me.
https://developers.google.com/maps/documentation/javascript/tutorial#asynch
Nice man. You actually explained HOW and WHERE. Thanks so much. My headache is now gone. However, sometimes the map shows full and other times, there is some of it missing/grey area at the bottom, like if it's intermittent. How do I correct this?
Fantastic! Thanks a lot!
Thank you so much! Nice post
Thanks for sharing. I was stuck in the middle of a solution. Yours of saving the center before calling the resize made my day :-)
Thanks again,
Paolo