I've done this in the past using the Google Static Maps API. We have a load of spans that look like this:
<a href="#" class="showMap">
<span class="googlemaps" data-image="http://maps.googleapis.com/maps/api/staticmap?zoom=13&size=400x214&markers=color:green|52.503679,13.448807&sensor=false&key=YOURKEY">Show map</span>
</a>
Then there's some javascript attached to all those spans that takes that data-image attribute and calls the URL defined there, loading that content as a tooltip:
// Capture the data-image attribute and attach tool tips to them
$(document).ready(function() {
$("span.googlemaps[data-image]").tooltip({
showURL: false,
track: true,
bodyHandler: function() {
return $("<img/>").attr("src", $(this).attr("data-image"));
},
extraClass: "imgTooltip"
});
});
This is using the jQuery Tooltip plugin. You can see a working example of this here.