This is mainly the continuation to this question, and the code is the same. I have now marker overlays clickable, but they are all linked to the post, associated with the current active marker, not to the post corresponding to the clicked marker. (I believe the link to the site will be hepful - sorry it's all in Russian).
I can't figure out, whether it's PHP/WordPress problem (should be something instead of 'the_permalink'?) or jQuery/Gmap3 problem, so I am listing all tags.
I am putting it a large piece of code, because my guess is that the definition of et_add_marker function may be important. The part I'm working at is marked as "Below is the added code".
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
}
},
/*Below is the added code, that should make overlay link to a corresponding WP post. This way it links to the post, associated with the active marker, not the clicked marker. */
events : {
click: function (marker) {
location.href = "<?php the_permalink(); ?>";
}
/*End of the added code*/
}
}
});
}
<?php
$i = 0;
while ( have_posts() ) : the_post();
$et_location_lat = get_post_meta( get_the_ID(), '_et_listing_lat', true );
$et_location_lng = get_post_meta( get_the_ID(), '_et_listing_lng', true );
$et_location_rating = '<div class="location-rating"></div>';
if ( ( $et_rating = et_get_rating() ) && 0 != $et_rating )
$et_location_rating = '<div class="location-rating"><span class="et-rating"><span style="' . sprintf( 'width: %dpx;', esc_attr( $et_rating * 17 ) ) . '"></span></span></div>';
if ( '' != $et_location_lat && '' != $et_location_lng ) {
?>
et_add_marker( <?php printf( '%1$d, %2$s, %3$s, \'<div id="et_marker_%1$d" class="et_marker_info"><div class="location-description"> <div class="location-title"> <h2>%4$s</h2> <div class="listing-info"><p>%5$s</p></div> </div> ' . $et_location_rating . ' </div> <!-- .location-description --> </div> <!-- .et_marker_info -->\'',
$i,
esc_html( $et_location_lat ),
esc_html( $et_location_lng ),
get_the_title(),
wp_strip_all_tags( addslashes( get_the_term_list( get_the_ID(), 'listing_type', '', '' ) ) )
); ?> );
I'm not familiar with wordpress, so I can't tell you how to do it exactly, but instead of using <?php the_permalink(); ?>
inside the function you must pass the permalink to the function as an argument and use this argument inside the function.