I'm trying to put a google map in a collapsible set in a jquery mobile site I'm working on. The map skips when moved in the div but outside the div it behaves normally. Does anyone have a solution for this problem?
The code looks like this and it's inside a collapsible-set:
Google maps will not render unless it knows the canvas' offsetWidth and offsetHeight. Which means that the canvas must have been rendered with a width and height before calling the map. Usually triggering the resize event helps. But the initial map call must have the canvas' offsetWidth and offsetHeight. So I'm not sure if this will work with collapsible div's.
Hi. i think i found a solution. There is a constant class name into collapsible set elements headers called "ui-collapsible-heading" i've bound a "click" event to it. When you click the heading, it setups google map with no errors. Sorry if i couldnt explain it clearly, i'm not very good at english :) i've shared sample code to explain it clearly. You can save the codes into a document and test it.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">