使用cakePHP - infowindow来解决gmap3问题

Question

我正在开发一个项目，我需要一些gmap3的帮助。我一直在浏览他们网站上的文档和源代码，但我无法使其正常工作。基本上我在我的网站上有一张地图，我正在放置标记。 onClick，我正在添加一个事件来打开一个infowindow。这就是我被困住的地方。我通过ajax响应传递标记的值：在我看来，这是我的方法：

jQuery(document).ready(function(){
"use strict";
            mapDiv = jQuery('#directory-main-bar');
            mapDiv.height(500).gmap3({                  
                map: {
                    options: {
                        "draggable": true
                        ,"mapTypeControl": true
                        ,"mapTypeId": google.maps.MapTypeId.ROADMAP
                        ,"scrollwheel": false
                        ,"panControl": true
                        ,"rotateControl": false
                        ,"scaleControl": true
                        ,"streetViewControl": true
                        ,"zoomControl": true
                        ,"zoom": 5
                    }
                },
                options:{
                    draggable: false                        
                },
                cluster:{
                    radius: 20,
                    // This style will be used for clusters with more than 0 markers
                    0: {
                        content: "<div class='cluster cluster-1'>CLUSTER_COUNT</div>",
                        width: 90,
                        height: 80
                    },
                    // This style will be used for clusters with more than 20 markers
                    20: {
                        content: "<div class='cluster cluster-2'>CLUSTER_COUNT</div>",
                        width: 90,
                        height: 80
                    },
                    // This style will be used for clusters with more than 50 markers
                    50: {
                        content: "<div class='cluster cluster-3'>CLUSTER_COUNT</div>",
                        width: 90,
                        height: 80
                    },
                    events: {
                        click: function(cluster) {
                            map.panTo(cluster.main.getPosition());
                            map.setZoom(map.getZoom() + 2);
                        }
                    }
                },
                events: {
                    click: function(marker, event, context){                            
                        map.panTo(marker.getPosition());

                        infobox.setContent(context.data);
                        infobox.open(map,marker);

                        // if map is small
                        var iWidth = 260;
                        var iHeight = 300;
                        if((mapDiv.width() / 2) < iWidth ){
                            var offsetX = iWidth - (mapDiv.width() / 2);
                            map.panBy(offsetX,0);
                        }
                        if((mapDiv.height() / 2) < iHeight ){
                            var offsetY = -(iHeight - (mapDiv.height() / 2));
                            map.panBy(0,offsetY);
                        }

                    }
                }
            },"autofit");

            map = mapDiv.gmap3("get");
infobox = new InfoBox({
    pixelOffset: new google.maps.Size(-50, -65),
    closeBoxURL: '',
    enableEventPropagation: true
});
mapDiv.delegate('.infoBox .close','click',function () {
    infobox.close();
});
// hotfix for chrome on android
mapDiv.delegate('.infoBox div.more-button', 'click', function() {
    window.location = $(this).data('link');
});

if (Modernizr.touch){
    map.setOptions({ draggable : false });
    var draggableClass = 'inactive';
    var draggableTitle = "Activate map";
    var draggableButton = $('<div class="draggable-toggle-button '+draggableClass+'">'+draggableTitle+'</div>').appendTo(mapDiv);
    draggableButton.click(function () {
        if($(this).hasClass('active')){
            $(this).removeClass('active').addClass('inactive').text("Activate map");
            map.setOptions({ draggable : false });
        } else {
            $(this).removeClass('inactive').addClass('active').text("Deactivate map");
            map.setOptions({ draggable : true });
        }
    });
}
})

我的ajax响应如下：

> success: function(data) {                             
>               mapDiv.height(500).gmap3({                  
>                   action: 'addMarkers',
>                   marker: {
>                       values: 
>                           data                    
>                   }                   
>                   },"autofit");                   }

这是我从我的控制器返回的数组：

$ar[] = array("address" =>"{$business['Business']['name']}, {$business['Business']['address1']}, {$business['Business']['location']}",
                            "data" => "'<div class=\"marker-holder\">'+
                                    '<div class=\"marker-content with-image\"><img src=\"img/map-photo/Cars-Lot-For-Sale.jpg\" alt=\"\">'+
                                        '<div class=\"map-item-info\">'+
                                            '<div class=\"title\">'+\"Viktor's Cars\"+'</div>'+
                                            '<div class=\"address\">'+\"107 Montague Street Brooklyn, NY 11201, United States\"+'</div>'+
                                            '<div data-link=\"catalog-item.html\" class=\"more-button\">' + \"VIEW MORE\" + '</div>'+
                                            '</div><div class=\"arrow\"></div><div class=\"close\"></div>'+
                                        '</div>'+
                                    '</div>'+
                                '</div>'",
                            "options" => array("icon"=> "/img/map-icon/food1.png"));

有人可以指导我为什么我的信息框没有出现吗？此外，没有返回JS错误，因此最有可能出现逻辑错误。

非常感谢