Using the WordPress Featured Image / Post Thumbnail as a Google Maps Marker

This is a follow-up to my previous post on combining WordPress and Google Maps. Jayc asks:

“Is there any way to change the MarkerImage to the featured image for the post?”

Yes, there is!

But one thing to keep in mind is that markers are not one image but two — the marker itself and the shadow. What we’re going to cover here will show how to use the Featured Image as the marker, while continuing to use a single shadow across all posts. This means it is appropriate for markers that share the same size and silhouette.

We’ll be using the code from the previous post as the starting point. The complete example with these changes applied is also available for download from GitHub.

Initiate Featured Images

Create a new file in your theme directory, called functions.php. In it, write:

<?php
 
// Featured Images / Post Thumbnails
if ( function_exists( 'add_theme_support' ) ) {
    add_theme_support( 'post-thumbnails' );
}
 
?>

This is the basic code. For more features see Post Thumbnails in the Codex.

When you go to your Post Edit screen you will now see a metabox called Featured Image. Clicking the link, you will be prompted to upload a file. Once you have done that, click the “Use as featured image” link (it’s next to “Insert into post”).

Make a marker declaration in the loop

We’re going to move our marker declaration into the WordPress loop. We are going to add another parameter to our locations variable, so in index.php look for the line:

info : document.getElementById('item<?php echo $i; ?>')

And place a comma at the end of it.

Because Featured Images are not required by WordPress when publishing a post, we will test if one has been set and to provide a fallback. On the next line include the following test:

<?php if ( has_post_thumbnail() ) { ?>
	// There is a Featured Image
<?php } else { ?>
	// No Featured Image, use fallback
<?php } ?>

And under “use fallback”, define a fallback image

// No Featured Image, use fallback
marker : new google.maps.MarkerImage('<?php echo get_stylesheet_directory_uri() ?>/pink_Marker.png', new google.maps.Size(20, 34) )

Get the path to the Featured Image

The normal way to access the post thumbnail is to use the the_post_thumbnail() function, but this returns a full img tag. We want only the image path, so let’s make our own function that does this. Open functions.php and add:

function get_thumbnail_path($post_ID) {
	$post_image_id = get_post_thumbnail_id($post_ID->ID);
	if ($post_image_id) {
		$thumbnail = wp_get_attachment_image_src( $post_image_id, 'post-thumbnail', false);
		if ($thumbnail) (string)$thumbnail = $thumbnail[0];
		return $thumbnail;
	}	
}

And back in index.php, under the “There is a Featured Image” comment, create a marker declaration that includes a call to the function:

// There is a Featured Image
marker : new google.maps.MarkerImage('<?php echo get_thumbnail_path($post->ID); ?>', new google.maps.Size(20, 34) )

Update the map JavaScript

Last but not least, we’ll modify the maps.js to reflect our changes. Find the line that declares the “pinkmarker”:

var pinkmarker = new google.maps.MarkerImage('/wp-content/themes/mapdemo/pink_Marker.png', new google.maps.Size(20, 34) );

and remove it; it’s no longer needed. Next, look for the line:

icon: pinkmarker,

And change it to:

icon: locations[i].marker,

And that’s it! Save everything and you should now see the featured image loaded as the marker.

Posted March 2012

  • Facinet Touré

    Fantastic, Will use user picture instead. many thanks.

  • it seems to take the first 20 pixels on the x-axis, and first 34 pixels on the y-axis, when creating the image for the marker. Is there a more intelligent way to manipulate the image so it’s somewhat recognizable when used as a marker? Otherwise this isn’t really useful, as the cropped 20×34 area from 0,0 doesn’t look like anything (often a solid color, like black.)

    • martyspellerberg

      Hi Adam. See the part new google.maps.Size(20, 34)? That’s setting the size. You can set it to an arbitrary size or, better, get the image dimensions from WP.

      • I figured.. that’s what it’s SUPPOSED to be doing. But instead of re-sizing, it’s just clipping/cropping the top-left corner of my image. Shouldn’t it be re-sizing the image until it reaches one of those dimensions, rather than cropping it from 0,0 to 20,34?

        Surely nobody’s featured image is this small. There must be a re-sizing step that isn’t working only for me?

  • Chris

    Hey, not sure if you will still be answering questions here or not, but I was wondering if you knew what I need to do so that clicking on the featured image marker will link straight to the page that the post is on, rather than opening up an info box?

    • martyspellerberg

      That’s not something I’ve tried to do myself, but it looks like there’s people out there who’ve done it. Here’s a thread on Stack, for instance…

      http://stackoverflow.com/questions/2489483/google-maps-marker-click-event

      • Chris

        Awesome, I managed to get it working 😀

        Thanks for the awesome tutorial btw, it totally saved me 🙂
        Will link you to the site once it’s live if you’re interested!

  • Douglas Haynes

    How do I add the featured image in to the info box?

  • Douglas Haynes

    Just tried to use an animated gif as the featured image it doesn’t animate as the map pin,would have been cool.

This website is hosted by Media Temple. Thanks, guys!