Hello All,
I have been trying to find an answer for a while now. I am using the http://jvectormap.com/ and I am trying to get a div to open when a country is clicked on. This div will load the contents of a custom post that has been created to store information on the specific countries.
There is an empty div that the new content is loaded into
<div id="map_overlay"> </div>
The jQuery is as follows and is based off of examples provided by jvectormap
$(function(){
$('#bigmap').vectorMap({
map: 'world_en',
color: '#b7d278',
hoverColor: '#8db6ff',
backgroundColor: '#6fa2e8',
stroke: '#ffffff',
hoverOpacity: 0.7,
scaleColors: ['#b6d6ff', '#005ace'],
onRegionClick: function(event, code) {
if (code === 'RU') {
$("#map_overlay").load("/map-details", function(){
$(".map_overlay").hide();
$(".map_overlay").fadeIn(500);
$(".map_overlay").addClass("RU");
});
$("#map_overlay").on("click",".close",function(){
$("#map_overlay").empty();
$(".map_overlay").fadeOut(500);
return false;
})
}
else if (code === 'AR') {
$("#map_overlay").load("/map-details", function(){
$(".map_overlay").hide();
$(".map_overlay").fadeIn(500);
$(".map_overlay").addClass("AR");
});
$("#map_overlay").on("click",".close",function(){
$("#map_overlay").empty();
$(".map_overlay").fadeOut(500);
return false;
})
}
}
});//end vectorMap
});//end functionThe following is the loop that is called.
<?php $args = array( 'post_type' => 'map', 'posts_per_page' => 1 );
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post();
$video = get_post_meta($post->ID, '_map_video_url', true);
$photo = get_post_meta( $post->ID, '_map_project_photo', true );
$title = get_post_meta( $post->ID, '_map_proj_title', true );
$desc = get_post_meta( $post->ID, '_map_proj_desc', true );
?>What I want is when a country is called the specific post will display. I would like to call the post by its ID.
Any help would be wonderful.
Thank you
