title: Displaying Wordpress custom post types on a Google map
body: <p>I am attempting to display a Wordpress custom post, 'location', on a Google map, using a custom field called 'latlng', containing map co-ords. I have found instructions on how to do this here:</p>
  
  <p><a href="http://pointatthemoon.co.uk/2013/02/creating-a-clickable-google-map-of-blog-posts-using-wp_query-in-wordpress/" rel="nofollow">http://pointatthemoon.co.uk/2013/02/creating-a-clickable-google-map-of-blog-posts-using-wp_query-in-wordpress/</a></p>
  
  <p>Unfortunately, for a reason unknown to me, my map is not displaying at all. I will post my code below, I have tried to fit it to my situation, but my understanding of PHP and Javascript is very limited. I have opened firebug, but don't see any errors. The page the map is on is here:</p>
  
  <p><a href="http://pbcecology.thelongmoment.com/directory/" rel="nofollow">http://pbcecology.thelongmoment.com/directory/</a></p>
  
  <p>My map-page.php:</p>
  
  <pre><code>&lt;?php
  
      $args = array(
      'post_type' =&gt; 'location', // or define custom post type here
      'meta_key' =&gt; latlng // whatever key you have given your custom meta
      );
  
      $map_page = new WP_Query($args);
  
      if( $map_page-&gt;have_posts() ) : ?&gt;
  
      &lt;div style="display: none;"&gt;
  
          &lt;?php $i = 1;
  
           while ( $map_page-&gt;have_posts() ) : $map_page-&gt;the_post();
  
           // just test to see if there is a lat value - if so carry on
            if ( get_post_meta($post-&gt;ID,  latlng, true) !== '' ) : ?&gt;
  
          &lt;div id="item&lt;?php echo $i; ?&gt;"
  
          // pull in your post thumbnail
          &lt;?php get_the_image( array( 'meta_key' =&gt; 'Thumbnail', 'size' =&gt; 'thumbnail' ) ); ?&gt;
  
          // pull in your post permalink
          &lt;a href="&lt;?php the_permalink(); ?&gt;"&gt;&lt;?php the_title(); ?&gt;&lt;/a&gt;
  
          // in fact pull in any other data from your post that you might want to use ;)
  
          &lt;/div&gt;
  
          &lt;?php endif; ?&gt;
  
          &lt;?php $i++;    ?&gt;
  
      &lt;?php endwhile; ?&gt;
  
      &lt;/div&gt;
  &lt;div id="map-canvas" style="width:100%; height:600px;"&gt;&lt;/div&gt; 
      &lt;script type="text/javascript"&gt;
  
      var locations = [
  
          &lt;?php  $i = 1; while( $map_page-&gt;have_posts() ) : $map_page-&gt;the_post();
  
          // pull out our lattitude and longitude values and concatenate to use in Google maps
          if ( get_post_meta($post-&gt;ID,  latlng, true) !== '' ) :
  
          $latlong = get_post_meta($post-&gt;ID,  latlng, true);
  
  
          $latlng = "$latlng";
  
          ?&gt;
          {
          latlng : new google.maps.LatLng&lt;?php echo $latlng; ?&gt;,
          info : document.getElementById('item&lt;?php echo $i; ?&gt;')
          },
  
          &lt;?php endif; ?&gt;
  
          &lt;?php $i++; endwhile; ?&gt;
      ];
  
      &lt;/script&gt;
  
  
  
      &lt;?php
  
  else :
  
  endif; ?&gt;
  </code></pre>
  
  <p>My map.js:</p>
  
  <pre><code>var infowindow = new google.maps.InfoWindow();
  
  
  
  function initialize() {
      var map = new google.maps.Map(document.getElementById('map-canvas'), {
          zoom: 6,
          center: new google.maps.LatLng(54.072283,-125.093995),
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          scrollwheel: false
      });
  
                  var markers = [];
              for (var i = 0; i &lt; locations.length; i++) {  
  
                  var marker = new google.maps.Marker({
                      position: locations[i].latlng,
                      map: map
                  });
  
                          markers.push(marker);
  
                  google.maps.event.addListener(marker, 'click', (function(marker, i) {
  
                      return function() {
                          infowindow.setContent(locations[i].info);
                          infowindow.open(map, marker);
                        }
  
                  })(marker, i));
  
          }
  
      // the following var sets up varying sized icons to be used at different zoom levels with markerClusterer
      // http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/docs/examples.html
  
      var styles = [{
          url: 'http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/m1.png',
          height: 50,
          width: 50
      }, {
          url: 'http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/m3.png',
          height: 60,
          width: 60
      }, {
          url: 'http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/m4.png',
          height: 75,
          width: 75
      }];
  
      var mcOptions = {gridSize: 40, maxZoom: 15, styles: styles};
  
      var markerCluster = new MarkerClusterer(map, markers, mcOptions);
  
  }
  </code></pre>
  
  <p>As per the instructions, I also have a markerclusterer.js, which I won't post the code for (unless requested, but I got it from the Google Maps Utility Library). </p>
  
  <p>Any insight you can provide would be much appreciated!</p>