Customized Cluster Icons

Version > 2.x

Disable Clusterer Icons

Simply un-define the default clusterer with:

handler = Gmaps.build("Google", { markers: { clusterer: undefined  } })

Customize Clusterer Images

There are some companion projects to get you started. They go along with the companion quick tutorial video.

This page is based on the code provided in the standard UI example

• gmaps: Rails4, ActiveRecord, standard UI

If you followed along you will have a method to build a json hash in your rails user controller (or any model controller you're providing map markers for).

  # app/controllers/users_controller.rb
  # GET /users
  # GET /users.json
  def index
    @users = User.all
    @hash = Gmaps4rails.build_markers(@users) do |user, marker|
      marker.lat user.latitude
      marker.lng user.longitude
      marker.title user.title
    end
  end

And you will have javascript in the view to instantiate the map like this:

<!-- app/views/user/index.html.erb -->
<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>

Or if you're building your js server side, it might be in coffeescript like this

# app/assets/js/user.js.coffee
Gmaps.store = {} #handler, markers, userPin, eventPin
jQuery ->
  $('body').ready ->
    if $('#map').length > 0

      handler = Gmaps.build("Google")
      handler.buildMap
        provider: {}
        internal:
          id: "map"
      , ->
        markers = handler.addMarkers($('#map').data('users'))
        handler.bounds.extendWith markers
        handler.fitMapToBounds()

The default clusterer uses MarkerClustererPlus. Be sure to include the script code in your html page, either as in-page script

<script src="//google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.14/src/markerclusterer_packed.js" type="text/javascript"></script>
<script src="//maps.google.com/maps/api/js?v=3.13&sensor=false&libraries=geometry" type="text/javascript"></script>

or with a content_for block in your view page:

  <% content_for :scripts do %>
      <%= javascript_include_tag "//maps.google.com/maps/api/js?v=3.13&libraries=geometry&sensor=false"%>
      <%= javascript_include_tag "//google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.1.2/src/markerclusterer_packed.js"%>

You can customize the pics used by the clusterer (or any other option used by the clusterer) by setting the clusterer options just prior to building the map (in your coffeescript or in page javascript).

Here is an example using the sample images from the markerclusterplus library:

# app/assets/js/user.js.coffee
# 
Gmaps.store = {} #handler, markers, userPin, eventPin
jQuery ->
  $('body').ready ->
    if $('#map').length > 0
      var base_url = "http://gmaps-utility-library.googlecode.com/svn/trunk/markerclusterer/1.0/images/";

      handler = Gmaps.build(
        "Google"
        markers:
          clusterer:
            gridSize: 40
            maxZoom: 10
            styles: [
              textSize: 10
              textColor: '#ff0000'
              url: base_url + 'heart30.png'
              height: 26
              width: 30
            ,
              textSize: 14 
              textColor: '#ffff00'
              url: base_url + 'heart40.png' 
              height: 35
              width: 40
            ,
             textSize: 18 
             textColor: '#0000ff'
             url: base_url + 'heart50.png'
             width: 50
             height: 44
            ]
      )
      handler.buildMap
        provider: {}
        internal:
          id: "map"
      , ->
        markers = handler.addMarkers( $('#map').data('users'))
        Gmaps.store.markers = markers
        handler.bounds.extendWith markers
        handler.fitMapToBounds()

or with in page javascript

<!-- / app/views/users/index.html.erb -->

<%= link_to 'New User', new_user_path %>

<div style='width: 800px;'>
  <div id="map" style='width: 800px; height: 400px;'></div>
</div>
<script type="text/javascript">
    handler = Gmaps.build('Google',
        {markers:
          {clusterer: {
            gridSize: 40,
            maxZoom: 10,
            styles: [ {
              textSize: 10,
              textColor: '#ff0000',
              url: base_url + 'heart30.png',
              height: 26,
              width: 30 }
            , {
              textSize: 14, 
              textColor: '#ffff00',
              url: base_url + 'heart40.png',
              height: 35,
              width: 40 }
            , {
             textSize: 18, 
             textColor: '#0000ff',
             url: base_url + 'heart50.png',
             width: 50,
             height: 44}
            ]}}}
      );
    handler.buildMap({ provider: {}, internal: {id: 'map'}}, function(){
        markers = handler.addMarkers(<%=raw @hash.to_json %>);
        handler.bounds.extendWith(markers);
        handler.fitMapToBounds();

    });
</script>