current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free.
up vote 1 down vote favorite
1

My site is utilizing the Google Maps API, latest version, via Javascript. My site also loads it pages via AJAX. I'm listening for internal link click events and then loading the page, parsing the DOM, selecting what I want via jQuery and inserting it into a div.

When I load my contact page (which contains the map), the map loads fine. In fact, even if I load another page, and then click the contact link (causing the contact page to load via AJAX), the map loads fine. Once I view the contact page, if I navigate to another page (via AJAX), and then return to the contact page by clicking the contact link (via AJAX), then map only shows one square, and the remainder of the map does not load. All of the Javascript to initiate and setup the map is within the contact page code which gets loaded via AJAX each time.

I have tried using the Google Maps event method to trigger a resize, but that has done nothing.

Any ideas?

share|improve this question
1  
could you post a link to a demo? –  Andy Jones Aug 12 '13 at 19:17
    
Unfortunately, no. I know that makes it more difficult. –  Chris Aug 12 '13 at 19:38

1 Answer 1

up vote 2 down vote accepted

This is a question of timing. The Google.maps "one-tile" condition is caused by trying to load initialise the map in a div that's rendered but hidden, or not yet rendered.

Another issue that you may not have considered is that each map load eats into your Goggle quota, which is potentially costly. With a "single-page" site design you can minimise the number of map loads by shuffling the map onto the main host page (but hidden) then back onto the map page if it is re-selected. This is fiddly to achieve and may test your javascript ability. I'm afraid I don't know of a demo.

share|improve this answer
1  
This was the issue. It is weird however, because the first time it loads the map, the div is in the same state. Either way, triggering resize on the map after the div is visible solved the issue. –  Chris Aug 12 '13 at 21:10

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.