Search code examples
ruby-on-railsgmaps4rails

Using gmaps4rails, all is well, except there's this circular background in the middle of the map

I've tried changing the backgroundColor property to either transparent, none, or white, but it doesn't solve the issue. I've tried it on both chrome and firefox but still the same.

View:

<script type="text/javascript">
  handler = Gmaps.build('Google');
  handler.buildMap({ provider: {}, internal: {id: 'map'}}, function(){
    markers = handler.addMarkers(<%=raw @hash.to_json %>);
    handler.bounds.extendWith(markers);
    handler.fitMapToBounds();
  });
</script>

Controller:

def index
  @foobars = Foobar.all
  @hash = Gmaps4rails.build_markers(@foobars) do |foobar, marker|
    marker.lat foobar.latitude
    marker.lng foobar.longitude
  end
end

enter image description here

Solution

  • I'd bet $100 those "circles" are the individual Google Maps image tiles with a large border radius.

    Look in your CSS for any img styles that have a border-radius property that might affect this, and adjust your selectors as necessary. Your browser's devtools can help you locate the offending selector.