How to add marker on google map using jquery-ui-ma

Question

I am using http://code.google.com/p/jquery-ui-map/

HTML:

<div id="map_canvas" style="width: 100%; height:400px;" latitude="123456" longitude="123456">Loading Map</div>

jQuery:

$(function() {
        $('#map_canvas').gmap({ 
            'center': new google.maps.LatLng($('#map_canvas').attr('latitude'),$('#map_canvas').attr('longitude')), 
            'zoom': 13
        });
    });

It is working fine but I am unable to add a marker. I have tried many option in documentation but unable to place marker.

Any Idea?

Thanks

Answer 1

and this is what I found:

http://code.google.com/apis/maps/documentation/javascript/overlays.html#MarkerAnimations

// Google Maps
function GoogleMaps() {

    var latitude = $("#map_canvas").attr('latitude');
    var longitude = $("#map_canvas").attr('longitude');

    var location = new google.maps.LatLng(latitude, longitude);
    var marker;
    var map;

    var mapOptions = {
            zoom: 13,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            center: location
    };

    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

    marker = new google.maps.Marker({
        map:map,
        animation: google.maps.Animation.DROP,
        position: location
    });

}

Working now

Answer 2

http://jquery-ui-map.googlecode.com/svn/trunk/demos/jquery-google-maps-basic-example.html

$('#map_canvas').gmap().bind('init', function(ev, map) {
    $('#map_canvas').gmap('addMarker', {'position': '57.7973333,12.0502107', 'bounds': true}).click(function() {
        $('#map_canvas').gmap('openInfoWindow', {'content': 'Hello World!'}, this);
    });
});