0

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', '', '' ) ) )
            ); ?> );
Community
  • 1
  • 1
yann
  • 25
  • 1
  • 5

1 Answers1

0

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.

Dr.Molle
  • 116,463
  • 16
  • 195
  • 201
  • Did you mean function 'et_add_marker( marker_order, marker_lat, marker_lng, marker_description )' - adding something like 'marker_url' in brackets? I thought of that, but I am totally confused with the way these parameters are obtained when the function is called (see the bottom of the code). – yann Aug 27 '13 at 11:27
  • Ok, after two days of thinking I got it. Thank you @Dr.Molle, it was really a hint. The solution consisted of three parts: 1) add one more argument 'marker_url' to the function as said in the previous comment; 2) pass the data to the function - that was the trickiest part! 3) set location.href = marker_url – yann Aug 28 '13 at 15:32