Google Maps, Ruby on Rails, Zoom level with one marker

Question

I am adding google maps support with apneadiving / Google-Maps-for-Rails (thanks awesome gem)

I am finding one slight glitch, however, which very likely is my fault.

auto_zoom works great when there are multiple markers. However, when there is only one marker it is zoomed in to the max level which is not pretty.

"zoom" will only work when auto_zoom is false, so that's not what I want.

So therefore you could use "maxZoom" but now users cannot zoom in manually beyond that point which is not what I want.

Is there a way around this? Is my explanation making sense? Is this a limitation of Google Maps API?

Thanks...

Answer 1

This behavior is due to the auto_zoom built-in function in the google maps api.

One work around to this is to set it to false in the gmaps method:

<%= gmaps({
       "map_options" => { "auto_zoom" => false},
       "markers"     => { "data" => @json }
      })
%>

And then use the gmaps4rails_callback to fit your needs (be sure to have at least version 0.7.9)

<script type="text/javascript" charset="utf-8">
  function gmaps4rails_callback() {
    if (Gmaps4Rails.markers.length == 1) {
     //only one marker, choose the zoom level you expect
     Gmaps4Rails.map.setZoom(2);
    }
    else{
     //more than one marker, let's auto_zoom
     Gmaps4Rails.map_options.auto_zoom = true;
     Gmaps4Rails.adjust_map_to_bounds();
    }
  }
</script>

Answer 2

I achieved this in a slightly different way as I know that I'll only ever have one marker on my map. I'm relatively new to rails, but this method feels a bit "cleaner" than using JS in your view.

I've got lat and lng stored in my model (encoded by geokit at time of creation), so did the following in my view:

<%= gmaps({
       "map_options" => {"auto_zoom" => false, "zoom" => 15, "center_latitude" => @listing.lat, "center_longitude" => @listing.lng },
       "markers"     => {"data" => @markers }
      })
%>

@markers is my JSON created by blah.to_gmaps4rails, and "listing" is my model.

Answer 3

thanks this helped me...

{"auto_zoom" => false, "zoom" => 15, "center_latitude" => @listing.lat, "center_longitude" => @listing.lng }, "markers" => {"data" => @markers } }) %>