Problems with Gmaps.map.replaceMarkers: Gmaps.map is undefined - ruby-on-rails

Question

I am trying to dynamically change the markers in Gmaps4Rails based on a user search form. I am using the code below.
The problem I am encountering is that the call to Gmaps.map.replaceMarkers within $('#locations_search').submit gives an error: Gmaps.map is undefined.
I checked using the javascript debbuger, and indeed once I enter the submit function (I have a breakpoint there), Gmaps.map is undefined. When stopping with a breakpoint in the first lines of Gmaps.map.callback, the object Gmaps.map is defined.
Probably I am missing something. It seems to be some variable scope problem here?
Gmaps.map.callback = function() {
var firstMarker = Gmaps.map.markers[0];
var map = Gmaps.map.map;
firstMarker.infowindow.open(map, firstMarker.serviceObject);
$('#locations_search').submit(function () {
var url = '/locations.json/?' + $(this).serialize();
$.getJSON(url, function(data){
Gmaps.map.replaceMarkers(data);
});
$.get(this.action, $(this).serialize(), null, 'script');
return false;
});
}
Thanks a lot!

Answer 1

It's just a question of script order.
Gmaps.map is created in your view when
You call either gmaps or gmaps4rails helpers.
Solution:
Add your scripts after your call to the gem's helpers
wrap your js code in <% content_for :scripts do %> code <% end %>
in your view:
<%= gmaps(...) %>
<% content_for :scripts do %>
<script type="text/javascript">
Gmaps.map.callback = function() { ... }
</script>
<% end %>
Gmaps.map.callback = function() {
var namespace = Gmaps.map;
var firstMarker = namespace.markers[0];
var map = namespace.map;
firstMarker.infowindow.open(map, firstMarker.serviceObject);
$('#locations_search').submit(function () {
var url = '/locations.json/?' + $(this).serialize();
$.getJSON(url, function(data){
namespace.replaceMarkers(data);
});
$.get(this.action, $(this).serialize(), null, 'script');
return false;
});
}