How to use personalized icon with jquery-ui-map

Question

Using jquery-ui-map, I try to use personnalized icon. I works fine this way :

$("#gmap_" + parent).gmap('addMarker', { 
    "id": "marker-"+m.id,
    'position': new google.maps.LatLng(m.lat, m.lon), 
    'bounds':true,
    'icon': '/images/'+m.icon
})

As my icon is just an url. But I want to put all my icons in a sprite, so I have to set other option :

$("#gmap_" + parent).gmap('addMarker', { 
    "id": "marker-"+m.id,
    'position': new google.maps.LatLng(m.lat, m.lon), 
    'bounds':true,
    'icon': new google.maps.MarkerImage( {
        'url' : "http://crm.brunet.pro/images/markers.png",
        'origin': new google.maps.Point(m.pos, 0),
        'size' : new google.maps.Size(20, 34)
    })
})

I get this error :

GET http://mysite.com/[object%20Object] 400 (Bad Request)

So it looks like the icon option only accepts a string. But you can see in the api that it should accept a MarkerImage object.

What did I wrong ?

Thanks

Answer 1

MarkerImage is created with up to five arguments, like, MarkerImage(myUrl, size1, point1, point2), but you have written it as one object argument.

I do think the API doc can be confusing in cases like this. Check out these examples:

https://developers.google.com/maps/documentation/javascript/overlays#ComplexIcons

  var image = new google.maps.MarkerImage('images/beachflag.png',
  // This marker is 20 pixels wide by 32 pixels tall.
  new google.maps.Size(20, 32),
  // The origin for this image is 0,0.
  new google.maps.Point(0,0),
  // The anchor for this image is the base of the flagpole at 0,32.
  new google.maps.Point(0, 32));

http://blog.mridey.com/2010/03/using-markerimage-in-maps-javascript.html (explains loading from a sprite sheet)

size, origin, anchor are not mentioned, but you do need to respect the order given in the API docs.