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