Removing marker shadows in Gmaps4Rails with CoffeeScript

185 views Asked by At

I am using the custom marker option in gmap4rails and implementing mainly in CoffeeScript. Though the default option for markers is to add a shadow, I wish to remove it but could not locate anywhere the setting to remove a shadow from a marker.

The view:

enter image description here

The Class to create the custom markers:

class CustomMarkerBuilder extends Gmaps.Google.Builders.Marker
    create_marker: ->
      options = _.extend @marker_options(), @rich_marker_options()
      @serviceObject = new RichMarker options

    rich_marker_options: ->
      marker = document.createElement("div")
      marker.setAttribute('class', 'custom_marker_content')
      marker.innerHTML = this.args.custom_marker
      marker.shadow
      { content: marker }

The CoffeeScript action to show all markers:

allLocations = root.table.rows().data()
  $('#multi_markers').map ->
    handler = Gmaps.build("Google", builders: { Marker: CustomMarkerBuilder })
    handler.buildMap
      internal:
        id: "multi_markers"
    , ->
      for aLocation in allLocations
        markers = handler.addMarkers([
          {
            lat: aLocation[9]
            lng: aLocation[10]
            custom_marker:     "<img src='/assets/images/redDotMarker.png' width='40' height='40'>"
            custom_infowindow: "Store Number: #{aLocation[1]}; Address: #{aLocation[2]}, #{aLocation[3]}; Major Bidding City: #{aLocation[6]}"
          }
        ])
      handler.bounds.extendWith markers
      handler.fitMapToBounds()
      return

How can the shadow be removed from the markers in the CoffeeScript?

2

There are 2 answers

1
山田和弘 On

Append @serviceObject.setShadow("") to remove marker shadows.

class CustomMarkerBuilder extends Gmaps.Google.Builders.Marker
  create_marker: ->
    options = _.extend @marker_options(), @rich_marker_options()
    @serviceObject = new RichMarker options
    @serviceObject.setShadow("") # Added
0
Whitecat On

You need to set the options of RichMarker. To do that change the return value in your function rich_marker_options.

This is done by changing { content: marker} -> { content: marker, flat: true }

Your final code for rich_marker_options would look like this

rich_marker_options: ->
  marker = document.createElement 'div'
  marker.setAttribute 'class', 'custom_marker_content'
  marker.innerHTML = this.args.custom_marker
  marker.shadow
  {content: marker, flat: true}

I found out by looking how RichMarker is constructed on this page