Kazunari-h/ypepper.html

## ypepper.html
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <title>〇〇な地図</title>
</head>

<body>
    <div id="map" style="width: 100vw;height: 100vh;"></div>
    <script type="text/javascript" charset="utf-8"
        src="https://map.yahooapis.jp/js/V1/jsapi?appid=dj00aiZpPTVGeDBYeWQ1M2xGWiZzPWNvbnN1bWVyc2VjcmV0Jng9NDI-"></script>

    <script>
        function getMarker(restaurant) {
            // マーカーの設定 (APIから取れる画像の情報をアイコンにしてみる)
            let myMarker = new Y.Marker(new Y.LatLng(restaurant.lat, restaurant.lng), {
                icon: new Y.Icon(restaurant.logo_image)
            });
            // 吹き出しに出すテキストの作成
            let windowText = `<h2>${restaurant.name}</h2>`;

            // レストラン情報
            windowText += `<p>${restaurant.address}</p>`;
            windowText += `<p>${restaurant.catch}</p>`;

            // 画像の設定
            windowText += `<img src="${restaurant.photo.pc.l}" alt="${restaurant.name}">`;

            // クーポン情報の設定
            windowText += `<p>パソコン版クーポン:<br>`;
            windowText += `<a href="${restaurant.coupon_urls.pc}">`;
            windowText += `${restaurant.coupon_urls.pc}</a></p>`;

            windowText += `<p>スマホ版クーポン:<br>`;
            windowText += `<a href="${restaurant.coupon_urls.sp}">`;
            windowText += `${restaurant.coupon_urls.sp}</a></p>`;

            myMarker.bindInfoWindow(windowText);
            return myMarker;
        }

        function getMarkers(restaurants) {
            let markers = [];
            restaurants.forEach(restaurant => {
                markers.push(getMarker(restaurant));
            });
            return markers;
        }

        window.onload = function () {
            // 地図の設定
            let myMap = new Y.Map("map", {
                configure: {
                    // 地図の設定
                    doubleClickZoom: true, // ダブルクリックでズーム
                    scrollWheelZoom: true, // スクロールでズーム
                    singleClickPan: true, // シングルクリックで地図を移動
                    dragging: true // ドラッグの移動
                }
            });

            // 地図レイヤーの表示
            let control = new Y.LayerSetControl();
            myMap.addControl(control);

            // 検索部品の表示
            control = new Y.SearchControl();
            myMap.addControl(control);

            // ズームコントローラの表示
            control = new Y.SliderZoomControlHorizontal();
            myMap.addControl(control);

            let stylemaplayer = new Y.StyleMapLayer("standard");
            stylemaplayer.setStyle([
                { label: true },
                { figure: true },
                { city: true },
                { prefecture: true },
                { area_name: true },
                { gs: true },
                { roadside_station: true },
                { traffic_facility: true },
                { line_comment: true },
                { water: true }
            ]);

            //レイヤーセットを作成します。
            layerset = new Y.LayerSet("スタイル地図", [stylemaplayer]);
            //Mapオブジェクトにレイヤーセットを追加します。
            myMap.addLayerSet("stylemap", layerset);
            //標準地図レイヤーをレイヤーセットから削除します。
            myMap.removeLayerSet(Y.LayerSetId.NORMAL);

            // マップの表示
            myMap.drawMap(
                new Y.LatLng(35.691571, 139.697084),
                14, // 縮尺
                "stylemap" // 自分で作ったレイヤーの名前にする。
            );

            axios
                .get("http://webservice.recruit.co.jp/hotpepper/gourmet/v1/", {
                    params: {
                        key: "2fe35fe421b7a88a",
                        format: "json",
                        large_area: "Z011",
                        count: 100
                        // 検索条件を工夫して見てね！
                        // https://webservice.recruit.co.jp/hotpepper/reference.html
                    },
                    headers: {
                        "Content-Type": "application/json;charset=UTF-8",
                        "Access-Control-Allow-Origin": "*"
                    }
                })
                .then(function (response) {
                    myMap.addFeatures(getMarkers(response.data.results.shop));
                })
                .catch(function (error) {
                    console.log(error);
                });
        };

    </script>


</body>

</html>
	<!DOCTYPE html>
	<html lang="ja">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	<title>〇〇な地図</title>
	</head>

	<body>
	<div id="map" style="width: 100vw;height: 100vh;"></div>
	<script type="text/javascript" charset="utf-8"
	src="https://map.yahooapis.jp/js/V1/jsapi?appid=dj00aiZpPTVGeDBYeWQ1M2xGWiZzPWNvbnN1bWVyc2VjcmV0Jng9NDI-"></script>

	<script>
	function getMarker(restaurant) {
	// マーカーの設定 (APIから取れる画像の情報をアイコンにしてみる)
	let myMarker = new Y.Marker(new Y.LatLng(restaurant.lat, restaurant.lng), {
	icon: new Y.Icon(restaurant.logo_image)
	});
	// 吹き出しに出すテキストの作成
	let windowText = `<h2>${restaurant.name}</h2>`;

	// レストラン情報
	windowText += `<p>${restaurant.address}</p>`;
	windowText += `<p>${restaurant.catch}</p>`;

	// 画像の設定
	windowText += `<img src="${restaurant.photo.pc.l}" alt="${restaurant.name}">`;

	// クーポン情報の設定
	windowText += `<p>パソコン版クーポン:<br>`;
	windowText += `<a href="${restaurant.coupon_urls.pc}">`;
	windowText += `${restaurant.coupon_urls.pc}</a></p>`;

	windowText += `<p>スマホ版クーポン:<br>`;
	windowText += `<a href="${restaurant.coupon_urls.sp}">`;
	windowText += `${restaurant.coupon_urls.sp}</a></p>`;

	myMarker.bindInfoWindow(windowText);
	return myMarker;
	}

	function getMarkers(restaurants) {
	let markers = [];
	restaurants.forEach(restaurant => {
	markers.push(getMarker(restaurant));
	});
	return markers;
	}

	window.onload = function () {
	// 地図の設定
	let myMap = new Y.Map("map", {
	configure: {
	// 地図の設定
	doubleClickZoom: true, // ダブルクリックでズーム
	scrollWheelZoom: true, // スクロールでズーム
	singleClickPan: true, // シングルクリックで地図を移動
	dragging: true // ドラッグの移動
	}
	});

	// 地図レイヤーの表示
	let control = new Y.LayerSetControl();
	myMap.addControl(control);

	// 検索部品の表示
	control = new Y.SearchControl();
	myMap.addControl(control);

	// ズームコントローラの表示
	control = new Y.SliderZoomControlHorizontal();
	myMap.addControl(control);

	let stylemaplayer = new Y.StyleMapLayer("standard");
	stylemaplayer.setStyle([
	{ label: true },
	{ figure: true },
	{ city: true },
	{ prefecture: true },
	{ area_name: true },
	{ gs: true },
	{ roadside_station: true },
	{ traffic_facility: true },
	{ line_comment: true },
	{ water: true }
	]);

	//レイヤーセットを作成します。
	layerset = new Y.LayerSet("スタイル地図", [stylemaplayer]);
	//Mapオブジェクトにレイヤーセットを追加します。
	myMap.addLayerSet("stylemap", layerset);
	//標準地図レイヤーをレイヤーセットから削除します。
	myMap.removeLayerSet(Y.LayerSetId.NORMAL);

	// マップの表示
	myMap.drawMap(
	new Y.LatLng(35.691571, 139.697084),
	14, // 縮尺
	"stylemap" // 自分で作ったレイヤーの名前にする。
	);

	axios
	.get("http://webservice.recruit.co.jp/hotpepper/gourmet/v1/", {
	params: {
	key: "2fe35fe421b7a88a",
	format: "json",
	large_area: "Z011",
	count: 100
	// 検索条件を工夫して見てね！
	// https://webservice.recruit.co.jp/hotpepper/reference.html
	},
	headers: {
	"Content-Type": "application/json;charset=UTF-8",
	"Access-Control-Allow-Origin": "*"
	}
	})
	.then(function (response) {
	myMap.addFeatures(getMarkers(response.data.results.shop));
	})
	.catch(function (error) {
	console.log(error);
	});
	};

	</script>


	</body>

	</html>