Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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?

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.

share|improve this question
    
Can you post some context to work in? –  soulseekah Oct 19 '11 at 7:07
    
Feed values brought in by get_post_meta(get_the_ID(), 'google_map_lat'); to the Google Maps API options object. –  soulseekah Oct 19 '11 at 7:16
    
Hi Soulseekah, I've updated my question with a couple of code blocks to try and provide a bit more context. Cheers. –  Andrew Oct 19 '11 at 9:30
    
I think you have to wrap <?php echo... ?> inside "", var lng = "<?php echo get_post_meta($post->ID, 'Longitude', true); ?>";, anyway, that appears to be perfectly normal, doesn't it work? –  soulseekah Oct 19 '11 at 9:41
add comment

1 Answer 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.

share|improve this answer
    
Never access a global object, if you've got an API function for that purpose. –  kaiser Mar 6 '12 at 19:17
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.