Google maps in DIV setting display property to inline

[pat]

I am not well conversant with most of the web technologies involved in
this. I thank you upfront for your patience.

1) I have a situation where I display search results (typically 10
entries per page). I provide a link at the bottom of each entry to
open google map to show the location (lat-long) of the entry. The
display property of the containing DIV is set to none. When the google
map is shown, I set the display property of the containing DIV to
inline.

This works fine, if the display property of the DIV is set to inline
before execution of google api calls. However, if the display
property is set to inline after the api calls the maps do not render
correctly, after the first click.

I have given 2 links (one where the display is set to inline before
google api call and the other after the calls)

<a href="http://property.odishagateway.com/maptest/
maphidden1.html">Before api calls</a>
<a href="http://property.odishagateway.com/maptest/
maphidden.html">After api calls</a>

Why would it not work in the second case?

2) Since I show the map for each entry in a separate DIV, I use a
different instance of the map and infoWindow. Would this be the
correct way of coding this?

Thank for your help

[Pil]

Generally:
If a block level element is set to display inline it's rendered as if
it were an inline element. It's no good idea to provide an inline
element for the map unless it's absolutely necessary. And even then I
wouldn't do it.

Do you have a special reason why you think you'd need an inline
element?

[pat]

There is no reason. It is perhaps my lack of proper understanding of
CSS. All I needed to do is to display the DIV when a user clicks on
the link. I tried setting the display to other block values and the
rendering still did not work. I does work however if the display
property is set before the map api calls

[Pil]

If you load the map in a hidden HTML element and afterwards display
it, the map doesn't know its size. So you have to call check resize

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

Maybe thats the problem...

[pat]

Thanks for the response. I tried the resize. It did not give me the
desired effect. I may have done something wrong. At this point I am
inclined to believe that it is better to set the display property
before calling the map api's to ensure proper rendering of the map.
This may also hold true for any other javascript related content
setting for a hidden div.

On Jul 7, 2:23 pm, Pil <wolf...@gmail.com> wrote:ooglea.com api base
urlge earning.

[Chad Killingsworth]

If you post a link to your map (as specified by the posting guidelines
for this group) we can see what the actual issue is.

Chad Killingsworth

[pat]

I used HTML to post the link, but they got messed up.

In any case the links are as following

http://property.odishagateway.com/maptest/maphidden1.html
http://property.odishagateway.com/maptest/maphidden.html

In the first case, I am setting the display property before the map
api calls and in the second case after.


On Jul 8, 4:44 am, Chad Killingsworth

[Chad Killingsworth]

I see the problem now. I assume you are setting both "display: inline"
and "float: left" to handle the IE6 double margin bug?

In either case, the solution is to trigger the resize event of the
map. You'll notice if you resize your browser window slightly, the
maps display properly. I would try something like the following code:

google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
google.maps.event.trigger(this, 'resize');
});

Chad Killingsworth

On Jul 8, 1:51 am, pat <rpattan...@gmail.com> wrote:
> I used HTML to post the link, but they got messed up.
>
> In any case the links are as following
>

> http://property.odishagateway.com/maptest/maphidden1.htmlhttp://property.odishagateway.com/maptest/maphidden.html

[pat]

Chad,

My apologies for the delay in responding to your solution. Pil had
made the same suggestion. I tried it. It works, but it moves the
map. I am not really familiar with the technologies used here. I am
not perhaps doing something right here.

I was also curious to know if the the api calls made to populate a
hidden div had adverse effects

Thank you for your time.

On Jul 8, 4:46 pm, Chad Killingsworth

<chadkillingswo...@missouristate.edu> wrote:
> I see the problem now. I assume you are setting both "display: inline"
> and "float: left" to handle the IE6 double margin bug?
>

> In either case, the solution is to trigger the resize event of thens

> map. You'll notice if you resize your browser window slightly, the
> maps display properly. I would try something like the following code:
>
> google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
>         google.maps.event.trigger(this, 'resize');
>
> });
>
> Chad Killingsworth
>
> On Jul 8, 1:51 am, pat <rpattan...@gmail.com> wrote:
>
> > I used HTML to post the link, but they got messed up.
>
> > In any case the links are as following
>

> >http://property.odishagateway.com/maptest/maphidden1.htmlhttp://prope...

[pat]

I have given below, the link for what I had tried

http://property.odishagateway.com/maptest/maphidden2.html

On Jul 8, 4:46 pm, Chad Killingsworth
<chadkillingswo...@missouristate.edu> wrote:

> I see the problem now. I assume you are setting both "display: inline"
> and "float: left" to handle the IE6 double margin bug?
>
> In either case, the solution is to trigger the resize event of the
> map. You'll notice if you resize your browser window slightly, the
> maps display properly. I would try something like the following code:
>
> google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
>         google.maps.event.trigger(this, 'resize');
>
> });
>
> Chad Killingsworth
>
> On Jul 8, 1:51 am, pat <rpattan...@gmail.com> wrote:
>
> > I used HTML to post the link, but they got messed up.
>
> > In any case the links are as following
>

> >http://property.odishagateway.com/maptest/maphidden1.htmlhttp://prope...

[Pil]

On Jul 11, 7:40 am, pat <rpattan...@gmail.com> wrote:
> I have given below, the link for what I had tried
>
> http://property.odishagateway.com/maptest/maphidden2.html

I tried your example locally. When

document.getElementById(targetElem).style.display='block';

is just the first instruction in displayMap() all seems to work as
expected.

Anyhow, I believe your example shows that under some circumstances
trigger "resize" doesn't do what it should. I believe that because the
tilesloaded event seems to work perfectly.

[Pil]

I think the best solution would be this

var tElem = document.getElementById(targetElem);
tElem.style.display = 'block';
var map = new google.maps.Map(tElem, myOptions);

In this case the map 'knows' its size when initialized, so no
tilesloaded or resize listener is needed.

[pat]

Pil,

I am doing the way you have mentioned and it works fine.

I was a bit uneasy since the it was breaking when the display property
was set later. Thanks for the advice and help.