GoogleMapsAPI都道府県市区町村町域選択

解決済

  • 質問者：mic_goto
  • 質問日時：2013/02/16 16:26
  • 回答数：2件

Googleマップの左カラム上部で都道府県、市区町村、町域、地番を選択できるようになっていますが、GoogleMapsAPIを用いた自分のサイトでも、こういったものを作りたいのですが、どのようにすればできるのでしょうか。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (2件)

No.2ベストアンサー

  • 回答者： yuu_x
  • 回答日時：2013/02/17 20:18

ズームでしたら、setZoom で設定できるのでそれほど苦ではないでしょう。



> 港区の区境に破線が表示されるのですが
こちらはちょっと厄介ですね。レイヤで地味にやるしかないと思われます。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。

通報する
お礼日時：2013/03/25 13:59

No.1

  • 回答者： yuu_x
  • 回答日時：2013/02/16 16:42

地味に panTo で一個ずつ指定すればできるんじゃないですか？

この回答への補足

質問者です。
上記のお礼文中のタイプミスを次の通り訂正します。

×　港区を選択すると港区の区境に破線が選択される
○　港区を選択すると港区の区境に破線が表示される

失礼しました。

補足日時：2013/02/16 19:39
通報する
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。
それだとズームレベルの調整は手作業になるのでしょうか？
また、本家のGoogleマップの方だと、例えば港区を選択すると港区の区境に破線が選択されるのですが、panToだとそれは難しいのでしょうか？

通報する
お礼日時：2013/02/16 17:36

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

Q質問する（無料）

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

関連するQ&A

関連するカテゴリからQ&Aを探す

専門家回答数ランキング

専門家

※過去一週間分の回答数ランキングです。

Q質問する（無料）

他の専門家の回答をチェック

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

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

Qセレクトで都道府県から市区町村を選択のしかた

　セレクトが［都道府県］［市区町村］のふたつがあって、
都道府県選択すると、自動的に市区町村のセレクト内容が変わるってやつあるじゃないですか、あれってどうやってやるんでしょう？
　いざ調べようと思ったら、そんなページどこにあるかわらなくて、ソースも見れないから、ちょっと困ってます。
　ちなみに、その場合、市区町村のデータって膨大ですよね、できればＣＳＶデータ（すでに制作済み）を活用したいのですができますでしょうか？

Aベストアンサー

http://www.geocities.co.jp/SiliconValley/4334/unibon/asp/selectexample.html

↑これのことですよね？

上記サンプル程度の数量ならクライアント側にデータ全てを渡しても支障ないですが、
これを42都道府県全てを対象に行うというのであれば、データが大きすぎるので避けた方が良いと思います。
（何百KBというhtmlになりそうですので）

私が42都道府県対象に上記のような機能を実装するのであれば、都道府県のドロップダウンリストにonChangeイベントを付け、都道府県の情報だけサーバーに渡し、
後はサーバーサイドで対応した市区町村をクライアントに返すように作ると思います。

で、サーバーサイドにASPを利用した方法であれば、
http://www.geocities.co.jp/SiliconValley/4334/unibon/asp/selectstatic.html

にサンプルがあります。
（注：上記サイトは私が制作したわけではありませんので、あしからず）

参考まで

参考URL：http://www.geocities.co.jp/SiliconValley/4334/unibon/asp/selectexample.html

http://www.geocities.co.jp/SiliconValley/4334/unibon/asp/selectexample.html

↑これのことですよね？

上記サンプル程度の数量ならクライアント側にデータ全てを渡しても支障ないですが、
これを42都道府県全てを対象に行うというのであれば、データが大きすぎるので避けた方が良いと思います。
（何百KBというhtmlになりそうですので）

私が42都道府県対象に上記のような機能を実装するのであれば、都道府県のドロップダウンリストにonChangeイベントを付け、都道府県の情報だけサーバーに渡し、
...続きを読む

他の回答も見る

Qjsによって検索プルダウン、都道府県選択と市区町村選択を連動させたい

いつもお世話になっております。
掲題のとおり、

jsによって検索プルダウン、都道府県選択と市区町村選択を連動させたいと考えております。
東京都と都道府県選択で選択すると、市区町村選択は東京23区のみでるイメージです。

プルダウン連動のサンプルなどはあり、作ろうと思えば作れるのですが
いかんせん全国となると作業時間がかかってしまうことを懸念しております、、、

どこかにサンプルなど転がっていたら教えていただけないでしょうか、、、


どうぞよろしくお願いいたします。

Aベストアンサー

<!-- http://www.soumu.go.jp/denshijiti/code.html より作成, データ量約30kB -->
<script id=jisx0401 type=application/x-data>
01000:北海道{01100:札幌市,01202:函館市,01203:小樽市, ... ,01694:羅臼町}
02000:青森県{02201:青森市,02202:弘前市,02203:八戸市, ... ,02450:新郷村}
...
47000:沖縄県{47201:那覇市,47205:宜野湾市,47207:石垣市, ... ,47382:与那国町}
</script>

<script>
(function(D){ _=0;
_ ; function P(s){ var a = [], m, r = /(\d+?):(.+?)\{(.+?)\}/g; while (m = r.exec(s)) a.push( {code:m[1], name:m[2], locals:T(m[3])} ); return a }
_ ; function T(s){ var a = [], m, r = /(\d+?):(.+?)(?:,|$)/g; while (m = r.exec(s)) a.push( {code:m[1], name:m[2]} ); return a }
_ ; var municipalities = P(D.scripts['jisx0401'].textContent);
_ ; var localsMap = municipalities.reduce(function(p,v){p[v.code] = v.locals; return p}, {});
_ ; function O(s){ return function(d){var o = s.appendChild(D.createElement('option')); o.value = d.code; o.textContent = d.name}; }
_ ; D.addEventListener('DOMContentLoaded', function(ev){
_ ; _ ; var g = D.forms['areas'].elements['g'];
_ ; _ ; municipalities.forEach( O(g) );
_ ; _ ; g.addEventListener('change', function(ev){
_ ; _ ; _ ; var locals = localsMap[ev.target.value];
_ ; _ ; _ ; var t = D.forms['areas'].elements['t'];
_ ; _ ; _ ; while (t.firstChild != t.lastChild && t.lastChild) t.removeChild(t.lastChild);
_ ; _ ; _ ; if (locals) locals.forEach( O(t) );
_ ; _ ; }, false);
_ ; }, false);
})(document);
</script>

<form name=areas>
<select name=g><option>-</option></select>
<select name=t><option>-</option></select>
<button type=submit>go</button>
</form>

<!-- http://www.soumu.go.jp/denshijiti/code.html より作成, データ量約30kB -->
<script id=jisx0401 type=application/x-data>
01000:北海道{01100:札幌市,01202:函館市,01203:小樽市, ... ,01694:羅臼町}
02000:青森県{02201:青森市,02202:弘前市,02203:八戸市, ... ,02450:新郷村}
...
47000:沖縄県{47201:那覇市,47205:宜野湾市,47207:石垣市, ... ,47382:与那国町}
</script>

<script>
(function(D){ _=0;
_ ; function P(s){ var a = [], m, r = /(\d+?):(.+?)\{(.+?)\}/g; while (m = r.exec(s)) a.pus...続きを読む

他の回答も見る

QgoogleMapsAPIキーの重複？について

googleMapsAPIを使用してサンプルHPを作成しました。
そのときはうまくいったのですが別のURLで同じように作成したところ、以下のメッセージが出力されました。
「Google マップ APIに使用されているキーは他のウェブサイトに登録されています。このウェブサイト用のキーをhttp://www.google.com/apis/mapsにて作成、登録してください。」
(1)まず同じアカウントで新しいAPIキーを取得してキーの部分のみコピペしてHPにアップしました。が、同じエラーでした。
(2)別のアカウントを作成して新しいAPIキーを取得してキーの部分のみコピペしてHPにアップしました。が、同じエラーでした。

最初からやり直しても同じエラーが発生するというのはなにか問題があるのでしょうか？
１つのAPIキーは１つのURLでしか使用できないなどが書いてありますがいろいろサイトを見てみるとそのドメイン内であれば問題なさそうです。

どなたかアドバイスお願いします。

Aベストアンサー

私がそのメッセージに泣かされたのは
公開するサイトのURLでキーを作成してしまったときでした。
ファイルの保存先のURLで作成したらOKでした。
http://www.google.com/　←公開先
http://www.google.up.com/←保存場所
こんな違い・・・

同じドメイン内なら使えるか？
http://www.google.com/で作成すれば

http://www.google.com/apis/maps​
http://www.google.com/apis/
1つのキーですべてに使用可能です。ってのは間違いないようですよね。
でも公開先とドメインが違うとアウトなのにレンタルでそれを知らずもしやと見てみたら・・・

こんな例がありました。
http://www.kowa.org/modules/yybbs/viewbbs.php?start=20&bbs_id=5

これはサーバーの問題みたいです。

私は手探りなので詳しいことはわかりませんので

日本語でMapsについてディスカッションするサイトです。
ご覧になりました？
http://groups.google.com/group/Google-Maps-API-Japan
時々キー取得エラー見かけますので同じケースが探せるかもしれません。
上の例もここで見つけたものです。
いろんなパターンありそうです。

私がそのメッセージに泣かされたのは
公開するサイトのURLでキーを作成してしまったときでした。
ファイルの保存先のURLで作成したらOKでした。
http://www.google.com/　←公開先
http://www.google.up.com/←保存場所
こんな違い・・・

同じドメイン内なら使えるか？
http://www.google.com/で作成すれば

http://www.google.com/apis/maps​
http://www.google.com/apis/
1つのキーですべてに使用可能です。ってのは間違いないようですよね。
でも公開先とドメインが違うとアウトなのにレンタルでそ...続きを読む

他の回答も見る

QGOOGLEマップのマイマップでマーカーを大量に貼り付けているのですが

GOOGLEマップのマイマップでマーカーを大量に貼り付けているのですが、表示に時間がかかってしまいます。
現在の中心点からある一定距離のマーカーを一定数（50個など）のみ表示させるにはどのような技術を使えばよろしいのでしょうか。

ご存知の方いらっしゃいますか。よろしくお願いします。

Aベストアンサー

マイマップの機能にはありませんね。
制御したいなら、「Google Maps Api」というjavascriptの
プログラムをご自身で作成する必要があります。
「初歩的なjavascriptの知識が必須となります。」
公式ページ
http://code.google.com/intl/ja/apis/maps/
入門的なページ
http://googlemaps.googlermania.com/
GMarkerManagerというクラスを使うとお望みの事ができます。
http://googlemaps.googlermania.com/google_maps_api_v2/map_example_gmarkermanager_with_labeldmarker.html

他の回答も見る

QGoogleMapsAPIのストリートビュー

GoogleMapsAPIでマーカーをストリートビューで表示させたい

GoogleMapsAPIでマーカーを追加し移動もできるようにしましたが、
このマーカーのストリートビューを別窓で表示させる方法を教えていただけないでしょうか
マーカーは人型のアイコンではなく、追加したマーカーです
よろしくお願いします


以下、ソースです
///////////////////////////////////////////////
<script type="text/javascript">
function initialize() {
var map = new google.maps.Map(
document.getElementById("gMap"),{
zoom : 16,
center : new google.maps.LatLng(35.688272,139.696459),
mapTypeId : google.maps.MapTypeId.ROADMAP,
streetViewControl : true
}
);

var marker = new google.maps.Marker({
position: new google.maps.LatLng(35.688272,139.696459),
map: map,
draggable : true
});

}
</script>

<style>
#gMap{
width: 900px;
height: 500px;
}

#View{
width: 900px;
height: 300px;
border: 1px solid #000; /* この枠線内にストリートビューを表示させたい */
}
</style>
</head>

<body onload="initialize()">
<div id="gMap"></div>
<div id="View"></div>
</body>

///////////////////////////////////////////////

GoogleMapsAPIでマーカーをストリートビューで表示させたい

GoogleMapsAPIでマーカーを追加し移動もできるようにしましたが、
このマーカーのストリートビューを別窓で表示させる方法を教えていただけないでしょうか
マーカーは人型のアイコンではなく、追加したマーカーです
よろしくお願いします


以下、ソースです
///////////////////////////////////////////////
<script type="text/javascript">
function initialize() {
var map = new google.maps.Map(
document.getElementById("gMap"),{
z...続きを読む

Aベストアンサー

提示されたソースコードの修正ではなく、自分で作成したものですが、
参考になりそうでしたら、ご利用ください。

尚、このページの単純コピペだと、変なところで改行されて動作不良と
なることがあるようなので、適宜修正してください。

//////////　以下ソース

<!DOCTYPE html><html><head><title>サンプル</title>
<meta http-equiv='Content-Type' content='text/html; charset=shift_jis'>
<script type='text/javascript' src='http://maps.google.com/maps/api/js?v=3.13&sensor=false'></script>
<script type='text/javascript'>

var LatLng,mOptions,pOptions,map,pano;
function initialize(){

LatLng = new google.maps.LatLng(35.681382, 139.766084);　//位置の初期値

mOptions = {
zoom: 16, center: LatLng, mapTypeId: google.maps.MapTypeId.ROADMAP
};

map = new google.maps.Map(document.getElementById('mcanvas'), mOptions);

pOptions = {
position: LatLng, pov: {heading: 0, pitch: 0, zoom: 1.34 }　//方角、仰角、ズームの初期値
};

pano = new google.maps.StreetViewPanorama(document.getElementById('pcanvas'), pOptions);

marker = new google.maps.Marker({
map: map, position: LatLng, draggable: true
});

google.maps.event.addListener(marker, 'position_changed', function(){
LatLng = marker.getPosition();
pano.setPosition(LatLng);
});

}

</script></head>

<body onload='initialize()'>
<div id='mcanvas' style='width:640px; height:240px'></div>
<div id='pcanvas' style='width:640px; height:240px'></div>
</body></html>

追記：
・ＡＰＩはバージョン３．１Ｘを使用（私は３．０のマーカーが嫌いなので）
・初期位置は東京駅ですが、ビューがないので空白になります

提示されたソースコードの修正ではなく、自分で作成したものですが、
参考になりそうでしたら、ご利用ください。

尚、このページの単純コピペだと、変なところで改行されて動作不良と
なることがあるようなので、適宜修正してください。

//////////　以下ソース

<!DOCTYPE html><html><head><title>サンプル</title>
<meta http-equiv='Content-Type' content='text/html; charset=shift_jis'>
<script type='text/javascript' src='http://maps.google.com/maps/api/js?v=3.13&sensor=false'></script>
<scrip...続きを読む

他の回答も見る
ページトップページトップ

Q質問する（無料）

このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング

おすすめ情報