Google マップに同心円と文字を入れたい

ホームページ上のフレームに、Google マップのある地点を中心に、1km/3km/5km/10kmなどの同心円（半透明で外側ライン）とその距離の表示をしようとしています。
クリックで動かさず、同心円と表示は固定です。
お店からの距離になります。

同心円は、以下のページを見て書き込めました。
http://www.nanchatte.com/map/circle-v3.html

しかし、1kmならばその円の近くに「１km」と表示する方法がわかりません。
どなたか、教えてください。

Googleマップの「立て札」の入れ方は情報が得られますが、
それではなく単に「１km」などの文字を入れたいだけです。
Googleマップの縮尺を変えても文字は読めることが、前提となります。

簡単なことで、聞いているとしたら申し訳ありません。
Java系は初心者です。

No.1 ベストアンサー 回答者： fujillin 回答日時： 2011/04/25 22:21

よく知りませんので、他にも方法があると思いますが、とりあえずそれっぽいものを。

1）普通に文字を入れるのなら、infoWindowが用意されています。
http://code.google.com/intl/ja/apis/maps/documen …
これだとユーザがクローズできたりするので…

2）makerを利用して、文字（＝画像）を入れている例
http://www.tizdes.net/test_tile02.php?v=0.1

3）カスタムOverlayViewを利用して、文字を入れている例
http://www.mwsoft.jp/programming/googlemap/googl …

この回答への補足

いただいた情報で、いろいろやってみましたが、知識不足でうまく行きません。

1.同心円を描くプログラム
http://www.nanchatte.com/map/circle-v3.html

2.マーカーを立てるプログラム
http://googlemaps.googlermania.com/google_maps_a …

3.画像を表示をするプログラム
http://www.tizdes.net/test_tile02.php?v=0.1

の3ヶをエラーなく動かしたいのですがよく判りません。
さらなる知識お願いします。

1.同心円を描くプログラム：
<script type="text/javascript">
var myLatLng = new google.maps.LatLng(35.458782,139.604167);
var myMap = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scaleControl: true,
scrollwheel: false
});
new google.maps.Circle({
center: myLatLng, // 中心点(google.maps.LatLng)
fillColor: '#ff0000', // 塗りつぶし色
fillOpacity: 0.5, // 塗りつぶし透過度（0: 透明 ⇔ 1:不透明）
map: myMap, // 表示させる地図（google.maps.Map）
radius: 5000, // 半径（ｍ）
strokeColor: '#ff0000', // 外周色
strokeOpacity: 1, // 外周透過度（0: 透明 ⇔ 1:不透明）
strokeWeight: 1 // 外周太さ（ピクセル）
});
</script>

2.マーカーを立てるプログラム：
・APIキーは取得しました。
・経度/緯度は同じです。

<script src="http://maps.google.com/maps?file=api&v=2&key=[あなたのAPIキー]" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[

function load() {
if (GBrowserIsCompatible()) {

//地図を作成
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(35.458782,139.604167), 16);

//マーカーを追加
var marker = new GMarker(new GLatLng(35.458782,139.604167));
map.addOverlay(marker);

3.画像を表示をするプログラム：
・同心円の円弧のあたりに、ｘkmと画像で入れたいので、
中心座標は変えます。
・以下のscriptは、半透明のタイルを敷く部分も入ってますが、
　それは削除したいのですが、残す部分が不明です。

<script type="text/javascript">
//<![CDATA[
var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.addControl(new GScaleControl());
map.setCenter(new GLatLng(35.68184060244453, 139.74334716796875), 14);

var tilelayer = new GTileLayer(new GCopyrightCollection(), 0, 17);
tilelayer.getTileUrl = function() {return "./png/white.png";};
tilelayer.getOpacity = function() {return 0.3};
map.addOverlay(new GTileLayerOverlay(tilelayer));

point = new GLatLng(35.67082446779076, 139.73012924194336);
map.addOverlay(createMarker(point));

function createMarker(point) {
var icon_c = new GIcon();
icon_c.image = "./png/test_tile02.png";
icon_c.iconSize = new GSize(200, 20);
icon_c.iconAnchor = new GPoint(0,20);

var marker = new GMarker(point,icon_c);
return marker;
}

var request = GXmlHttp.create();
//]]>
</script>

超初心者的で申し訳ありませんが、助けてください。

補足日時：2011/04/29 08:20