Adding a geocoded google map to div - google-maps-api-3

Question

I've spent all day looking at the documentation and examples but I'm turning myself inside out. I was hoping I could be directed to the correct way to do this. I'm using jQuery.
The aim is to have a map that shows students where abouts the country is that a story is referring to. I have implemented it once using a cut&paste solution but it doesn't work when toggling the div - to cut a long story short, I feel i need to redo it but am a bit out of my depth. I found elsewhere on here the code for geocoding:
var geocoder = new google.maps.Geocoder();
var address = $("#infopanel .map a.header").text();
map = $("#infopanel .map div");
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var latitude = results[0].geometry.location.lat();
var longitude = results[0].geometry.location.lng();
}
});
And this is the code for adding a map but notice I can't work out how to get the results of the geocoding into the center variable of mapOptions:
var mapOptions = {
center: new google.maps.LatLng(*geocoded-data*),
zoom: 3,
mapTypeId: google.maps.MapTypeId.TERRAIN,
panControl: false,
zoomControl: true,
mapTypeControl: false,
scaleControl: false,
streetViewControl: false,
overviewMapControl: false
};
new google.maps.Map(map,mapOptions);
Here is the slideToggle code with resize/center solution from this answer but again, how do I get the geocoded data into setCenter:
$("#infopanel ul li > div").slideToggle("fast"); // hide the content
$("#infopanel a.header").click(function(e){ // toggle the content.
var hascontent = $(this).next("div");
if (hascontent.length == 1) {
e.preventDefault();
$(this).next().slideToggle("slow", function () {
google.maps.event.trigger(map, "resize"); // resize map
map.setCenter(*geocoded-data*); // center map
});
}
});
And for context, here is the HTML that it will all sit in:
<li class="map">Zimbabwe
<div style="width:220px;height:220px;">Find Zimbabwe on Google Maps</div>
</li>
How do I connect the dots between those three?

Answer 1

Here is a really simple example that sets the center of the map from a geocoded address.
The key is this:
if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
map.setCenter(results[0].geometry.location);
which sets the center of the map to the value returned if the geocode operation is successful.