Trigger AJAX from a Google Maps Marker

Question

I have a Google map loaded through the Google Maps API with markers generated from node locations.

How can I cause content to be loaded via AJAX when one of the markers is clicked.

For example, if the marker is clicked, it would replace another div on the page with information from that node gathered via a db query.

Currently I have the following js which will fire the alert when the marker is clicked

google.maps.event.addListener(marker, 'click', function() {
    //alert(marker.nid);
    $.post('search-map/ajax/marker.nid',{
        nid:marker.nid
    });
});

The "search-map/ajax/marker.nid" URL corresponds to a URL added through hook_menu

$items['search-map/%/%'] = array(
    'page callback' => 'mymodule_map_marker_click',
    'page arguments' => array(1,2),
    'access arguments' => array('access content'),
    'type' => MENU_NORMAL_ITEM
);

And then I'm trying to get this callback function to run, which as a test, just should replace the contents of a div with some test output:

    function mymodule_map_marker_click($ajax, $building_nid) {
        if ($ajax == 'ajax') {
            $commands = array();
            $output = 'test';

            $commands[] = ajax_command_invoke('.search-listings__listings', 'html', array($output));

            ajax_deliver(array('#type' => 'ajax', '#commands' => $commands));

        } else {
            // if ajax disabled
            return array(
            );
        }
    }

I get this response visible in Firebug, but no action happens on the page:

    [{"command":"settings","settings":{"basePath":"\/","pathPrefix":"","ajaxPageState":{"theme":"mytheme","theme_token":"-CJtCsEvk1Nlzi_mfwSlDTCUoeOv7yyIBHLItpFSIC4"}},"merge":true},{"command":"settings","merge":false},{"command":"invoke","selector":".search-listings__listings","method":"html","arguments":["test"]}]

Answer 1

In my case, I was able to solve this by taking the response from Drupal.ajax and just parsing it myself into the command I needed to run:

                google.maps.event.addListener(marker, 'click', function() {
                    console.log(this.nid + this.title); //#DEBUG
                    $.ajax({
                        url: 'search-map/ajax/' + this.nid,
                        success: function(data,status){
                            for (var key in data) {
                                if (data[key].command == 'invoke') {
                                    console.log(data[key].arguments[0]); //#DEBUG
                                    $(data[key].selector).html(data[key].arguments[0]);
                                }
                            }
                        },
                    });
                });