jquery - 带有 jquery-ui-map 的 Adsense

Question

您可以在下面看到我显示 map 和标记的代码(来自 Json):

$('#map_canvas').gmap().bind('init', function() { 
    $.getJSON( '../js/locate.php', function(data) { 
        $.each( data.markers, function(i, marker) {
            var mapvalue=new google.maps.LatLng(marker.latitude, marker.longitude);  

            $('#map_canvas').gmap('addMarker', { 
                'tags': [''+marker.category+''],
                'position': mapvalue, 
                'bounds': true,                             
                'icon':'../images/'+marker.category+'.png',
                'animation':google.maps.Animation.DROP
            }).click(function() {
                $('#map_canvas').gmap('openInfoWindow', { 'content': ''+marker.category+'<BR><div id="cust_content"></div>' }, this);
                setTimeout("opencust(\'" +marker.id+"\');",100);
            });                 
        });                                      
    });  
});   

如何在我的 map 上包含新的 adsense 脚本: https://developers.google.com/maps/documentation/javascript/advertising#AdvertisingAdUnit

谢谢你的帮助!

Answer 1

经过一些研究，我让它在几乎没有变化的情况下工作。您需要执行以下步骤。

首先在您的 Google Maps JS 中包含 Adsense。注意添加 图书馆=adsense&

<script src="http://maps.google.com/maps/api/js?libraries=adsense&sensor=true"></script>

修改你的JS如下。通知 $('#map_canvas').gmap('get','map')

$('#map_canvas').gmap().bind('init', function() {
    $.getJSON( '../js/locate.php', function(data) {
        $.each( data.markers, function(i, marker) {
            var mapvalue=new google.maps.LatLng(marker.latitude, marker.longitude);
                $('#map_canvas').gmap('addMarker', {
                'tags': [''+marker.category+''],
                'position': mapvalue,
                'bounds': true,
                'icon':'../images/'+marker.category+'.png',
                'animation':google.maps.Animation.DROP
            }).click(function() {
                $('#map_canvas').gmap('openInfoWindow', { 'content': ''+marker.category+'<BR><div id="cust_content"></div>' }, this);
                setTimeout("opencust(\'" +marker.id+"\');",100);
            });
        });
    });
    var adUnitDiv = document.createElement('div');
    var adUnitOptions = {
        format: google.maps.adsense.AdFormat.HALF_BANNER,
        position: google.maps.ControlPosition.TOP,
        backgroundColor: '#c4d4f3',
        borderColor: '#e5ecf9',
        titleColor: '#0000cc',
        textColor: '#000000',
        urlColor: '#009900',
        map: $('#map_canvas').gmap('get','map'),
        visible: true,
        publisherId: 'YOUR_PUBLISHER_ID'
    };
    adUnit = new google.maps.adsense.AdUnit(adUnitDiv, adUnitOptions);
});