- 締切済み
Google Map APIの利用について（URLを表示したい）
Google mapのAPIを利用しているのですが、http://maps.google.co.jp/の[このページのリンク]みたいに表示しているマップの位置を記憶したURL[http://maps.google.co.jp/maps?f=q&hl=ja&geocode=&q=%E5%92%8C%E6%AD%8C%E5%B1%B1%E7%9C%8C&ie=UTF8&z=9]みたいなものを作ることはできないでしょうか？ 「○○の地図」というリンクを貼ったとして、クリックすると該当のマップへ（サイト内のGoogle map APIへ）ジャンプしたいのですが、全くわからず。。お願いします！
- みんなの回答 （5）
- 専門家の回答
みんなの回答
- Nii
- ベストアンサー率48% (79/162)
>ズームや移動のツールと背景がグレーの枠のみになっています。 上記に関しましては、再現できませんので^^; >エラーは表示されていないです。 IEの場合ですと、左下の方に「ページが表示されました」と出ている前に、黄色の三角の中に！が表示されていませんか？ ＠もう一箇所？が必要な行がありました。<(￣∇￣)ゞゴメリンコ～♪ urlAny = url.split("?"); http://www.mandala.ne.jp/gmap.html http://www.mandala.ne.jp/gmap.html?34.232517,135.192087 http://www.mandala.ne.jp/gmap.html?43.063773,141.358033
- Nii
- ベストアンサー率48% (79/162)
>http://ドメイン/map_test.html?address=%E5%92%8C%E6%AD%8C%E5%B1%B1%E7%9C%8C map_test.htmlページを表示した時点で、エラーは出てないのでしょうか？ まず思いつく事は、?を削除する時に、必要な？も一緒に削除してしまっている可能性があります。 下記3箇所は？が必要です。 <script src="http://maps.google.com/maps?file=・・・ mapion = "http://www.mapion.co.jp/c/f?uc=1&grp・・・ livedoor = "http://map.livedoor.com/map/?ZM=・・・ 違っていれば補足をお願いします。 ※ひょっとして、WikiでGoogleMapsを表示？
補足
いつもご回答ありがとうございます。 >map_test.htmlページを表示した時点で、エラーは出てないのでしょうか？ エラーは表示されていないです。 >必要な？も一緒に削除してしまっている可能性があります。 3箇所以外の？を削除しました。map_test.htmlページを表示してもマップが表示されず、ズームや移動のツールと背景がグレーの枠のみになっています。 >※ひょっとして、WikiでGoogleMapsを表示？ いえ、通常のHTMLです。 ご教授よろしくお願いします！
- Nii
- ベストアンサー率48% (79/162)
>理解ができず。 理解出来ない箇所を書かなければ、アドバイスのしようが/(-_-)ヽコマッタァ >サンプルなどあるところがあれば是非教えてください！ ソースそのまま提示してるわけだから^^; 環境によって違うかもしれないが、とりあえず^^; テキストエディッタに-----ここから-----から、-----ここまで-----を貼り付ける。 全角の空白を半角に置き換える。 勝手にリンクになっている前後に？と余計な文字が入ってたので削除 key=に取得済みのキーを登録（キーが不正ならば、検索が出来ない） 文字コードにUTF-8で保存し、サーバへアップ サーバがxxxxx.xxxで、gmap.htmlというファイル名で保存したならば、http://www.xxxxx.xxx/gmap.html?34.050357,135.341235 -----ここから----- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Google Map</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="http://maps.google.com/maps?file=api&v=2.X&key=" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> //<![CDATA[ if (GBrowserIsCompatible()) { var map; var marker = null; function onLoad() { map = new GMap2(document.getElementById("map")); //移動や縮尺変更用のボタンを表示 map.addControl(new GLargeMapControl(),new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(5,50))); //地図/衛星 切り替えボタンを表示 //map.addControl(new GMapTypeControl()); //右下に概要を示す地図を表示 map.addControl(new GOverviewMapControl()); //縮尺定規を表示 map.addControl(new GScaleControl()); //ズームインする際にスムーズに地図を拡大 map.enableContinuousZoom(); //ダブルクリックされた場合にズームイン/アウト map.enableDoubleClickZoom(); map.addMapType(G_PHYSICAL_MAP); map.addControl(new GMenuMapTypeControl(true, false)); //キー操作を有効 new GKeyboardHandler(map); //初期表示位置 url = location.href; urlAny = url.split("?"); if (typeof urlAny[1] == 'undefined') { var point = new GLatLng(34.050357,135.341235); } else { Any = urlAny[1].split(","); point = new GLatLng(Any[0],Any[1]); } map.setCenter(point, 17); marker = marker_add(point); map.setMapType(G_NORMAL_MAP); } // 「移動する」ボタンを押されると実行されます function showAddress(address) { // GClientGeocoderを初期化 geocoder = new GClientGeocoder(); if (geocoder) { geocoder.getLatLng(address,function(point) { if (!point) { alert(address + " not found"); } else { bounds = map.getBounds(); zoom = map.getBoundsZoomLevel(bounds); map.removeOverlay(marker); map.setCenter(point, zoom); marker = marker_add(point); marker_oiw(marker,point); } }); } } function marker_add(point) { marker = new GMarker(point,{ draggable:true } ); map.addOverlay(marker); GEvent.addListener(marker, 'dragend', function() { point = marker.getPoint(); marker_oiw(marker,point); }); return marker; } function marker_oiw(marker,point) { dms = googleToDMS(point.toUrlValue()); text = "緯度:" + dms[0] + "度" + dms[1] + "分" + dms[2] + "秒" + " 経度:" + dms[3] + "度" + dms[4] + "分" + dms[5] + "秒"; dms = googleToDMS_jp(point.toUrlValue()); text_jp = "緯度:" + dms[0] + "度" + dms[1] + "分" + dms[2] + "秒" + " 経度:" + dms[3] + "度" + dms[4] + "分" + dms[5] + "秒"; mapion = "http://www.mapion.co.jp/c/f?uc=1&grp=all&nl=" + dms[0] + "/" + dms[1] + "/" + dms[2] + "&el=" + dms[3] + "/" + dms[4] + "/" + dms[5] + "&scl=25000&bid=Mlink"; livedoor = "http://map.livedoor.com/map/?ZM=12&MAP=E" + dms[3] + "." + dms[4] + "." + dms[5] + "N" + dms[0] + "." + dms[1] + "." + dms[2]; marker.openInfoWindow("<table style='text-align: left;' cellpadding='2' cellspacing='2'><tr align='center'><td colspan='2' rowspan='1'>マーカー地点</td></tr><tr><td colspan='1' rowspan='2'>世界測地系</td><td> " + point.toUrlValue() + "</td></tr><tr><td>" + text + "</td></tr><tr><td colspan='1' rowspan='2'>日本測地系</td><td>" + text_jp + "</td></tr><tr><td><a href='" + mapion + "' target='_blank'>mapion</a></td></tr><tr><td></td><td><a href='" + livedoor + "' target='_blank'>livedoor</a></td></tr></table>"); } function RV(val, n) { s = Math.pow(10, n); val = val * s; val = Math.round(val); val = val / s; return val; } function DegToDMS(deg) { var temp = deg; var newD = Math.floor(temp); temp = (temp - newD) * 60; var newM = Math.floor(temp); temp = (temp - newM) * 60; var newS = temp; return new Array(newD, newM, RV(newS, 2)); } function googleToDMS_jp(point) { //世界→日本 //（ln：入力経度、la：入力緯度、lng：変換後経度、lat：変換後緯度） Any = point.split(","); la = parseFloat(Any[0]); ln = parseFloat(Any[1]); lng = ln + la * 0.000046047 + ln * 0.000083049 - 0.010041; lat = la + la * 0.00010696 - ln * 0.000017467 - 0.0046020; ladms = DegToDMS(lat); lndms = DegToDMS(lng); return new Array(ladms[0],ladms[1],ladms[2],lndms[0],lndms[1],lndms[2]); } function googleToDMS(point) { Any = point.split(","); la = parseFloat(Any[0]); ln = parseFloat(Any[1]); ladms = DegToDMS(la); lndms = DegToDMS(ln); return new Array(ladms[0],ladms[1],ladms[2],lndms[0],lndms[1],lndms[2]); } } //]]> </script> </head> <body onload="onLoad()" style="margin:20px; padding:20px;text-align:center;"> <h1>Google Map 【緯度・経度】検索</h1> <form action="#" onsubmit="showAddress(this.address.value); return false"> <P> <input type="text" size="40" name="address" value="和歌山県" /> <input type="submit" value="移動する" /> </P> </form> <div id="map" style="width:760px; height:560px; margin:0px; padding:0px;"></div> <P id="show"></P> </body> </html> -----ここまで-----
お礼
ご丁寧にありがとうございます。 早速試してみたのですが、サーバへアップロード後アクセスして、移動するボタンをクリックするとURLが下記のようになり表示しません。 http://ドメイン/map_test.html?address=%E5%92%8C%E6%AD%8C%E5%B1%B1%E7%9C%8C また、[移動する]をクリック後に、 「インターネットサイトhttp://ドメイン/map_test.html?address=%E5%92%8C%E6%AD%8C%E5%B1%B1%E7%9C%8Cを開けません。操作は中断されました。」 とダイアログボックスが表示されます。 ご教授お願いします！
- Nii
- ベストアンサー率48% (79/162)
あ、カテゴリがPHPだった^^; 現在表示している地点へのURL生成って事ならば、以前の回答でも、噴出し内に確認用にmapionとlivedoorへのリンクをjavascriptで作ってるから、それが参考になるかも・・・
- Nii
- ベストアンサー率48% (79/162)
htmlでページを作っていて、任意の地点を中心にして（URLで指定して）マップを表示させたい？という事でよろしいでしょうか？ URLでパラメータを指定して、動的にページを生成するには、PHPか、Perl等を使用すれば簡単に出来ます。 setCenterに指定された緯度と経度を指定するか、住所等が指定されるのならば、showAddressへ値をセットして書き出せばいいかと思います。 詳細は、以前の回答を参照して下さい。 http://okwave.jp/qa3296035.html javascriptで緯度・経度を指定して表示するようにもしてありますので、PHP・Perlが使用できない環境でも、リンク時に緯度・経度をURLへ含める事により任意の地点を表示できます。
お礼
早速のご回答ありがとうございます。 >htmlでページを作っていて、任意の地点を中心にして（URLで指定して）マップを表示させたい？ そうです。マップを見ていて現在地をURLに変換したいということです。しかし、http://okwave.jp/qa3296035.html を見させていただいたのですが理解ができず。。サンプルなどあるところがあれば是非教えてください！よろしくお願いします！
お礼
できました！！ 本当に感謝してます。ありがとうございます！ 原因はurlAny = url.split("?");でした。 嬉しい～～