(Multiple) Maps

Default Configuration

Here are the defaults used for the map:

container_id:        "map_container",
id:               "map",
type:             "ROADMAP",   // HYBRID, ROADMAP, SATELLITE, TERRAIN
center_latitude : 0,
center_longitude: 0,
disableDefaultUI: false,
disableDoubleClickZoom: false,    
draggable: true,
mapTypeControl:  null,        // display the map type dropdown, unless set to false it will be displayed
detect_location: false,        // should the browser attempt to use geolocation detection features of HTML5?
center_on_user: false,         // centers map on the location detected through the browser
zoom :            1,           // initial zoom. Set, 'auto_zoom' to false before setting 'zoom' value. This enables the 'zoom' value to overide the default.
maxZoom:       null,           //max zoom level
minZoom:       null,           //min zoom level   
auto_adjust:   true,           //adjust the map to the markers if set to true
auto_zoom:     true            //comes with auto_adjust. Choose whether or not you want to use an automatic zoom or the one you set in the 'zoom' option.
bounds:  []                    //adjust map to these limits. Should be [{"lat": , "lng": }, {"lat": , "lng": } ...]

The Google map will be embedded in the following html:

<div class="map_container"> 
  <div id="map" class="gmaps4rails_map"></div> 
</div>

You can change html this way:

<%= gmaps( :map_options => { :container_class => "foo", :id => "bar", :class => "baz" } %>

creating the following html:

<div class="foo"> 
  <div id="bar" class="baz"></div> 
</div>

Customize your map

Pass any option you want this way:

<%= gmaps({
          "map_options" => {"container_id" => "connections_map_container", "auto_adjust" => "true", "bounds" => '[{"lat": 0, "lng": 0 }, {"lat": 80 , "lng": 100 }]'},
          ... #add here data you want to display
          })
 %> 

Note that <%= gmaps4rails(@json) %> is a shortcut for:

<%= gmaps("map_options" => { "detect_location" => true, "center_on_user" => true, "zoom" => 6},"markers" => { "data" => @json }) %>

All options provided by the Google Maps API can be set via the gmaps() helper. Simply use proceed this way:

<%= gmaps(:map_options => { :raw => "{styles: customStyle, disableDefaultUI: true}"},
          :markers     => { "data" => @json }) %>

Multiple maps

Before v1.0.0, adding multiple maps on a single page was a pain and adding maps from different providers was impossible.

This has now been fixed even though the initial API slightly changed.

There are few cases to distinguish, relative to the proper js files inclusion.

Default implementation

Same Map API

Displaying a second map on the same page involves natural constraints:

• passing a different id to the second map

• telling explicitly that the js files shouldn't be loaded twice

This results in:

<%= gmaps(:markers     => { :data => @json1 },
          :map_options => { :auto_adjust => true },
          :last_map    => false) %>
<%= gmaps(:markers     => { :data => @json2 },
          :map_options => { :id => "second_map", :center_on_user => true, :zoom => 5 },
          :scripts     => :none ) %>

Adding map from different map providers:

This involves two constraints:

• having a different id for the second map

• loading the necessary js

This results in:

<%= gmaps(:markers     => {:data => @json1 },
          :map_options => { :auto_adjust => true },
          :last_map    => false) %>
<%= gmaps(:markers     => @json2 },
          :map_options => { :id => "second_map", :provider => "openlayers" },
          :scripts     => :api) %>