creating an anchor

  • How can I add an anchor to link to this map?

    //custom field lat lon GOOGLE MAPS
function my_map_shortcode() {
    $latitude = get_post_meta(get_the_ID(), 'latitude', true);
    $longitude = get_post_meta(get_the_ID(), 'longitude', true);

    if (empty($latitude) || empty($longitude)) {
        return '';
    }

    $map_url = 'https://www.google.com/maps/embed/v1/place?key=AIzaSyAQGd95X0YBBzcLX4NwMeXEiCIjUy6dO4I&zoom=15&q=' . $latitude . ',' . $longitude ;

    return '<br></br>Posizione su mappa<br></br><iframe width="100%" height="450" frameborder="0" style="border:0" src="' . $map_url . '" allowfullscreen></iframe><br></br>';
}

add_shortcode('my_map', 'my_map_shortcode');

function my_add_map_to_post_content($content) {
    if (is_singular('post')) {
        $map = do_shortcode('[my_map]');
        $content .= $map;
    }
    
    return $content;
}

add_filter('the_content', 'my_add_map_to_post_content');

function my_add_meta_box() {
    add_meta_box('my_location', 'Posizione', 'my_location_callback', 'post', 'normal', 'default');
}

add_action('add_meta_boxes', 'my_add_meta_box');

function my_location_callback($post) {
    wp_nonce_field(basename(__FILE__), 'my_location_nonce');

    $latitude = get_post_meta($post->ID, 'latitude', true);
    $longitude = get_post_meta($post->ID, 'longitude', true);
?>
    <p>
        <label for="latitude">Latitudine</label>
        <br />
        <input type="text" name="latitude" id="latitude" value="<?php echo esc_attr($latitude); ?>" />
    </p>
    <p>
        <label for="longitude">Longitudine</label>
        <br />
        <input type="text" name="longitude" id="longitude" value="<?php echo esc_attr($longitude); ?>" />
    </p>
<?php
}

function my_save_location_meta($post_id) {
    if (!isset($_POST['my_location_nonce']) || !wp_verify_nonce($_POST['my_location_nonce'], basename(__FILE__))) {
        return;
    }

    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
        return;
    }

    if (!current_user_can('edit_post', $post_id)) {
        return;
    }

    if (isset($_POST['latitude'])) {
        update_post_meta($post_id, 'latitude', sanitize_text_field($_POST['latitude']));
    }

    if (isset($_POST['longitude'])) {
        update_post_meta($post_id, 'longitude', sanitize_text_field($_POST['longitude']));
    }
}

add_action('save_post', 'my_save_location_meta');

    I’d like to put an icon on this page: https://test.sacconicase.com/case-vacanza/lignano-sabbiadoro-appartamenti-vacanze/ , I click the icon and I go direclty to the map here in this page: https://test.sacconicase.com/lignano-sabbiadoro-appartamento-7-persone-vicino-al-mare/

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)

  • When you return the map via my_map_shortcode just use the post ID via get_the_ID() to create a unique identifier for the map, for example: <div id="my_map_123"></div> then when you output the icon with the link, just append #my_map_123 at the end of the icon’s link.

    Thread Starter sacconi

    (@sacconi)

    Ok, I understand the general gist of what you wrote but, to begin with, exactly where should the div tags be placed in the function?

    In my_map_shortcode just add the div tag at or near the start of the string you are returning, for example:

    // WARNING: Example only. Please adapt to your requirements.
return '<br><div id="my_map_123"></div><br>Posizione su mappa<br><br><iframe width="100%" height="450" frameborder="0" style="border:0" src="' . $map_url . '" allowfullscreen></iframe><br></br>';
    Thread Starter sacconi

    (@sacconi)

    ok, I’ve tested the anchor, it works, but I go to the map from the orange button, this is conceived to send you to prices, it was just for testing the anchor https://test.sacconicase.com/marina-di-massa-appartamento-con-due-camere-in-v-licciana/

    Now the most difficult is going to the map from an icon. Is it right the following?

    get_post_meta( get_the_ID(), "#my_map_123",true ),

    I could call the anchor both from an icon in the same page (post) of the map and from an icon in the archive page

    Hello, without additional context, I can’t say if the code you provided is correct. What it does tell me is you are retrieving a meta field from the current post and your key is "#my_map_123". I’m not sure what you want to do here, but you won’t need to store the map identifier as post metadata.

    In my earlier reply, #my_map_123 is just an example — 123 is supposed to be replaced with the post ID from the get_the_ID() function.

    /* WARNING: Following code is for illustration purposes only */
// Inside my_map_shortcode()...
// Get the post ID and use as the unique map identifier
$map_id = 'my_map_' . get_the_ID();

// ... more code here

// Return the map iframe
return '<br><div id="' . $map_id . '"></div><br>Posizione su mappa<br><br><iframe width="100%" height="450" frameborder="0" style="border:0" src="' . $map_url . '" allowfullscreen></iframe><br></br>';

    So when you output the icon and enclose it with an <a/> tag you can just use the post id to add the map identifier at the end of the link. No need for any post metadata.

    /* WARNING: Following code is for illustration purposes only */
// Get the link to the post containing the map
$map_link = get_the_link_to_the_post_with_map();

// Rebuild the map identifier
$map_id = '#my_map_' . get_the_ID();

// Add the map identifier to the end of the link
$map_link = $map_link . $map_id;

// Continue to add $map_link to the map icon

    Hope this helps and good luck!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘creating an anchor’ is closed to new replies.