- ベストアンサー
Google Maps APIを使用して特定の住所の地図を表示させたい
- Google Maps APIを使用して特定の住所の地図を表示させる方法について教えてください。
- PHPとMySQLを使用して、DBに格納された住所の地図を表示させる方法について教えてください。
- 特定の住所の地図を表示させるためには、Google Maps APIを使用して住所をジオコーディングし、その結果を地図上に表示することが必要です。
- kfan
- お礼率35% (26/74)
- JavaScript
- 回答数2
- ありがとう数5
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
ANo.1では、やりたい事が実現出来てないので・・・ 元のソースは、「<body onload="loadMap()">」での「loadMap()」が何処で定義されてるか不明なんですが、GClientGeocoderを初期化した後で、showAddress([ここにDBからぬいてきた住所]); を呼べば、大丈夫な気もするけど・・・ 現状稼動中のソースを元（余分な箇所が多いけど・・）に <!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.61&key=取得済みのキー" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> //<![CDATA[ var map; var marker = null; function onLoad() { map = new GMap2(document.getElementById("map")); map.addControl(new GLargeMapControl()); map.addControl(new GMapTypeControl()); map.addControl(new GOverviewMapControl()); map.addControl(new GScaleControl()); new GKeyboardHandler(map); //初期表示位置 url = location.href; urlAny = url.split("?"); if (typeof urlAny[1] == 'undefined') { var point = new GLatLng(37.441944, -122.141944); } 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); showAddress("[ここにDBからぬいてきた住所]"); } // 「移動する」ボタンを押されると実行されます 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="[ここにDBからぬいてきた住所]" /> <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>
その他の回答 (1)
- Nii
- ベストアンサー率48% (79/162)
検索結果にて表示される地点が必ず正しいとは限らないのでは？ なので、確認済みの緯度・経度情報をMySQL上にもたせて、 map.setCenter(new GLatLng(37.441944, -122.141944), 15); の時点でMySQL上の緯度・経度情報を設定すればどうかと思いますが・・・ もし、htmlが別ファイルならば、javascriptで下記の用にすればどうかと・・・ http://www.XXXXX.XXX/gmap.html?12.3456,123.456789; 切り出し部分はこんな感じで //初期表示位置 var url = location.href; var urlAny = url.split("?"); if (typeof urlAny[1] == 'undefined') { var point = new GLatLng(12.3456,123.456789); } else { var Any = urlAny[1].split(","); var point = new GLatLng(Any[0],Any[1]); }
お礼
長文のプログラムまで書いて説明してくださいありがとうございました！ 無事にプログラムが動きました！ 本当にありがとうございました。