CODEWITHSUNDEEP
ruby-on-railsgmaps4railsruby-on-rails-4.1
ysholqamy
ysholqamy

Reputation: 221

Gmaps4rails marker picture doesnt show instead a string "undefined" appears

I was trying to generate several maps dynamically everything went fine but the marker picture doesnt show instead a string "undefined" appears still in the right place. Here's the code.

hash method implemented in the object model

    def hash
    hash = Gmaps4rails.build_markers(location) do |loc, marker|
        marker.lat loc.latitude 
        marker.lng loc.longitude 
        marker.picture ({
            :url => "http://addons.cdn.mozilla.net/img/uploads/addon_icons/13/13028-64.png", 
            :width => 32, 
            :height => 32
            })
    end
    hash
end

coffeescript code

class RichMarkerBuilder 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', 'marker_container'
  marker.innerHTML = @args.marker
  { content: marker }

@buildMap = (markers, id)->

 handler = Gmaps.build 'Google', { builders: { Marker: RichMarkerBuilder} }
 handler.buildMap { provider: {}, internal: {id: id} }, ->
  markers = handler.addMarkers(markers)
  handler.bounds.extendWith(markers)
  handler.fitMapToBounds()

And included the script call in the view

    <SCRIPT TYPE="text/javascript">
            $(window).on('load', function(){
                buildMap(<%= raw hash.to_json%>,<%=entity.id%>);
            });
    </SCRIPT>

everything is fine except for the marker picture and I can't figure it out. Any help will be appreciated. Thanks!

javascript code:

handler = Gmaps.build('Google');
handler.buildMap({ provider: {}, internal: {id: 'map'}}, function(){
 markers = handler.addMarkers([
 {
  "lat": 0,
  "lng": 0,
  "picture": {
    "url": "https://addons.cdn.mozilla.net/img/uploads/addon_icons/13/13028-64.png",
    "width":  36,
    "height": 36
  },
  "infowindow": "hello!"
}
 ]);
handler.bounds.extendWith(markers);
handler.fitMapToBounds();
});

buildMap function test version:

@buildMap = ->  
 handler = Gmaps.build 'Google', { builders: { Marker: RichMarkerBuilder} } 

 handler.buildMap { provider: {}, internal: {id: 'map'} }, ->
 markers = handler.addMarkers([
  {"lat": 0, "lng": 0, 'picture':{'url':'http://addons.cdn.mozilla.net/img/uploads/addon_icons/13/13028-64.png'}}
 ])
 handler.bounds.extendWith(markers)
 handler.fitMapToBounds()

Upvotes: 1

Views: 306

Answers (1)

ysholqamy
ysholqamy

Reputation: 221

As apneadiving suggested: At last, I found a solution. It's ugly but still working. I redefined buildMap function without using the RichMarkerBuilder

function buildMap(handler,id) {
    var lat = handler[0]['lat'];
    var lng = handler[0]['lng'];
    var picture = handler[0][picture];
    handler = Gmaps.build('Google');
    handler.buildMap({ provider: {}, internal: {id: id}}, function(){
      markers = handler.addMarkers([
        {
          "lat": lat,
          "lng": lng,
          "picture": picture,
        }
      ]);
      handler.bounds.extendWith(markers);
      handler.fitMapToBounds();
      handler.getMap().setZoom(15);
    });
  };

The function takes 4 args, The handler which is the return value of (raw entity.hash.to_json), the id of the entity to create a new map for each entity, the lng and lat are the longitude and latitude of the location of the entity. I couldn't figure out how to pull those from the passed handler object.

PS: apneadiving suggested this solution, the code is pretty ugly due to my limited js skills though.

Upvotes: 1

Related Questions