Center latest post on Wordpress map

CMS & WordPress
1

I have set up my theme to plot my posts on a map using a geo coder plugin and then calling the lattitude and longditude form with in a loop to display all my posts and this is working really well. But now I am at a bit of a road block as I now want my latest post to be the point that is centered, currently I am using fixed coordinates to center the map.

Here is what I am doing.

The JS:


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

function initialize() {
	
	map = new google.maps.Map(document.getElementById('map'), {
		zoom: 4,
		minZoom:3,
		center: new google.maps.LatLng(24.4666667, 54.366666699999996),
		navigationControl: false,
        backgroundColor:'none',
        streetViewControl: false,
	 	mapTypeControl: false,
	 	rotateControl:true,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	});
	var infobox;
	
	infobox = new InfoBox({
         content: document.getElementById("infobox"),
         disableAutoPan: false,
         maxWidth: 150,
         pixelOffset: new google.maps.Size(-140, 0),
         zIndex: null,
         boxStyle: {
            background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/tipbox.gif') no-repeat",
            opacity: 0.75,
            width: "280px"
        },
        closeBoxMargin: "12px 4px 2px 2px",
        closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
        infoBoxClearance: new google.maps.Size(1, 1)
    });

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

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

}

and the php:


<?php if ( have_posts() ) : ?>
			<!-- WordPress has found matching posts -->
			<div style="display: none;">
				<?php $i = 1; ?>
				<?php while ( have_posts() ) : the_post(); ?>
					<?php if ( get_geocode_latlng($post->ID) !== '' ) : ?>
						<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>
			<script type="text/javascript">
				var locations = [
					<?php  $i = 1; while ( have_posts() ) : the_post(); ?>
						<?php if ( get_geocode_latlng($post->ID) !== '' ) : ?>
							{
								latlng : new google.maps.LatLng<?php echo get_geocode_latlng($post->ID); ?>,
								info : document.getElementById('item<?php echo $i; ?>')
						},
						<?php endif; ?>
					<?php $i++; endwhile; ?>
				];
			</script>
			<div id="map" style="width: 100%; height: 100%;"></div>

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

This basicly allows me to pull the posts with get_geocode_latlng and then plot them on the map as well as include a infobox with each one.

Any ideas on how I could get this to centre on the latest post?

2

I managed to figure this out. if anyone eles is interested here is what you do.

Move the js to the index.php:

 <script  type="text/javascript">
		var infowindow = new google.maps.InfoWindow();
		var shadow = new google.maps.MarkerImage('/wp-content/themes/maps/shadow.png', new google.maps.Size(37, 34) );
		
		function initialize() {
			
			<?php

			$the_query = new WP_Query('showposts=1');

			while ( $the_query->have_posts() ) : $the_query->the_post();
				$coordinates = get_geocode_latlng($post->ID);
			endwhile;

			?>
			
			map = new google.maps.Map(document.getElementById('map'), {
				zoom: 4,
				minZoom:3,
				center: new google.maps.LatLng<?php echo $coordinates ?>,
				navigationControl: false,
		        backgroundColor:'none',
		        streetViewControl: false,
			 	mapTypeControl: false,
			 	rotateControl:true,
				mapTypeId: google.maps.MapTypeId.ROADMAP
			});
			var infobox;
			
			infobox = new InfoBox({
		        content: document.getElementById("infobox"),
		        disableAutoPan: false,
		        maxWidth: 150,
		        pixelOffset: new google.maps.Size(-140, 0),
		        zIndex: null,
		        boxStyle: {
		        background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/tipbox.gif') no-repeat",
		        opacity: 0.75,
		        width: "280px"
		        },
		        closeBoxMargin: "12px 4px 2px 2px",
		        closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
		        infoBoxClearance: new google.maps.Size(1, 1)
		    });
		
			for (var i = 0; i < locations.length; i++) {
				var marker = new google.maps.Marker({
			    	position: locations[i].latlng,
					/* icon: pinkmarker, */
					icon: locations[i].marker,
					shadow: shadow,
					map: map
				});
		
			    google.maps.event.addListener(marker, 'click', function(marker, i) {
			      return function() {
			      	infobox.setContent(locations[i].info);
			        infobox.open(map, marker);
			        map.panTo(locations[i].latlng);
			      }
				}(marker, i));
			}
		
		}
		</script>

The query will get the Geo latlng for the latest post and place it in the center.