Integrating WordPress and Google Maps API V.3

Here we will go through the steps for creating a Google Maps interface for a WordPress blog. Posts will appear as markers on the map, which you can click to reveal the post content in the Google Maps Infowindow.

Download a ZIP of the complete example.

Note, August 24 2013: In August 2013 Google updated the API to a new visual style that more closely matches their core products. One of the changes is that markers no longer display shadows. There may be other side effects as well, though as of this writing everything else seems to work properly. More investigation is warranted.

Also, a lot of people have trouble getting their markers to display. Often this has to do with the path to the image file. If you download the ZIP from Github, you will likely need to update the paths in map.js. Eventually I’ll revise the tutorial to address this, but in the meantime it’s something to keep an eye out for.

I’m starting with a fresh WordPress install, which at the time of this writing is v. 3.3.1. You may be modifying an existing theme, but for the sake of this tutorial, I’ll start a new one. But note that I’ll be doing only the minimum here to create a working demo, omitting much that is necessary for an actual, standards-compliant and useful website.

Add Location Data to Posts

Update: I’ve published the Address Geocoder plugin for WordPress that simplifies the process of adding location data to posts. I recommend using it instead of the custom fields technique outlined here. After installing it, skip to the next section, “Initialize Custom Theme,” below. Your code will need to be modified in three places, as noted below.

Custom Fields metabox

In order to know where to place a marker on a map, the Google Maps API needs to be supplied with latitude and longitude coordinates in the format of a LatLng object. We’re going to include this as a Custom Field with our posts.

Navigate to the Post Edit page and scroll down to the Custom Fields box. (If you don’t see it, you may need to turn it on via the Screen Options button at the top of the page.)

Name the custom field “latlng.” Now, there are various geocoding services on the web that allow you convert an address to latlng (including the Google Maps API itself, but that’s another topic). For this example we’ll use the White House. Go to Geocoder.us and enter “1600 Pennsylvania Avenue NW, Washington DC”. It will spit out a number in brackets such as (38.898748, -77.037684). Use that as the value and press Add Custom Field.

If you like, you can optionally create a few more posts and geocode them with locations in Washington DC.

Initialize a Custom Theme

In the wp-content/themes directory, create a new folder; mine will be called mapdemo. In this new folder, create a blank file called style.css and one called index.php; these are the minimum needed to created a WordPress theme. Also create a file called map.js.

To make our theme recognizable by WordPress we will place what’s called a theme header into our style.css. The very minimum header is as follows:

/* 
Theme Name: Map Demo
*/

You can now go ahead and activate your theme using the WordPress dashboard (Appearance -> Themes). But if you load your blog at this point you will see that it’s totally blank. Let’s put in the bare-bones of an HTML page, with a couple of functions required by WordPress. Put the following into index.php:

<html>
	<head>
		<title>Maps Test</title>
		<?php wp_head(); ?>
	</head>
 
	<body>
		<?php wp_footer(); ?>
	</body>
</html>

Link the JavaScript Files

Our map will be created using two JavaScript files: The Google Maps API library and our own maps.js. We do this in the head section of index.php, after the title tag. To include the API we will link directly to the file on Google’s server:

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

And to include maps.js we will do something similar, but you’ll notice that we use WordPress’ get_stylesheet_directory_uri() function to dynamically write the path to the file in our theme directory:

<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri() ?>/map.js"></script>

Create the Map

WordPress uses something called The Loop to display posts. Let’s get that started by testing if, given the parameters passed via the URL, WordPress has any posts to display. In index.php, after the opening body tag, write:

<?php if ( have_posts() ) : ?>
	<!-- WordPress has found matching posts -->
<?php else : ?>
	<!-- No matching posts, show an error -->
	<h1>Error 404 &mdash; Page not found.</h1>
<?php endif; ?>

Note: If you are interested in using this with a custom post type, depending on the context your loop may look different. Perry at Point At The Moon has posted a follow-up tutorial that includes custom post types.

Next create a DIV element that will be the container for our map; we’ll tell the API its name and Google will fill it with magic! We’ll use CSS to make it fill the window. After the line with the “WordPress has found matching posts” comment, write:

<div id="map" style="width: 100%; height: 100%;"></div>

Now open up maps.js. We’re going to create a JavaScript function that loads in a map with a few settings, which I won’t go into the details of here, but are well documented. Write:

function initialize() {
	map = new google.maps.Map(document.getElementById('map'), { 
		zoom: 12, 
		center: new google.maps.LatLng(38.898748, -77.037684), 
		mapTypeId: google.maps.MapTypeId.ROADMAP 
	});
}

Note: I’ve created a follow-up post on centering the map on the latest post.

But, like all functions, it’s not enough to define it — it must also be called. We’ll do this by modifying the body tag of index.php, like so:

<body onload="initialize()">

Reload your page and you should now see a map filling the window, centred on Washington DC.

Place the Markers

The way we’re going to get our markers onto the map is to:

  1. create a list (an array) of locations;
  2. specify the images we’re going to place at those locations;
  3. then go through (iterate) through the list, placing each one.

First up, the locations. We’re going to finish up that WordPress loop we started, where for each post we output an item in an array called “locations.” At this point we’re going to output only our “latlng” custom field, not the post title or content or any of the others. In index.php, right above the div with the ID of “map”, write this:

<script type="text/javascript">
	var locations = [
		<?php  $i = 1; while ( have_posts() ) : the_post(); ?>
			<?php if ( get_post_meta($post->ID, 'latlng', true) !== '' ) : ?>
				{
					latlng : new google.maps.LatLng<?php echo get_post_meta($post->ID, 'latlng', true); ?>, 
				},
			<?php endif; ?>
		<?php $i++; endwhile; ?>
	];
</script>

Note: If you are using the Address Geocoder plugin, here are the first two modifications you need to make. Change the two instances of get_post_meta($post->ID, ‘latlng’, true) to get_geocode_latlng($post->ID).

Next we’ll define the images we want to use as markers. Each marker has two parts — the marker itself and its shadow, and for each you will supply paths to images of your choosing; I’ve included a couple in the ZIP, linked above, or you can use your own. Upload the images into your theme folder. At the very top of maps.js, above the initialize function, write:

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

If you are using your own images you will want to check Google’s documentation of the MarkerImage options to see what each part of these lines mean, so that you can customize them.

Note: I’ve created a follow-up post on using the post’s Featured Image as the marker.

And the final step is to loop through the locations, placing a marker for each onto the map. In maps.js, within the “initialize” function, after the “var map…” block, write:

for (var i = 0; i < locations.length; i++) {  
	var marker = new google.maps.Marker({
    	position: locations[i].latlng,
		icon: pinkmarker,
		shadow: shadow,
		map: map
	});
}

Reload your page and you should now see your marker(s) placed on the map.

Enable the Infowindow

Our last task is to create a Google Maps “infowindow” which will pop-up when a marker is clicked, showing the title and content of the post. We will do this by:

  1. outputting the content into a hidden div;
  2. referencing that div in our array of locations;
  3. and adding what’s known as a “click listener” to our JavaScript function to open the window.

First up, the content. This will be a a second “while” loop, immediately before the one we wrote previously. It will output a series of DIVs, each with a unique ID and containing content to be shown in the infowindow. In index.php, directly following the “matching posts” comment line, write:

<div style="display: none;">
	<?php $i = 1; ?>
	<?php while ( have_posts() ) : the_post(); ?>
		<?php if ( get_post_meta($post->ID, 'latlng', true) !== '' ) : ?>
			<div id="item<?php echo $i; ?>">
				<p><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></p>
				<?php the_content(); ?>
			</div>
		<?php endif; ?>
		<?php $i++;	?>
	<?php endwhile; ?>
</div>

Note: If you are using the Address Geocoder plugin, here’s the third modification you need to make. Change get_post_meta($post->ID, ‘latlng’, true) to get_geocode_latlng($post->ID).

Next add a reference to these DIVs to our locations object. Directly after this line:

latlng : new google.maps.LatLng<?php echo get_post_meta($post->ID, 'latlng', true); ?>,

Add this:

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

Now define the infowindow (documentation at Google). Switch over to maps.js and, at the very top, write this:

var infowindow = new google.maps.InfoWindow();

Finally, add a click listener for each marker. Within the “for…” block of the “initialize” function, after the “var marker…” block, write:

google.maps.event.addListener(marker, 'click', (function(marker, i) {
  return function() {
    infowindow.setContent(locations[i].info);
    infowindow.open(map, marker);
  }
})(marker, i));

And that’s it! Reload the page and you will now be able to click the marker(s), opening up an infowindow containing the post content. Mission accomplished!

Posted February 15th, 2012

  • Perryb

    This is a fantastic tutorial – I adapted it to work with WP_Query() and it worked beautifully.

    Many thanks!

    • Facinet Touré

      Do you mind giving me a hint on how you did that please?
      I believe I am looking to accomplish similar task with worpdress users custom fields

  • Facinet Touré

    great!
    what about if I want to use the address instead of ‘latitude and longitude?

    • martyspellerberg

      You’d like to send the addresses to Google and have them geocoded on the fly each time? At some point I came across a note in Google’s docs saying geocoding is resource intensive and they recommend geocoding once and caching. Thus the Address Geocoder plug-in.

      But maybe you have a specific case where you need to geocode on the fly? Tell me more…

      • Facinet Touré

        well, that was really funny.
        I guess my question was wrongly formulated, but anyway this should do it. However, I might be missing something here because I was not able to reproduce it on the fly. My intention is really to add an extra meta to my wordpress users (contributors) fields such as address and be able to get that field from a group of of users with specific role and pinpoint them on a single map. In fact I am working on a type of directory where I could zoom on the nearest user (with specific role) when a reader enter his zip code in a search box and click search.

        • martyspellerberg

          WordPress treats Users very differently than Posts. For instance you pull users not using wp_query() but with wp_user_query(). I can’t say how much of the approach demonstrated in this tutorial can be applied to users, as I haven’t worked it through. The Maps API aspect might not be too different, though, once you’re delivering it the right data.

          • Facinet Touré

            OK, I could always try to query specific authors’ first post and go from there. At this point I am busy doing other things. By the way I found out google map is not displaying with . Any idea how I could bypass that? So far none of the suggestion out there is working. I am not really sure if it will be a good idea to omit that from wp header.

          • Marty Spellerberg

            Your question makes no sense. Please review and revise.

  • Mapperboy

    Thanks for the well documented example.
    -However, I can’t seem to get the markers to display.
    Do they have to be uploaded to the theme within the WP Media loader?
    I tried the standard uploading procedure and when they appear in my media library the are marked as ‘unattached’. When I bring up the attach dialog, there seems to be nothing to attach to.  Is this because your example did not create a named WP Page or Post or did I miss something entirely.
    Regards,
    -mapperboy

    • martyspellerberg

      In the tutorial I mention uploading them to your theme folder, which would be done using FTP. But yes, you can also use images you’ve uploaded via the Media Library. In the JavaScript, look for the lines beginning with “var pinkmarker =” and “var shadow =”. These contain the paths to the images. Get your paths by going to the “Edit Media” screen and copying the “File URL”, then include them in those lines.

  • Chris

    Thank you sooooo much for this tutorial. Been trying to get this to work with WordPress for a long time. One thing to note, when you call the var locations on the page you need to encompass the get_post_meta in parenthesis or it won’t work (at least when I did it that was the case). I also was able to use the WP_Query and specified a custom post type to only display. This would be useful if you wanted to display different info on different maps.

    Would you care if I posted how to do this using Custom Post types on my blog? I can also provide a link back to your original posting.

    Again, thanks a ton, this rocks!

    • mapperboy

      Hi Chris,
      Did you post your response re Custom Post types on your Blog?
      If so how do I get to your blog? There isn’t a link that I can see here.

      • Chris

        I have not posted one yet, I was waiting to hear back if it was OK but I am going to go ahead and do it today. I will let you know once it is up.

        • martyspellerberg

          Chris, that sounds like a useful companion / follow-up. Yes, please do share the link when you have it. Cheers!

          • http://twitter.com/servigon Emilio Servigon

            Was this link/blog posted at all? I really need help integrating custom post types.

  • jp

    how do you add this to a wordpress page with a theme?

  • Julien

    wow, great tutorial. Thanks a lot.

    I’m working on a Mashup with a great number of geolocated posts, each containing an image or a video that I would like to display on the markers info window on click… Exactly what this tutorial is about!
    However, the technique of writing/hidding all the post contents in #itemi divs increases dramatically the loading time and the page becomes unusable…

    Is there a way to call the post content to be displayed in the marker’s info window after having clicked on the marker?

    Any idea/advice/hint would be greatly appreciated :)

    Hope the english is correct
    Thanks!

  • Jay Wartham

    Great post but i’m not able to follow along because I would like to use this for a custom post type and i’m guessing some parameters have to be changed. Any chance of updating the info for use with custom post types? Thanks

  • Shaun McMillan

    What additions would it take to use my own created image as the map? I would like my 5 graphic design high school classes to work together to design one big custom map. It would be nice if it used google maps api and wordpress to navigate their map.

    • martyspellerberg

      Shaun, that sounds like a neat project! I haven’t researched overlays much, so can’t say much off the top of my head. The implementation would likely be quite different from what I’ve outlined here, however, as markers and overlays are quite distinct.

  • julien

    Hello,

    it’s a great post but i have a problem with displaying the markers. I think i’m missing something when creating the post : is there a special category i need to select or i just have to fill that geocoder field ?

    thanks for helping

    • martyspellerberg

      Hi Julien. No, no special categories or anything. The problem must lay somewhere else. Perhaps you can give more specifics about what you’re experiencing?

      • Guest

        Nor can I make it work. Copying files from the zip and still not worked.

        • http://twitter.com/valeriooficial Valerio Souza

          What can it be?

        • http://diqi.ru Илья

          I unpack and activate the template. But the markers are displayed. I really need your help. thanks

      • http://diqi.ru Илья

        I pointed the wrong way to pink_Marker.png :) Now it worked! Thank you! If I use your plugin
        Geocoder if I can take all of the markers that I added in the post on a one map in index?

  • Pingback: Creating a clickable Google map of blog posts using WP_Query in WordPress : Point At The Moon

  • The Nerger

    This is great. I had to do some tweaking to get it work with a custom genesis theme & custom post types, but the results were great.

    • Marley

      How did you do that ?? I’m working on the same thing right now and I can’t get it work.

      • Douglas Haynes

        same here.

        • martyspellerberg

          Can you make the question a bit more specific?

          • Douglas Haynes

            I can’t get it to work Integrating into an existing theme..I am not using genesis but it should be a similar solution.

        • Nele

          HI! this page is great, but still, I can’t get the marker either.
          Posts are loaded, I can see them in my final html, but no marker shows up, not either in the code.
          I
          tried to install directly your theme zip, and to locate posts with both
          your Geocode plugin or by using custom fields, but no one of them
          worked.
          Did someone find out where the problem is?
          thanks

  • Nele

    HI! this page is great, but still, I can’t get the marker either.
    Posts are loaded, I can see them in my final html, but no marker shows up.
    I tried to install directly your theme zip, and to locate posts with both your Geocode plugin or by using custom fields, but no one of them worked.
    Did you perhaps find out where the problem is?
    thanks

    • martyspellerberg

      Can you share a link to the page that’s not working?

  • Ciaran

    This is a great tutorial, thank you so much.
    I’m trying to integrate this with Overlapping Marker Spiderfier (https://github.com/jawj/OverlappingMarkerSpiderfier) but I can’t get it to work. Any tips would be greatly appreciated?

  • Emanuel

    Hi, I got your theme working but after publicating more than 12 posts it stops displaying all the marker. Do you have any idea about the reason? Many thanks

    • Emanuele

      Reading the source code from the browser, it seems that even though I have over 15 posts, the script renders markers and infowindow up to “item10″.
      Can’t really understand the reason..

      • martyspellerberg

        That sounds like the setting under Settings -> Reading -> “Blog pages show at most”, which defaults to 10 but can be increased.

        • Emanuele Cidonelli

          I thought about it but it’s not. After I raised the number to 100, in the code I can now see all items but no markers shows up. still, they come back if I reduce the number of posts.. should you wish have a look by yourself..
          http://testmap.byethost9.com/

          • martyspellerberg

            Emanuele, while I can’t troubleshoot your site in particular, I’ve done a test on my server and 10+ markers are showng properly.

            http://mapdemo.martyspellerberg.com/

            Perhaps if you compare the two sets of code you will find a discrepency? Sorry I can’t be more specific.

          • Emanuele Cidonelli

            Sorry to reply so late and thanks for your time.
            I found the problem. Some of the ltnlng coordinates were wrong and the script just failed rendering everything.
            I was so stupid not to consider the idea, but I actually thought the geocode plugin wouldn’t let me save the post with a nonexistent address.
            Btw everything works fine now.
            The only real problem having lots of posts is about Infowindow, as I am gonna have about 100posts on the map, all of them will be videos from youtube, and of course I can’t load everything at once. As I don’t want to ajax them for my interface, I am trying to change the marker in url to the post and open the content in targeted popup window.
            Still didn’t manage to make the right call to get the wordpress content corresponding to the marker id, but I will post the results if I succeed.
            If you have any idea meanwhile, it will be also welcome.

  • kentchuwalla

    Hey there, so I have everything working I think, except my pins are not loading. I see that I have locations being loaded, map is there. Except no pins.
    Any chance I am missing something?
    Seems like other people encountered this problem, someone said it was a linking issue. Except I have tried numerous linking paths.

    All the best

    • martyspellerberg

      Do you have a link I can check out?

      • kentchuwalla

        yeah emailed.

        thanks again marty

  • jonjon

    I’ve been unable to show pins on either the main map nor the post itself. I see the pin when entering the geo-code below the post, i update and nothing shows in the post. I’ve edited the index.php and tried various methods for the PNG locations.

    • martyspellerberg

      Link?

  • Ben Racicot

    Great tut here! I’m using Geo Data Store instead of your (awsesome) plugin for reasons beyond comment scope. It saves lat&long in one string like 41.748999,-70.432709 instead of separately. And now I’m getting “Uncaught SyntaxError: Unexpected number” and of course “locations is not defined ” in my console. Do you have any advice on how to use this geo data store method in your loop to define Locations? Test site is ccdraft.tk

    • martyspellerberg

      Your test site seems to be working — did you figure out where the problem was?

      • Ben Racicot

        Hello Marty! Yes just now within minutes of your reply. Thank you. Chris (in the comments) mentioned “you need to encompass the get_post_meta in parenthesis or it won’t work”

  • DeNieD

    Sorry but it doesn’t work. It not load post (source code:

    var locations = [
    ];
    )

    It’s on localhost site so I cannot give a link. The default index page of wordpress works, showing latest post.

  • Pim

    Thank you very much for a great resource Marty! I did have some trouble with displaying the markers though – and it took me a some time before I figured it out. It seems there is something wrong with the code in the download/post, as it didn’t show up for me until I omitted the marker variables (all the location pointers for images etc were correct) from your map.js. It occured both on a local and a served setup, so I suspect I can’t blame configuration.

    I will see if I can find why that happens, I’m trying to integrate it into a roots theme. In the meantime, to anyone reading this and trying to figure out the same thing: omit the (or comment out) the var pinkmarker, var shadow && icon:, shadow: from the map.js.

    Thanks!

    • martyspellerberg

      Interesting. Just this past week Google updated the Maps API to a new visual style. One of the changes is that markers no longer have shadows, though there are likely other side effects as well. I just checked my test site implementing this tutorial and, shadows aside, everything looks OK. I’ll have to find some time to investigate further and update the post. Thanks for sharing your experience, cheers!

      • Pim

        Thanks for your reply Marty. As I was curious what caused it, I have tried it again (using your files), and now there seems to be no problem. So I can confirm that it is *not* your code. I must be something on the maps api side then?

  • Joe Fisher

    I got everything working, though due to time constraints, I couldn’t figure out how to make a custom page with the map, so i created a subdomain and used this great demo as the basis. It’s working fine. One issue I see is that when there are two places sharing one address, I cannot figure out how to display more than one. Here’s a link:
    http://locations.metroswim.org/

    • martyspellerberg

      You might try comparing the values using PHP and finding a way to add both to the same infowindow. Off the top of my head it might involve looping through the posts multiple times — first grab the various unique geocodes and store them in an array; then loop through again, sorting the HTML by geocode (appending HTML from a second matching post to the end of the first’s); then output.

      • Joe Fisher

        Hmm… kind of strange, It’s working today. I didn’t do anything. Is it possible that there was Gmap issue? I notice there are no shadows anymore. Check out the Columbia College two locations, and Baruch College. http://locations.metroswim.org

  • Joe Fisher

    Is there a way of clicking on the post title and have the map show the marker similar to how Gmap behaves? I have the listing of the post titles on the left side and can’t correlate the post title to the map. It works fine on the map itself when clicking on the icon which displays the post contents. I would really like to know if there’s a way, so people can go to their club listing, click on it, and then the map would highlight the icon.

    For instance, if I manually insert a Gmap geocode as a link like this:
    https://maps.google.com/maps?q=41.163495, -73.86282699999998
    I get a Gmap with the correct address, but obviously this is not what I want.

    The site is http://locations.metroswim.org

    BTW – Note that with more than one address for a club, only one shows, so that John Jay College has two clubs, but only one marker shows due to the same address. I tried the original Google icons as per the post by Pim but it didn’t help this issue.

    • martyspellerberg

      Regarding your question about opening infowindows from a sidebar of links, I would say it’s likely possible using JavaScript. It’s outside the scope of this tutorial, but there may be other references out there dealing with triggering infowindows from outside the map.

      • Joe Fisher

        Thanks a lot Marty, but it’s not the info window I’m seeking. When I click on the post title link, it opens (correctly) the post itself, which has the information, but no map within the post, so the user doesn’t see where it is geographically.

        I’m looking to see whether in the post there can be a map so that someone sees the location map. Sort of like the little window in the geocoder plugin.

        The ideal of course is to have the map move and show the location by clicking the post title, or a link within the post.

        I was looking at your other tutorial (thanks again) about centering a “latest” post and trying to figure if it can be used as a base. In my case I don’t care about the “latest” post, but only about the post being focused, clicked, hovered, or whatever action can trigger it. Can you think of an approach?

  • Darko Noir

    The easy way to integrate Google Maps in wordpress that I found is this plugin: http://codecanyon.net/item/google-maps-generator-for-wordpress/5612451?ref=MaGeekLab
    Might it could help! :)

  • Salonglong

    Hello, I want to map displayed on the page.php, how to do?Thank you!

  • Pingback: API holidays from Pusher and Google Maps | sqwabb

  • Nitish Kumar

    Hiiii,i wanted to know that can we use the OverlappingMarkerSpiderfier provided by github for address with sam latitude and longitude..E.g. Consider a case where i have a building and the offices are located on different floors??

  • TMNR

    Hi,
    I was wondering if scripts should be added via wp_enqueue_script() as WP Codex suggests?
    http://codex.wordpress.org/Using_Javascript
    Could you please comment on this and maybe give tips in queening the scripts?
    Thanks

    • martyspellerberg

      Yes, wp_enqueue_script is the better way to load maps.js. And while you’re at it you can, if you want, enqueue the jQuery that comes with WP, instead of using Google’s.

      Also, if you’re feeling like going really advanced you could use wp_localize_script to output the markers:

      http://chriswiegman.com/2013/09/localizing-wordpress-slides-wordpress-austin-advanced-meetup/

      • TMNR

        Thanks Marty, I appreciate your response.
        Have a nice day.

      • TMNR

        Hi again.
        After a month of trials and errors this is driving me insane. I can not get it to work no matter what. At first I tried to do it my way — use wp_enqueue_script, study ant try to utilize wp_localize_script and so on. Then I realized that this might be a bit out of my league and decided to scrap everything and just use your files to experiment, see what happens. The problem is I can’t get the markers to appear. Could you kindly assist me in this matter?

        What I’ve done so far:
        — Downloaded zip via “Download a ZIP of the complete example.” link.
        — Uploaded theme folder to /themes and renamed to “mapdemo”.
        — Installed “Address Geocoder plugin”.
        — Changed three lines of “get_post_meta($post->ID, ‘latlng’, true)” to “get_geocode_latlng($post->ID)” in index.php.
        — Created a post, and added coordinates of Washington DC via the plugin (double checked if custom fields were added — true).
        — Left the paths to images untouched because they are in “mapdemo” folder.

        The link is http://www.megavaras.lt
        WP v3.8.1

        I hope you’ll find a spare minute to review this, ’cause my head is almost gray from frustration.

        • martyspellerberg

          Under Settings-> Reading you’d set the front page to a Page. There’s nothing inherently wrong with that, but the demo code assumes you have Posts on your front page. I did this just to try to keep the demo as simple as possible. Make sure it’s set to Posts and it should work!

          • TMNR

            Thank you again. You’re the best!

  • talk2toks

    Hello, Thanks for this tutorial, it has indeed being helpful. But the challenge am having is i want to be able to fetch post and display them on the map. This javascript code center: new google.maps.LatLng(38.898748, -77.037684), is not making the fetch queries to display on the map.

    Kindly assist in looking into this… It is quite urgent

  • Silvierini

    Hi Marty, I am wondering if there’s a quick way to use a Google map as a featured image on some post of my website. Do you know how to do it? Thank you very much!

    • martyspellerberg

      You wouldn’t be able to actually make it the featured image, but you could modify your theme to show a map instead of / in place of a featured image. This sort of thing is totally doable, but probably not exactly “quick.”

  • okosoft

    Thank you for your artice. Trying to make this theme http://themeforest.net/item/geometry-html-version/5547092 to wordpress. It will appear at http://www.moskva.me. If anybody wants, I can give sources of it.

  • breza

    thanks for this! Is there a way to display all the posts on a map on a ‘page’ rather than on index? tried, but can’t get it to work. The map is loaded though, but the posts are not … many thanks!

    • martyspellerberg

      To bring Posts into a Page, use “get_posts” http://codex.wordpress.org/Template_Tags/get_posts

      • Mark

        Hi Marty, this has been great. I got the map up, but if I want to use a map under my original theme and put a map on a single page. is there a way to do that by writing code within the edit page part?

        • martyspellerberg

          The short answer is “no.” The longer answer is that it’s possible to get WordPress to do that, but the technique for doing it would be completely different from what’s described here.

          • Mark

            thanks. I actually figured out a way to do it, at least partly. I used a php plugin and then posted the php part into my page editor. I changed the style to style=”width: 425px; height: 425px; border: 1px solid #000000;” then I put the .js file in my original theme folder and voila, it worked. now i just need to figure out how to use url parameters to pass the address variable to try and create dynamic maps. Hopefully I can figure that out.

  • Isaak Sabr Abdullaiev

    I have created custom post type and use custom fields
    i have 3 custom field and i need that in loop there would be 3 types of markers (different icons – pictures ) by the type of custom field
    can you help me please how to do it?

  • dan

    Hey. I can’t even get the map to initialize, but I’m not getting any console errors, either… in Dev Tools Network tab, it looks like Google Maps might not be initializing. Anyone else have this issue?

  • orangefrog

    HI! Have to say this is a great plugin especially with the added GeoLocator plugin you created. I am having an issue though. I can;t seem to get the markers to show up. I’m trying to use this with a custom post type i created and I have a funny feeling it’s trying to pull the lat and long from the general posts and not the CPT. Is there a trick to using this with a CPT?

    • martyspellerberg

      I wouldn’t say there’s anything too special about custom post types and maps. It sounds like the issue you’re encountering may have more to do with ensuring your underlying query is outputting the correct posts. I’d recommend doing it without the map first, make sure the data’s all correct, then add the JS.

  • pezzab

    Hi Marty, I’ve been wondering about speeding up the map results (there are over 800 positions to be plotted on my map which are rarely updated) and have looked into fragment caching.

    Admittedly I have only just scratched the surface with this but so far haven’t managed to get it to work (or at least I’ve only got part way).

    I wondered if you have tried this approach at all?

  • mllks

    I’ve used this earlier and got it working easily. Now I tried it, and it won’t show the markers on the map. Everything should be ok. I can see it tracks the posts in the source code correctly, they can be seen both in the “WordPress has found matching posts” -section and in the javascript below that. The image paths are correct and I haven’t changed anything in the code. Should this still work with the latest google maps API? If not, what should I change in it to make it work. I’m in a little hurry with that and I would appreciate your help guys. Thanks!

    • mllks

      Got it!