keep showing old markers after Gmaps.loadMaps

[aklein-dex]

Hi, I'm using Jquery tabs. I have 2 tabs with a map in each tab. When the page is generated, markers are added to each map.

On the first tab, when I update the markers for the first map using Ajax, I can see the new markers! (everything is perfect so far) : Gmaps.map_tab1.replaceMarkers(<%= raw(@new_markers) %>);

But if I open the second tab, and then come back to the first tab, then I see the old markers on the first map. Note, that at each time the user changes tab, I'm doing : Gmaps.loadMaps(), because otherwise the map doesn't look good.

So I have a feeling, that Gmaps.loadMaps() loads the first set of markers despite the fact that it was replaced by a new set.

Am I doing something wrong ?

[apneadiving]

Weird... What's inside Gmaps.map_tab1.markers before and after you replace markers?

[aklein-dex]

To answer your question, markers before and after I replace them have the expected value.

In fact, when I look at the source code of my view, I can see that :

So each time I call Gmaps.loadMaps(), it calls "Gmaps.load_map_tab1", and so it shows the original markers. Even if I call replaceMarkers with new markers, it doesn't update this function. That's why it always returns the original markers.

The question is : is Gmaps.loadMaps should load the initial markers, or should it load the latest markers ? (now, it loads the initial markers).

[apneadiving]

Oh yep, Gmaps.load_map_tab1 is defined in your browser so it couldn't change and it's the function triggered when you do Gmaps.loadMaps.

So obviously you got the old markers...

Show me your Gmaps.load_map_tab1 function and I'll tell you what's necessary to trigger yourself.

[aklein-dex]

(thanks for your quick replies) Here is the load_map_tab1 function:

Gmaps.load_map_tab1 = function() { Gmaps.map_tab1.map_options.id = "map_tab1"; Gmaps.map_tab1.map_options.detect_location = false; Gmaps.map_tab1.map_options.center_on_user = false; Gmaps.map_tab1.initialize(); Gmaps.map_tab1.markers = [ .. markers.. ]; Gmaps.map_tab1.create_markers(); Gmaps.map_tab1.adjustMapToBounds(); Gmaps.map_tab1.callback(); };

I was thinking to do the following : When the user changes tab : Gmaps.loadMaps() Gmaps.map_tab1.replaceMarkers( )

[apneadiving]

When the user changes tab :

Gmaps.map_tab1.initialize();
Gmaps.map_tab1.create_markers();
Gmaps.map_tab1.adjustMapToBounds();
Gmaps.map_tab1.callback(); //if you have one callback

[apneadiving]

Please don't forget to close the issue if it fits

[aklein-dex]

sorry it was "golden week" in Japan (holiday).

Thanks, I added the lines from your previous message.

I also added: console.log(Gmaps.map_user.markers) and each time I change tab, I can see the good markers value. But (yes there is a "but") there is a strange behavior. When the page load, I can see "tab 1" with good markers. Then I click on "tab 2" and I can see the new markers. Then I click on "tab 1" again and I can see the original markers (so far so good) But when I click again on "tab 2", no markers are shown on the map (despite the fact that console.log(Gmaps.map_user.markers) shows the good values). Even if I click on "tab 1" again, no markers are shown.

Do you have any idea ?

[aklein-dex]

So, in fact, I'm using just one map. When the user changes tab, I change the div of the map to appear to the selected tab. I called the map "map_user".

When the user changes tab :

append the map to a visible "div"

$("#here").append($("#my_map"))

replace the markers

Gmaps.map_user.replaceMarkers(new_markers)

loop through the markers to set the serviceObject to null

for i in [0...Gmaps.map_user.markers.length] Gmaps.map_user.markers[i].serviceObject = null

create markers

Gmaps.map_user.create_markers()

And now it's working. Each time the user changes tab, I can see all the markers.