こんばんは。武田です。
秋の夜長はプログラムに限りますね。
Google Maps APIというものがありまして、あのGoogleマップに吹き出しなどを表示させることが出来ます。

スマートフォンのGPS機能を使い、俳句を詠んだ場所を記録できないかと考えて作った「Haiker」というアプリがあるのですが、その中でこの機能を使わせて頂きました。

Google Maps APIを使っている部分だけ抜き出して更に簡易的に使える関数を作ってみました。

gMapsAPI.js

/*
 * gMapAPI.js
 *
 *	Google Maps API簡易呼び出し関数
 *
 *	@param
 *		lat			緯度
 *		lng			経度
 *		text			吹き出しの文字列
 *		zoomLevel	ズームレベル（1で世界全図）
 *		mapId		地図の表示場所（HTMLでのid指定）
 *
 *
 */

function showGoogleMap(lat, lng, text, zoomLevel, mapId){
	var mapid = document.getElementById(mapId);
	// マップの初期化
	var myMap = new google.maps.Map(mapid,{
		zoom: zoomLevel,									// ズームレベル
		center: new google.maps.LatLng(lat, lng),			// 中心点緯度経度
		scaleControl: true,									// 距離目盛の表示
		mapTypeId: google.maps.MapTypeId.ROADMAP		// 地図の種類
	});
	// マーカーの設定
	var myMarker = new google.maps.Marker({
		position: new google.maps.LatLng(lat, lng),			// マーカーの緯度経度
		map: myMap
	});
	// 吹き出しの設定
	var myInfoWindow = new google.maps.InfoWindow({
		content: text										// 吹き出しの文字
	});
	// 吹き出しを表示
	myInfoWindow.open(myMap, myMarker);
	// 吹き出しが閉じられた場合、マーカークリックすると再度開く設定
	google.maps.event.addListener(myInfoWindow, "closeclick", function(){
		google.maps.event.addListenerOnce(myMarker, "click", function(event){
			myInfoWindow.open(myMap, myMarker);
		});
	});
}

使うときはhtmlのhead部分に下記を読み込んで、

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="http://torisky.com/libs/gMapsAPI.js"></script>
<style>
#map{	/* マップ表示エリアのサイズを指定しないと何も表示されない */
	width: 500px;
	height: 500px;
}
</style>

表示したい位置にdivタグを指定します。

<div id="map"></div>

吹き出しには普通の文字列以外にタグも使えますので、こんな感じにも出来ます。

これを使って芭蕉の「奥の細道」みたいなことをGoogleマップ上で再現してみたいですね。

サンプルを見る