Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Keep a Google Maps v3 Map hidden, show when needed

Is there a way of preventing a Google Maps (JS, v3) map being displayed from the get-go? I'm doing some pre-processing and would like to show my 'Loading' spinner until everything is good to go (more eloquently put, hide the map -- e.g. the container div – until all pre-processing is complete – at which point, show the map).

Hooking up the map's idle event doesn't help that much, since the map is already displayed when this event hits.

I know that the container div gets inline-styled by GMaps after loading, my first idea was to clear out the style attribute (whilst listening to the idle event), but it would be interesting to see if there is a way of creating the map and not displaying it until all pre-processing is done.

Maybe by using an argument to the new google.maps.Map constructor, or a MapOption ?

Any thoughts on this?

Thank you in advance!

like image 958
Dr1Ku Avatar asked Jul 29 '10 08:07

Dr1Ku


People also ask

Can you hide Google Maps?

You can now go Incognito when using Google Maps. Google has launched an Incognito Mode feature that lets you go MIA while using the Maps app. In other words, you can use Google Maps without letting others see where you're going, which can be useful if you're birthday shopping or planning a surprise get-together.

How do I hide map details on Google Maps?

Hover your cursor over the box and wait until more options appear. Click “More” to open the Map Details menu. Under “Map Type,” you'll see a checked box next to “Labels.” Uncheck it to remove all labels.

How do I lock a Google map?

First, you have to add the “Directions widget” to the Lock Screen. Go to the widgets area, scroll down to the bottom and click “Edit”. Add “Directions” as a widget and hit “Done”. Now Google Maps should show on your Lock Screen.

How do I unhide a map in Google Maps?

Tap the three dots on the top-right corner of their location details and pick “Hide [Name] From Map.” To unhide a contact, tap the contact at the bottom of your location sharing list. When the message appears at the top letting you know that they're hidden, tap “Unhide.”


2 Answers

Also remember to call:

google.maps.event.trigger(map, 'resize'); 

if you have changed the size of the <div>. A display:none <div> has no size.

like image 162
skarE Avatar answered Oct 09 '22 09:10

skarE


Or you could just hide it like with css visablility or css opacity.

$("#GoogleMap").css({ opacity: 0, zoom: 0 }); initialize();  google.maps.event.addListener(map,"idle", function(){       $('#Loader').hide();      $("#GoogleMap").css({ opacity: 1, zoom: 1 }); });  
like image 43
Tom Avatar answered Oct 09 '22 07:10

Tom