<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"> <title></title> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css"> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> <script src="js/mobiscroll.full.min.js" type="text/javascript"></script> <link href="css/mobiscroll.full.min.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> $("#index").live("pagebeforecreate",function(){ $('#select').scroller('destroy').scroller($.extend({preset:'select',inputClass:'i-txt'}, { theme: "jqm", mode: $('#mode').val(), display: "modal", beforeShow: show, onClose: hide })); function show(){} function hide(){} $('#select_dummy').textinput(); }); $("#index").live("pageshow",function(){ $("#select").live("change",function(){ var api = "http://vesta-tmp.sakura.ne.jp/xml-jsonp.php?callback=?"; if(parseInt($("#select").val()) < 100000){ var pref = "0" + $("#select").val(); } else{ var pref = $("#select").val(); } $.getJSON(api,{ xml:"jws.jalan.net/APICommon/OnsenSearch/V1/?key=aqr135c71ee600&pref=" + pref, key:"aqr135c71ee600" },function(data){ var address = $("#select>option:selected").text(); var geocoder = new google.maps.Geocoder(); geocoder.geocode({ 'address':address }, function(results, status){ var options = { zoom:9, mapTypeId: google.maps.MapTypeId.ROADMAP } if(status == google.maps.GeocoderStatus.OK) { var map = new google.maps.Map(document.getElementById("gmap"), options); map.setCenter(results[0].geometry.location); var latlngAry = new Array(); $.each(data.Onsen, function(i,item){ geocoder.geocode({ 'address':item.OnsenAddress }, function(results, status){ var marker = new google.maps.Marker({ map: map, address:item.OnsenAddress, title:item.OnsenName + "\n" + item.OnsenAddress, position: results[0].geometry.location, icon:"img/ic_spring.png", openInfo:true }); var infowindow = new google.maps.InfoWindow({ content: "<div class=\"popup\"><h4>" + item.OnsenName + "</h4><p>" + item.OnsenAddress + "</p></div>", }); infowindow.open(marker.getMap(), marker); }); }); } else { console.log("ステータス:" + status); } }); }); }); }); </script> <style> #gmap{ height: 600px; background: #eee; border: 1px solid #e1deda; } </style> </head> <body data-enhance="false"> <div data-role="page" id="index"> <div data-role="header"> <h1>じゃらんのAPIから全国の温泉を検索する (地図)</h1> </div> <div data-role="content"> <label for="i">都道府県</label> <select name="都道府県" id="select" data-role="none"> <option value="10000">北海道</option> <option value="20000">青森県</option> <option value="30000">岩手県</option> <option value="40000">宮城県</option> <option value="50000">秋田県</option> <option value="60000">山形県</option> <option value="70000">福島県</option> <option value="90000">群馬県</option> <option value="80000">栃木県</option> <option value="100000">茨城県</option> <option value="110000">埼玉県</option> <option value="120000">千葉県</option> <option value="130000">東京都</option> <option value="140000">神奈川県</option> <option value="160000">長野県</option> <option value="170000">新潟県</option> <option value="180000">富山県</option> <option value="190000">石川県</option> <option value="200000">福井県</option> <option value="210000">静岡県</option> <option value="220000">岐阜県</option> <option value="230000">愛知県</option> <option value="240000">三重県</option> <option value="250000">滋賀県</option> <option value="260000">京都府</option> <option value="270000">大阪府</option> <option value="280000">兵庫県</option> <option value="290000">奈良県</option> <option value="300000">和歌山県</option> <option value="310000">鳥取県</option> <option value="320000">島根県</option> <option value="330000">岡山県</option> <option value="340000">広島県</option> <option value="350000">山口県</option> <option value="360000">徳島県</option> <option value="370000">香川県</option> <option value="380000">愛媛県</option> <option value="390000">高知県</option> <option value="400000">福岡県</option> <option value="410000">佐賀県</option> <option value="420000">長崎県</option> <option value="430000">熊本県</option> <option value="440000">大分県</option> <option value="450000">宮崎県</option> <option value="460000">鹿児島県</option> <option value="470000">沖縄県</option> </select> <div id="gmap"></div> </div> <div data-role="footer" data-position="fixed"> <h4>Yohsuke Nakano</h4> </div> </div> </body> </html>