如何使用jquery-ui-map在谷歌地图上添加标记

时间:2012-03-04 10:36:48

标签: php javascript jquery google-maps google-maps-markers

我正在使用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
        });
    });

工作正常,但我无法添加标记。我在文档中尝试了很多选项但无法放置标记。

任何想法?

由于

2 个答案:

答案 0 :(得分: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);
    });
});

答案 1 :(得分:2)

这就是我发现的:

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
    });

}

立即工作