Display a post map on a blank/new page

1 Views

On my single.php file I am displaying the_title(), the_content() and a link to a Google Map (Javascript v3). Lat/Lng coordinates for each location map are held in two separate meta fields attached to each post.

How can I structure my single.php file to grab the Lat/Lng values and display only the map when the map link is clicked?

Read More

I think I need to append the lat/lng values to my permalink somehow and then when single.php notices these values present it strips out everything except: 

<div id="map-canvas"></div>

I am using jQuery Mobile as the presentation layer for this project and have pretty permalinks enabled.

My single.php file looks like: 

<?php get_header(); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<!-- If no map coordinates found in permalink, show this block -->
     <?php the_title(); ?>
     <?php the_content(); ?>
     <a rel="external" href="<?php echo get_permalink(); ?>">Map</a>

<!-- If coordinates found, only show this -->
     <div id="map-canvas"></div>

<?php endwhile; ?>
<?php endif; ?>
<?php get_footer(); ?>

While in the head of my template I call a simple JS file as below: 

<script type="text/javascript">
$('.page-map').live("pagecreate", function() {

var lat = <?php echo get_post_meta($post->ID, 'Latitude', true); ?>;
var lng = <?php echo get_post_meta($post->ID, 'Longitude', true); ?>;

var latlng = new google.maps.LatLng(lat, lng);
var myOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map(document.getElementById("map-canvas"),myOptions);

var marker = new google.maps.Marker({
    position: latlng, 
    map: map,
    title:"<?php the_title(); ?>"
});

});
</script>

Thank you.

Post Views: 1

Related posts

Leave a Reply

1 comment

  1. After some more Googling…

    New single.php looks like this:

    <?php 
get_header();
global $wp_query;
if ( ! isset( $wp_query->query_vars['map'] ) )
{
    if (have_posts()) : 
        while (have_posts()) : 
             the_post();
             the_title();
             the_content();
         endwhile;
    endif; 
    ?>
    <p><a href="<?php echo get_permalink(); ?>?map=yes">Map</a></p>
    <?php
}
else { 
    ?>
    <div id="map-canvas"></div>
    <?php 
}

get_footer();

    And functions.php like this:

    add_filter('query_vars', 'parameter_queryvars' );
function parameter_queryvars( $qvars )
{
    $qvars[] = 'map';
    return $qvars;
}

    The function tells WordPress to expect a variable ‘map’ in the query string and single.php checks if a map variable has been set/passed via the referring page.

    Hope this helps someone.