ついに夏本番!さぁ、家族でキャンプに行くぞ! >>

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

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

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

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

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

このQ&Aに関連する最新のQ&A

A 回答 (1件)

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




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, // 半径(m)
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.画像を表示をするプログラム:
・同心円の円弧のあたりに、xkmと画像で入れたいので、
中心座標は変えます。
・以下の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
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QGoogleマップへの書き込みの方法

お訊ねします。
Googleマップに特定の場所を書き込みたいのですが,その方法を教えて頂けないでしょうか。

Aベストアンサー

アカウントをとる

アカウントでログインする

MAPを開いてマイプレイスを押す

書き込みやマークをつけるアイコンが出るので 書き込んだ後保存を押す。

一旦画面を閉じて、もう一度MAPを開いてマイプレイスを開くと 保存した表題がリストにでるので
右上のリンクボタンで開いたURLを相手に教えたり、貼り付けたりすると貴方の書き込んだ状態の
MAPが表示される。

Qgoogleマップを半径表示させるには?

Googleマップで新宿駅から半径2キロを表示させたいんですけどどうすればいいですか?

Aベストアンサー

#1です。
この3つはすでに知っていた?
それを最初に書いてください。

http://www.benricho.org/map_circleLine/
はどうですか?
コマンドパネルが邪魔ですが、表示の範囲は広がります。

Qgoogleやyahooの地図を切り取って加工

googleやyahooの地図を切り取って加工
そしてそれをプリントアウト または
自作HPに張り付けることはできますか?

OS:vista

Aベストアンサー

1.目的のGoogleやYahoo!地図を画面に表示させる。
2.キーボードのF11で、全画面にする。
3.キーボードのPrtScm/SysRqを押す。(一見、何の変化も起こりません)
4.ペイントを開く
(ペイントは、スタート>すべてのプログラム>アクセサリー のメニューにあります。
 事前にペイントを開いて、準備しておくと便利です)
5.ペイント画面で、上段のメニューバーの「編集」をクリックし、「貼り付け」をクリック。
6.ペイント画面に地図が表示されます。
7.ペイント画面の左欄のツールで加工してから、保存してもよいのですが、
  一応、このまま保存しましょう。
8.ペイント画面のメニューバーで「ファイル」>「名前をつけて保存」
9.「名前をつけて保存」画面で、「保存する場所」「ファイル名」「ファイルの種類」を決めて「保存」
10.これで、画像が保存されました。
11.あとは加工ですが、保存された画像を右クリックで、「プログラムから開く」で、プログラムを選び、開きます。そしてトリミングその他の様々な加工をします。
以上です。
加工した画像ファイルは、プリントアウトしたりHPに張り付けたり自在です。

1.目的のGoogleやYahoo!地図を画面に表示させる。
2.キーボードのF11で、全画面にする。
3.キーボードのPrtScm/SysRqを押す。(一見、何の変化も起こりません)
4.ペイントを開く
(ペイントは、スタート>すべてのプログラム>アクセサリー のメニューにあります。
 事前にペイントを開いて、準備しておくと便利です)
5.ペイント画面で、上段のメニューバーの「編集」をクリックし、「貼り付け」をクリック。
6.ペイント画面に地図が表示されます。
7.ペイント画面の左欄のツールで加工してか...続きを読む

Qグーグルマップの横に文章を入れたいです

現在FC2ブログを作ってるんですが
アクセス者に分かり易い様にと思い
埋め込みで地図やストリートビューを入れました

これは、旧画面(?)に戻して表示されたタグを
埋め込みに使用した訳ですが

その地図の場所に対して、地図の横に解説文等
文章を入れたいと思うんですが
その様なタグは無いだろうかと云う質問です

ちなみに…もしタグでは無く
スタイルシートが有った場合ですが
私のブログではスタイルシートを使用する場合が滅多に無く

以前に特殊な表示を作る為に
ここで方法を教えて頂いたんですが
もう既に忘れてる位ですから
該当するスタイルシートが有っても
出来ればタグで作りたいんです

尚…私のブログでは画像に対して
横に解説文等を入れる場合は


<a href="画像のURL" target="_blank"><img src="画像のURL" alt="画像のタイトル"
border="0" width="画像のサイズ" height="画像のサイズ" align="left"/></a>解説文<br clear="all">

と云う様にalign="leftと<br clear="all">を使用してますが
グーグルマップでは、この方法は通用しません

そこで、今私の知識で考えられるのが
テーブルタグの中に地図のタグと解説文を入れる事位…つまり

<table border=0>
<tr>
<td>地図</td>
<td>解説</td>
</tr>
</table>

この位しか分かりません

この他で、地図の横に
解説文を入れられるタグは無いでしょうか?
また、御存知なら
それを解説してるHP等を御紹介頂いても結構です

現在FC2ブログを作ってるんですが
アクセス者に分かり易い様にと思い
埋め込みで地図やストリートビューを入れました

これは、旧画面(?)に戻して表示されたタグを
埋め込みに使用した訳ですが

その地図の場所に対して、地図の横に解説文等
文章を入れたいと思うんですが
その様なタグは無いだろうかと云う質問です

ちなみに…もしタグでは無く
スタイルシートが有った場合ですが
私のブログではスタイルシートを使用する場合が滅多に無く

以前に特殊な表示を作る為に
ここで方法を教えて頂いたんですが
も...続きを読む

Aベストアンサー

結局埋め込みタイプを採用したようですね。
地図の中にテキストを表示しないで、地図の右側にテキストを表示したい。ですね?
align="left"使えますよ。
画像をフレーム(地図)に置き換えれば良いと思います。

地図の下の「大きな地図で見る」は、地図中の「Googleマップで見る」と被るので削除。
例えばこんな感じで。
http://www13.plala.or.jp/torayoshi/googlemap.html

QGoogleマップを印刷しようとするとA4の上半分になる。

タイトル通りですが、A4縦で印刷しようとすると、上半分位しか印刷が出来ません。
ページ設定ではA4縦、100%になってます。
IE、Firefox、Chromeどれも駄目でした。GoogleマップもしくはGooleの設定ですかね。

※最近PCの調子が悪く再インストールしたのですが、Googleマップの印刷設定は直りませんでした。
ご存知の方教えて下さい。

Aベストアンサー

> Googleマップを印刷しようとするとA4の上半分になる。

横長の地図範囲を印刷しようとするとそのようになりますので、ページ設定を横長に変更する必要があります。

縦長の用紙に印刷する場合は、地図画面を縦長に表示して印刷すれば、ご希望のように印刷できます。

Qインターネット上にある地図をコピーしてEXCELに貼り付けたいのですが

インターネット上にある地図をコピーしてEXCELに貼り付けたいのですが?
通勤経路を書類にて作製し、提出しなければなりません。(←どうでもいいことですが・・・)
で、Yahoo地図でもグーグル地図でも何でもいいのですが、貼り付け方を教えてください。

Aベストアンサー

キーボード右上くらいにPrintscreenてボタンありますよね。
自分が貼り付けたい画面を表示した時に、そのボタンを押してください。
そして、エクセル上で、右クリックし貼り付けを選択。
後は、不必要な部分を切り取って、プリントアウトです。

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

Qエクセルに写真の貼り付けが出来ません。

画像をコピーし、エクセルに貼り付けることが出来ません。(エクセル画面にすると貼り付けを選択することが出来ない状態)ワードでは同じ作業で貼り付けれるのですが、何かの設定がおかしいのでしょうか?
あと、ワードやエクセルに写真をコピーした時、画像が大きくてはみ出してしまうのですが、その大きさを前もって調製することはできるのでしょうか?
その方法を教えてください。宜しくお願いします。

Aベストアンサー

エクセルのバージョンがわかりませんがエクセル2007の場合、エクセルを起動して「挿入」>「図」>入れたい画像を選ぶ
で入れられました。

「コピー」ではなく、いったん画像をデスクトップやよく使うフォルダへ保存してから挿入してみてはどうでしょうか?

画像の大きさの変更ですが、エクセルに入れ前に大きさを変えたいということですので、フリーソフトなどでペイントソフトなどを探して、それで画像を加工してから上書き保存や別の名前を付けて保存して、それを挿入してみてはいかがでしょう?

http://www7.ocn.ne.jp/~otoku/free-s-gazousakusei.htm
ここに色々ソフトがあります。
ただ、新らしいソフトを使うということで、そのソフトの使い方になれる必要はあると思います。

QWord 文字を打つと直後の文字が消えていく

いつもお世話になっています。
Word2000を使っているものです。
ある文書を修正しているのですが,文章中に字を打ち込むと後ろの字が消えてしまいます。
分かりにくいですが,
「これを修正します。」
という文章の「これを」と「修正します。」の間に「これから」という単語を入れたときに,その場所にカーソルを合わせて「これから」と打つと,
「これをこれからす。」
となってしまいます。
他の文書では平気です。
何か解決する方法があれば教えて下さい。

Aベストアンサー

入力モードが「挿入」(普通の入力)から、「上書き」になってしまっているのだと思われます。
キーボードに[Insert]というキーがあると思いますので、1度押してみてください。

Qエクセル 表を大きく、紙いっぱいに印刷したい

エクセルで表を作りました。
印刷プレビューで確認したところ
用紙に対して表が小さく見栄えがしません。

一つ一ついじればできると思いますが、
簡単に、
用紙いっぱいにフォントも大きくし、表も大きくし、
印刷するやり方はありますか。
教えてください。

Aベストアンサー

CtrlキーとPのキーを同時に押すと「印刷」ダイアログが呼び出せます。その状態でAltキーとWのキーを同時に押すと「印刷プレビュー」が表示されますので、印刷のイメージがつかめます(必ずしもプレビュー通りには印刷されませんが)
印刷プレビュー画面の上にある、設定のボタンを押してあげれば、余白を少なくしたり、拡大縮小印刷をパーセンテージを指定しておこなえたりします。いずれにせよ、プレビューで確認しながら拡大率を決めていけばいいと思います。なお、「拡大縮小印刷」のところに「次のページ数に合わせて印刷をする」というチェックをいれて横1×縦1にしてあげれば自動で拡大縮小印刷ができる場合がありますが、やってみればわかりますが、特に縮小印刷の場合小さくなりすぎたりする場合もあります。


人気Q&Aランキング