Google Map v3, MarkerClusterer & jQuery on Chrome not working

StackOverflow https://stackoverflow.com/questions/6081940

Question

FIXED : SEE BELOW

ok. so here's my app.

http://libwiki.heroku.com/libraries

if you view it with Firefox or Safari, it displays correctly. The objective is to display list of libraries in Australia on Google map. I also put "MarkerClusterer" plugin on top, so that markers are clustered.

when I view the site in Chrome, however, markers are not being displayed.

so after looking through the code, I found where Chrome is not responding correctly. here's the snippet.

function get_libraries()
{
  if( markerCluster != null ) { 
    markerCluster.clearMarkers(); 
  }

  get_boundaries();
  $.post( "/get_libs", { top_lat:top, right_long:right, 
                         bottom_lat:bottom, left_long:left },
                         function(data)
                         {
                           alert('hello??');
                         }
  );
}

in the get_boundaries() method, I grab the boundaries of the map, which I pass to one of my rails action so that I only get the libraries WITHIN the given boundaries.

anyway. the alert "hello" message displays correctly in FF and Safari, but in Chrome, there is no message.

why is this so? is there something else I need to do to cater for Chrome?

I've already done my search and found a similar question here (http://stackoverflow.com/questions/4086837/markerclusterer-not-working-only-in-webkit-chrome-and-safari-fine-in-firefox), and I applied the suggestion, but there was no success.

EDIT--

ok. i tried Trott's suggestion, but to no avail. I just compared the output of Rails console between Firefox and Chrome.

On Firefox, I get something like below

++++++++++++++++++++++++++++++++ Started GET "/libraries" for 127.0.0.1 at 2011-05-23 20:42:30 +1000 Processing by LibrariesController#index as HTML Rendered libraries/_header.rhtml (0.7ms) Rendered libraries/_footer.rhtml (0.3ms) Rendered libraries/index.html.erb within layouts/libraries (5.7ms) Completed 200 OK in 9ms (Views: 8.2ms | ActiveRecord: 0.0ms)

Started POST "/get_libs" for 127.0.0.1 at 2011-05-23 20:42:31 +1000 Processing by LibrariesController#get_libs as Parameters: {"top_lat"=>"-3.8857201725875936", "right_long"=>"159.3671875", "bottom_lat"=>"-46.20993271642981", "left_long"=>"106.6328125"} Library Load (1238.5ms) SELECT "libraries".* FROM "libraries" WHERE (latitude < -3.8857201725875936 AND latitude > -46.20993271642981 AND ((longitude > 106.6328125 AND longitude < 159.3671875) OR (longitude > 106.6328125 AND longitude > 159.3671875 AND longitude > 0 AND 106.6328125 > 159.3671875) OR (longitude < 106.6328125 AND longitude < 159.3671875 AND longitude < 0 AND 106.6328125 > 159.3671875))) ++++++++++++++++++++++++++++++++

I guess the important bit above is that on FF, the jQuery "post" method is being executed. However, when I go to Chrome, I only get below.

++++++++++++++++++++++++++++++++ Started GET "/libraries" for 127.0.0.1 at 2011-05-23 20:35:44 +1000 Processing by LibrariesController#index as HTML Rendered libraries/_header.rhtml (25.9ms) Rendered libraries/_footer.rhtml (0.3ms) Rendered libraries/index.html.erb within layouts/libraries (59.1ms) Completed 200 OK in 90ms (Views: 89.1ms | ActiveRecord: 0.0ms) ++++++++++++++++++++++++++++++++

Why is Chrome not executing my jQuery "post"?

Was it helpful?

Solution

Judging from what I'm seeing in the console when I go to the link you provide for your app, you're being bitten by a Rails 3 issue that can come up with jQuery. Read about it at http://www.justinball.com/2011/03/11/get-jquery-working-with-ruby-on-rails-3/.

According to that page, the solution is:

Turns out that since I use jQuery I needed to get the rails.js file for jQuery. There's a gem that wraps it up:

https://github.com/rails/jquery-ujs

You can also just get the javascript and dump it in rails.js: https://github.com/rails/jquery-ujs/raw/master/src/rails.js

OTHER TIPS

FIXED : Hm. this was totally unexpected. anyway. i was using keywords "top", "left", "right" and "bottom" as variable names. and it looks like Chrome doesn't like this. is this because there are other JS files that Chrome conflicts with? I tried to do some search, but couldn't find anything. But anyway, for now, I changed my variable names to "top_bound", "left_bound" etc. And it's now behaving the way I expect.

ok. here it is. some Javascript reserved words are just not allowed strictly in Chrome.

http://www.quackit.com/javascript/javascript_reserved_words.cfm

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top