締切済み

Google Map APIの利用について（URLを表示したい）

2008/02/28 15:28

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へ）ジャンプしたいのですが、全くわからず。。お願いします！

hayax
お礼率66% (4/6)

PHP
回答数5
ありがとう数6

みんなの回答 （5）
専門家の回答

みんなの回答

Nii
ベストアンサー率48% (79/162)

2008/03/03 16:01 回答No.5

>ズームや移動のツールと背景がグレーの枠のみになっています。上記に関しましては、再現できませんので^^; >エラーは表示されていないです。 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

質問者

お礼 2008/03/03 16:35

できました！！本当に感謝してます。ありがとうございます！原因はurlAny = url.split("?");でした。嬉しい～～

Nii
ベストアンサー率48% (79/162)

2008/02/29 12:54 回答No.4

>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を表示？

質問者

補足 2008/03/03 10:26

いつもご回答ありがとうございます。 >map_test.htmlページを表示した時点で、エラーは出てないのでしょうか？エラーは表示されていないです。 >必要な？も一緒に削除してしまっている可能性があります。 3箇所以外の？を削除しました。map_test.htmlページを表示してもマップが表示されず、ズームや移動のツールと背景がグレーの枠のみになっています。 >※ひょっとして、WikiでGoogleMapsを表示？いえ、通常のHTMLです。ご教授よろしくお願いします！

Nii
ベストアンサー率48% (79/162)

2008/02/28 18:36 回答No.3

>理解ができず。理解出来ない箇所を書かなければ、アドバイスのしようが/(-_-)ヽコマッタァ >サンプルなどあるところがあれば是非教えてください！ソースそのまま提示してるわけだから^^; 環境によって違うかもしれないが、とりあえず^^; テキストエディッタに-----ここから-----から、-----ここまで-----を貼り付ける。全角の空白を半角に置き換える。勝手にリンクになっている前後に？と余計な文字が入ってたので削除 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> -----ここまで-----

質問者

お礼 2008/02/29 10:07

ご丁寧にありがとうございます。早速試してみたのですが、サーバへアップロード後アクセスして、移動するボタンをクリックすると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)

2008/02/28 16:41 回答No.2

あ、カテゴリがPHPだった^^; 現在表示している地点へのURL生成って事ならば、以前の回答でも、噴出し内に確認用にmapionとlivedoorへのリンクをjavascriptで作ってるから、それが参考になるかも・・・

Nii
ベストアンサー率48% (79/162)

2008/02/28 16:26 回答No.1

htmlでページを作っていて、任意の地点を中心にして（URLで指定して）マップを表示させたい？という事でよろしいでしょうか？ URLでパラメータを指定して、動的にページを生成するには、PHPか、Perl等を使用すれば簡単に出来ます。 setCenterに指定された緯度と経度を指定するか、住所等が指定されるのならば、showAddressへ値をセットして書き出せばいいかと思います。詳細は、以前の回答を参照して下さい。 http://okwave.jp/qa3296035.html javascriptで緯度・経度を指定して表示するようにもしてありますので、PHP・Perlが使用できない環境でも、リンク時に緯度・経度をURLへ含める事により任意の地点を表示できます。

質問者

お礼 2008/02/28 17:33

早速のご回答ありがとうございます。 >htmlでページを作っていて、任意の地点を中心にして（URLで指定して）マップを表示させたい？そうです。マップを見ていて現在地をURLに変換したいということです。しかし、http://okwave.jp/qa3296035.html　を見させていただいたのですが理解ができず。。サンプルなどあるところがあれば是非教えてください！よろしくお願いします！

Google Map APIの利用について（URLを表示したい）