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(); ?>"


Thank you.

  • Can you post some context to work in?
    – soulseekah
    Oct 19, 2011 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, 2011 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, 2011 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, 2011 at 9:41

1 Answer 1


After some more Googling...

New single.php looks like this:

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


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.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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