How to make my marker overlay clickable

Question

I am trying to build a site based on Elegant Themes "Explorable" WP Theme, which is in turn based on gmap3 jQuery plugin. It makes WP Posts shown of the map as markers. These markers have overlays, that tell post names and categories, but are not clickable. I am trying to make them linked to actual post pages. Yet something is wrong.

Below is the code with my added part. When I uncomment the part I added, the maps is not loading at all. Please tell me, what I am doing wrong.

function et_add_marker(marker_order, marker_lat, marker_lng, marker_description) {
    var marker_id = 'et_marker_' + marker_order;

    $et_main_map.gmap3({
        marker: {
            id: marker_id,
            latLng: [marker_lat, marker_lng],
            options: {
                icon: "<?php echo get_template_directory_uri(); ?>/images/blue-marker.png"
            },
            events: {
                click: function (marker) {
                    if (et_active_marker) {
                        et_active_marker.setAnimation(null);
                        et_active_marker.setIcon('<?php echo get_template_directory_uri(); ?>/images/blue-marker.png');
                    }
                    et_active_marker = marker;

                    <!--marker.setAnimation( google.maps.Animation.BOUNCE);-->
                    marker.setIcon('<?php echo get_template_directory_uri(); ?>/images/red-marker.png');

                    $(this).gmap3("get").panTo(marker.position);

                    $.fn.et_simple_slider.external_move_to(marker_order);
                },
                mouseover: function (marker) {
                    $('#' + marker_id).css({
                        'display': 'block',
                        'opacity': 0
                    }).stop(true, true).animate({
                        bottom: '15px',
                        opacity: 1
                    }, 500);
                },
                mouseout: function (marker) {
                    $('#' + marker_id).stop(true, true).animate({
                        bottom: '50px',
                        opacity: 0
                    }, 500, function () {
                        $(this).css({
                            'display': 'none'
                        });
                    });
                }
            }
        },
        overlay: {
            latLng: [marker_lat, marker_lng],
            options: {
                content: marker_description,
                offset: {
                    y: -42,
                    x: -122
                }
            }
            /* This is my code, that doesn't work */
            events: {
                click: function (marker) {
                    window.location.href = "<?php 'the_permalink' ?>";
                }
            } /*End of my code*/
        }
    });
}

Oh. You were right. So simple, I'm ashamed. Too bad to be a noob :-) Thank you! BTW, "the_permalink" was missing brackets after, but this I fixed myself. — yann, Aug 27 '13 at 07:34
Oh, I should have asked you to promote your comment to an answer so that I could accept it and raise your reputation :-) — yann, Aug 27 '13 at 09:39

score 0 · Accepted Answer · answered Aug 28 '13 at 15:37

0

There was a comma missing between options and event. Thanx to Dr.Molle.

answered Aug 28 '13 at 15:37

yann

25
1
5

How to make my marker overlay clickable

1 Answers1