Custom Markers for HTML5 Data Attribute

[Tom Harding]

Hi all,

I'm currently working on an example similar to this one: https://code.google.com/p/jquery-ui-map/source/browse/trunk/demos/jquery-google-maps-data-attribute.html?r=300 and it's working beautifully. 

My only question is how do I get a custom marker image for each instance? 

Here's an example of what I'm working with. 

    <li data-gmapping='{"id":"m_1","latlng":{"lat":54.6747,"lng":-2.5616}, "icon":"/images/mapicons/bookstore.png" }'>

        <span class="info-box">Reading Room / Village Hall</span>

    </li>

 The bolded part is what I presumed was supposed to be added, but that doesn't work. So that got me thinking about the main UI maps instance:

$('#map_canvas').gmap().bind('init', function(ev, map) {

$("[data-gmapping]").each(function(i,el) {

var data = $(el).data('gmapping');

$('#map_canvas').gmap('addMarker', {'id': data.id, 'tags':data.tags, 'position': new google.maps.LatLng(data.latlng.lat, data.latlng.lng), 'bounds':true }, function(map,marker) {

$(el).click(function() {

$(marker).triggerEvent('click');

});

}).click(function() {

$('#map_canvas').gmap('openInfoWindow', { 'content': $(el).find('.info-box').text() }, this);

});

});

}); I'm guessing that somewhere in the $('map_canvas') call 5 lines down, I have to add something in there, but I'm not sure what. Can anyone help, please? Thanks, Tom

[Tom Harding]

Never mind, worked it out. 

Quite simple really.

In the original jQuery, After 'bounds':true I add , 'icon': '/images/'+data.icon (images being where your icons are saved relative to your script.

And in the gmapping call I simply just have "icon":"bookstore.png". 

Very simple really. Wasn't documented though, so I hope this will help someone somewhere.

[Steve Spencer]

Thanks! Very helpful!