Displaying WordPress custom post types on a Google map

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:

http://pointatthemoon.co.uk/2013/02/creating-a-clickable-google-map-of-blog-posts-using-wp_query-in-wordpress/

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:

http://pbcecology.thelongmoment.com/directory/

My map-page.php:

<?php

    $args = array(
    'post_type' => 'location', // or define custom post type here
    'meta_key' => latlng // whatever key you have given your custom meta
    );

    $map_page = new WP_Query($args);

    if( $map_page->have_posts() ) : ?>

    <div style="display: none;">

        <?php $i = 1;

         while ( $map_page->have_posts() ) : $map_page->the_post();

         // just test to see if there is a lat value - if so carry on
          if ( get_post_meta($post->ID,  latlng, true) !== '' ) : ?>

        <div id="item<?php echo $i; ?>"

        // pull in your post thumbnail
        <?php get_the_image( array( 'meta_key' => 'Thumbnail', 'size' => 'thumbnail' ) ); ?>

        // pull in your post permalink
        <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>

        // in fact pull in any other data from your post that you might want to use ;)

        </div>

        <?php endif; ?>

        <?php $i++;    ?>

    <?php endwhile; ?>

    </div>
<div id="map-canvas" style="width:100%; height:600px;"></div> 
    <script type="text/javascript">

    var locations = [

        <?php  $i = 1; while( $map_page->have_posts() ) : $map_page->the_post();

        // pull out our lattitude and longitude values and concatenate to use in Google maps
        if ( get_post_meta($post->ID,  latlng, true) !== '' ) :

        $latlong = get_post_meta($post->ID,  latlng, true);


        $latlng = "$latlng";

        ?>
        {
        latlng : new google.maps.LatLng<?php echo $latlng; ?>,
        info : document.getElementById('item<?php echo $i; ?>')
        },

        <?php endif; ?>

        <?php $i++; endwhile; ?>
    ];

    </script>



    <?php

else :

endif; ?>

My map.js:

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 < 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);

}

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).

Any insight you can provide would be much appreciated!