戻る

ソース

<!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>

inserted by FC2 system