Map rendering incomplete inside modal window

[ej]

Hi.

I am experiencing a problem trying to display google maps on an inline
modal window. For some reason it is only displaying around 70% of the
map and the rest is greyed out. It works properly if I just display
the map without putting it inside the modal div. I know it said in
documentation that the parent div must not say display:none but i need
that atrribute to be in the parent div since its a modal that will
only pop out on click. Let me know if you need more information.





Thanks again
EJ

[ej]

Here is the link for the temp site.

http://www.arjaywireless.com/Temp/index2.html

If you click Location on the side, it should pop up a light box with
the map. But it's not centering or showing properly. Any ideas ?

[Rossko]

> http://www.arjaywireless.com/Temp/index2.html

When you build your map, the div containing it is hidden. The map is
built with no meaningful, because that is what the browser tells the
maps API about it.
Run the maps resize method when revealing it.
http://groups.google.com/group/google-maps-js-api-v3/search?group=google-maps-js-api-v3&q=map+in+hidden+div

[ej]

I read from the documentation something about --
google.maps.event.trigger(map, 'resize') .
But I dont know how to load or incorporate it inside my code to make
it work. I've been at it for 3 days in row now =[
Im not a pro about this so I really dont know how to trigger that
resize once div is loaded.
Any assistance as what to put in and where ?

Here's the part that loads the map:

<script type="text/javascript">
function initialize() {
var LatLng = new google.maps.LatLng(40.7471279, -73.6719630);
var settings = {
zoom: 14,
center: LatLng,
mapTypeControlOptions: {style:
google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
navigationControlOptions: {style:
google.maps.NavigationControlStyle.SMALL},
mapTypeId: google.maps.MapTypeId.ROADMAP };
var map = new google.maps.Map(document.getElementById("map_canvas"),
settings);
var companyLogo = new google.maps.MarkerImage('images/map_ar_sh.png',
new google.maps.Size(100,50),
new google.maps.Point(0,0),
new google.maps.Point(45,35)
);
var companyPos = new google.maps.LatLng(40.7471279, -73.6719630);
var companyMarker = new google.maps.Marker({position: companyPos, map:
map, icon: companyLogo,
title:"Arjay Wireless" });
}
google.maps.event.addDomListener(window,'load', initialize);

</script>

Thanks by the way !

On Jul 29, 4:22 pm, Rossko <ros...@culzean.clara.co.uk> wrote:
> >http://www.arjaywireless.com/Temp/index2.html
>
> When you build your map, the div containing it is hidden.  The map is
> built with no meaningful, because that is what the browser tells the
> maps API about it.

> Run the maps resize method when revealing it.http://groups.google.com/group/google-maps-js-api-v3/search?group=goo...

[Rossko]

> Im not a pro about this so I really dont know how to trigger that
> resize once div is loaded.

Neither do I. What do you do to make the map visible, what code runs
then? You need to call resize at that time. Something to do with the
click listener in your stack.js code.

> Here's the part that loads the map:

Not much point looking at the map initializing code, that loads it
into the hidden div.

[ej]

I included a copy of the script in stack.js that calls the pop up to
appear/disappear in the source code of the html.
This is holding me back so much on designing. And I dont have much
options =[

[Alex (Axle) Van Leyen]

I encountered something like this a while back, where I had two
different maps on different tabs. I worked my way around this by
recreating the map when I opened the tab. When I left the tab, I just
crumpled it up and tossed it into the proverbial recycle bin.

This would be your best bet:
In the function that handles the event of opening the modal window,
create your map right there and then. Then you can either delete it
when you close the modal box, or leave it there and just reuse the map
if the user opens the map view again.

Hope that helps.

[ej]

THAT IS JUST PURE GENIUS SUGGESTION !
Seconds right after I read that, and voila! It works !

Problem:
Since the map loads before the modal gets a defined size, it renders
size as zero.
Solution thanks to Rossko and Alex:
Here's what I did...

<a href="#?w=500" rel="popup2" class="poplight"
onClick="initialize()"><img src='images/location1.png'
title='Location' alt='images/location2.png' /></a>

I called the initilize() function when the pop up is clicked =]

Thanks for the help guys!!


On Jul 30, 2:39 pm, "Alex (Axle) Van Leyen" <alex.vanle...@gmail.com>
wrote:

> > > into the hidden div.- Hide quoted text -
>
> - Show quoted text -

[ej]

Lol btw. How do you trash the map after the pop up closes ? Coz
technically once it closes, it defines the map size again to be zero.
is there an unload function i can define ?

> > - Show quoted text -- Hide quoted text -

[Rossko]

> Lol btw. How do you trash the map after the pop up closes ? Coz
> technically once it closes, it defines the map size again to be zero.

I rather think that won't matter as such. Just as initializing the
map in the undefined div, failed to recognise when the div did get
proper size .... I think once set up, the map will ignore further
'hiding' of its div.
But where it would all go wrong is if the user resizes the whole
window, the map does automatically respond to that. If the map
happened to be hidden at that time, it would spoil it again.

Creating and trashing maps isn't very elegant; when all you need to do
is trigger the map resize event. To do that, you will need to have
your map object in global scope, which means paying attention to your
'var map' statements.

[Alex (Axle) Van Leyen]

Or we could totally ignore elegance for the sake of a proof of concept
to his boss, then make it "graceful" afterwards.

I believe there is an unloading function for the map, since I see it
in the examples with the "onunload" handler for the body tag. If not,
you could be like me and just put the following line in the handler
that closes your modal window:

delete map;

Call me a horrible person, but it works for single developer trying to
crunch out something quickly to impress the less technically inclined.

[ej]

>Creating and trashing maps isn't very elegant; when all you need to do
is trigger the map resize event. To do that, you will need to have
your map object in global scope, which means paying attention to your
'var map' statements

I understand what you mean. So basically I need to create a different
function, something like:
function(resizer) {
google.maps.event.trigger(map, 'resize');
}

But where/how should I call this function ? And is there a way I can
incorporate the initialize() function inside that so it will
theoretically 'resize' and then 'initialize' ?

Thanks again

[ej]

This is the part where it closes the modal. Where popup_block is the
class of the modal.

//Close Popups and Fade Layer
$('a.close, #fade').live('click', function() { //When clicking on the
close or fade layer...
$('#fade , .popup_block').fadeOut(function() {
$('#fade, a.close').remove();
}); //fade them both out

do i just insert -->#map_canvas <-- in there ? So the jQuery .remove
function empties that div ?

//Close Popups and Fade Layer
$('a.close, #fade').live('click', function() { //When clicking on the
close or fade layer...
$('#fade , .popup_block').fadeOut(function() {
$('#fade, a.close,--->> #map_canvas <--').remove();
}); //fade them both out

[ej]

Ok that didnt work. LOL.

Man I need tylenol.

[ej]

By the way, inserting
delete map;
inside the click function that closes the modal doesnt seem to work.
Even if i dont incude "var" while declaring map to make it global.

[Rossko]

> delete map;
> inside the click function that closes the modal doesnt seem to work.

What were you expecting it to do? Destroying the javascript object
won't necessarily un-render the map from screen. Shouldn't matter if
you are hiding its div anyway.

> Even if i dont incude "var" while declaring map to make it global.

That on its own may not make it global, if you do not 'var' it in
global scope

<script ... >

var map ; // not inside of any function at all.

function blah () {
map = whatever( some parms) ; // give the existing map object
some values
}

That would ensure 'map' is global in scope.

[ej]

Ok, just to make sure I got that...

<script>
var map ;

function callmap() {
map = whatever to call the map
}
function resizemap() {
google.maps.event.trigger(map, 'resize');
}

...

and on the body somewhere

... onClick="callmap()" > Map </a ....
... onClick="resizemap()" > Close Map </a ...


Is the event trigger enough to trigger a resize? Or do I need any
other listener on it ?

Thanks again!!

[Rossko]

>  ... onClick="resizemap()" > Close Map </a ...
>
> Is the event trigger enough to trigger a resize?

Not really ; the purpose of running
google.maps.event.trigger(map, 'resize');
is to inform the API that the div that the map lives in has changed
size ; the API will redraw the map as needed to fit its new home.
It doesn't "do" anything to change the size of the div it lives in,
that is up to you.

As written above, that certainly won't hide the map.

As an example of usage;
Initially build a map in a hidden div.
When the div is un-hidden, also trigger the map resize
functionality.
When hiding the div, no need to do anything else, its being hidden
so who cares if the map doesn't fit nicely.

Hiding, showing, or resizing the div container needs to be done by
code that you write or import (e.g. lightbox). The map won't show
itself or hide itself, just needs to be informed about changes.

So all you have to do is somehow stitch the map call to resize, into
the end of of whatever un-hides the div. That seems to complicated
with your fade effects etc., but that isn't a maps issue.