ジオコーディングについて質問があります。
GoogleMapAPIを利用してジオコーディングをしようと試みました。
地名を検索して緯度経度を変数に代入したいのですが、うまくいきません。
例えば
東京駅と検索すると東京駅の緯度経度がido、keidoという変数に入るみたいなものを作ろうとしています。
GoogleMapAPIを使わなくてもいいのですがサンプルコードのようなものを教えてくださると助かります。
function initMap() { **var myLatLng = {lat: 35.658581, lng: 139.745433};** var map = new google.maps.Map(document.getElementById('map'), { zoom: 15, center: **myLatLng** }); var marker = new google.maps.Marker({ position: myLatLng, map: map }); var geocoder = new google.maps.Geocoder(); document.getElementById('submit').addEventListener('click', function() { geocodeAddress(geocoder, map); }); }
太文字になっている場所のlatとlngを取得し、以下のlatitudeとlongitudeに数値を代入しようと考えてきます。
var params = { keyid: '', format: 'json', latitude: 0, longitude: 0, range: 2, freeword: '' };
代入は
params.latitude = myLatLng.lat();
params.longitude = myLatLng.lng();
上記のコードで代入しようと考えたのですがうまく動きませんでした。
<!DOCTYPE html> <html lang="ja" dir="ltr"> <head> <title>J14014 課題1</title> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <style> html, body { height: 100%; margin: 0; padding: 0; } #map { height: 500px; width: 50%; } #floating-panel { position: absolute; top: 10px; left: 35%; z-index: 5; background-color: #fff; padding: 5px; border: 1px solid #999; text-align: center; font-family: 'Roboto','sans-serif'; line-height: 30px; padding-left: 10px; } </style> </head> <body> <div id="floating-panel"> <input id="address" type="textbox" value=""> <input id="submit" type="button" value="Geocode"> </div> <div id="map"></div> <script src="https://maps.googleapis.com/maps/api/js?key={APIkey}></script> <script> function initMap() { var myLatLng = {lat: 35.658581, lng: 139.745433}; var map = new google.maps.Map(document.getElementById('map'), { zoom: 15, center: myLatLng }); var marker = new google.maps.Marker({ position: myLatLng, map: map }); var geocoder = new google.maps.Geocoder(); document.getElementById('submit').addEventListener('click', function() { geocodeAddress(geocoder, map); }); } function geocodeAddress(geocoder, resultsMap) { var address = document.getElementById('address').value; geocoder.geocode({'address': address}, function(results, status) { if (status === google.maps.GeocoderStatus.OK) { resultsMap.setCenter(results[0].geometry.location); var marker = new google.maps.Marker({ map: resultsMap, position: results[0].geometry.location }); } else { alert('Geocode was not successful for the following reason: ' + status); } }); } initMap(); </script> <a href="http://www.gnavi.co.jp/"> <img src="http://apicache.gnavi.co.jp/image/rest/b/api_265_65.gif" width="265" height="65" border="0" alt="グルメ情報検索サイト ぐるなび"> </a> <input type="hidden" value="2aac5d7fc6cc734c236af8f5511b353f" class="js--key"> <br> <br> <label for="freeword">フリーワード検索</label> <input type="text" name="freeword" id="freeword" value="" class="js--freeword" /> <br> <br> <br> <br> <input type="button" value="店舗結果" class="js--apply" /> <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script> <script> (function(){ var url = 'http://api.gnavi.co.jp/RestSearchAPI/20150630/?callback=?'; var params = { keyid: '', format: 'json', latitude: 0, longitude: 0, range: 2, freeword: '' }; var showResult = function(result){ if ( result.total_hit_count > 0 ) { document.write(result.total_hit_count + '件の結果が見つかりました。'); document.write('<br>'); document.write('現在の仕様では最大10件しか表示できません。\n'); document.write('<table border=1 id="id33a">'); document.write('<tr>'); document.write('<td>店舗ID</td>'); document.write('<td>店舗名</td>'); document.write('<td>路線名</td>'); document.write('<td>駅名</td>'); document.write('<td>徒歩(分)</td>'); document.write('</tr>'); for ( var i in result.rest ){ document.write('<tr>'); <!-- 店舗ID --> if ( result.rest[i].id == '[object Object]'){ document.write('<td></td>'); }else{ document.write('<td>'+ result.rest[i].id + '</td>'); } <!-- 店舗名 --> if ( result.rest[i].name == '[object Object]'){ document.write('<td></td>'); }else{ document.write('<td>'+ result.rest[i].name + '</td>'); } <!-- 路線名 --> if ( result.rest[i].access.line == '[object Object]'){ document.write('<td></td>'); }else{ document.write('<td>'+ result.rest[i].access.line + '</td>'); } <!-- 駅名 --> if ( result.rest[i].access.station == '[object Object]'){ document.write('<td></td>'); }else{ document.write('<td>'+ result.rest[i].access.station + '</td>'); } <!-- 徒歩(分)--> if ( result.rest[i].access.walk == '[object Object]'){ document.write('<td></td>'); }else{ document.write('<td>'+ result.rest[i].access.walk + '分'+ '</td>'); } document.write('</tr>'); } document.write('</table>'); document.write('<a href="ぐるなびAPI.html">戻る</a>'); } else { alert( '検索結果が見つかりませんでした。' ); } } $(document).on('click', '.js--apply', function(){ params.keyid = $('.js--key').val(); //params.latitude = station_name.value.split("&")[0]; //params.longitude = station_name.value.split("&")[1]; params.latitude = myLatLng.lat(); params.longitude = myLatLng.lng(); params.freeword = $('.js--freeword').val(); $.getJSON(url, params, function(result){ showResult(result); }); }); })(jQuery); </script> </body> </html>
回答1件
あなたの回答
tips
プレビュー