Tesla Supercharger Finder

以下が実際のプログラムです。APIには公式のTesla Supercharger APIを使用し、HTML/CSS/JavaScriptを使って表示します。

HTMLファイル:

```html
<!DOCTYPE html>
<html>
<head>
	<title>Tesla Supercharger Finder</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<div class="header">
		<h1>Tesla Supercharger Finder</h1>
	</div>
	<div class="container">
		<form>
			<label for="radius">距離（マイル）：</label>
			<input type="number" id="radius" name="radius" min="0">
			<button type="submit" onclick="searchSuperchargers()">検索</button>
		</form>
		<div id="map"></div>
	</div>
	<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
	<script type="text/javascript" src="app.js"></script>
</body>
</html>
```

CSSファイル:

```css
body {
	margin: 0;
	padding: 0;
	font-family: Arial, sans-serif;
}

.header {
	background-color: #333;
	color: #fff;
	padding: 10px;
}

.container {
	margin: 20px;
}

form {
	margin-bottom: 20px;
}

label {
	margin-right: 5px;
}

input[type="number"] {
	width: 100px;
	font-size: 16px;
	padding: 5px;
	border-radius: 5px;
	border: none;
}

button {
	background-color: #333;
	color: #fff;
	padding: 5px 15px;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	font-size: 16px;
}

#map {
	height: 400px;
	width: 100%;
}
```

JavaScriptファイル:

```javascript
(function() {
	// Tesla Supercharger APIのURL
	var chargersUrl = 'https://supercharger.tesla.com/map-markers';
	// Google Maps APIのインスタンスを生成
	var map = new google.maps.Map(document.getElementById('map'), {
		zoom: 6,
		center: {
			lat: 37.0902,
			lng: -95.7129
		}
	});
	// マーカーを格納する空の配列
	var markers = [];

	// 検索ボタンが押されたとき
	function searchSuperchargers() {
		// 入力された距離を取得（単位はマイル）
		var radius = document.getElementById('radius').value;
		// 該当するスーパーチャージャーのみを取得するためのパラメータ
		var params = { limit: 0 };
		// パラメータに距離の上限を加える
		if (radius) {
			params.radius = radius;
		}

		// マーカーを全て削除
		clearMarkers();

		// Tesla Supercharger APIにGETリクエストを送信
		fetch(chargersUrl + '?' + new URLSearchParams(params))
			.then(function(response) {
				if (response.ok) {
					return response.json();
				} else {
					throw new Error('Something went wrong');
				}
			})
			.then(function(data) {
				// JSONからスーパーチャージャーの情報を取得
				var chargers = data.locations;

				// スーパーチャージャーの数だけループ
				for (var i = 0; i < chargers.length; i++) {
					// スーパーチャージャーの緯度・経度・名前を取得
					var lat = chargers[i].latitude;
					var lng = chargers[i].longitude;
					var name = chargers[i].name;

					// マーカーを生成
					var marker = new google.maps.Marker({
						position: {
							lat: lat,
							lng: lng
						},
						map: map,
						title: name
					});

					// マーカーを配列に追加
					markers.push(marker);
				}
			})
			.catch(function(error) {
				console.log('Error:', error);
			});
	}

	// マーカーを全て削除
	function clearMarkers() {
		for (var i = 0; i < markers.length; i++) {
			markers[i].setMap(null);
		}
		markers = [];
	}

	// 検索ボタンが押されたら検索を実行
	document.querySelector('form').addEventListener('submit', function(event) {
		event.preventDefault();
		searchSuperchargers();
	});
})();
```

このアプリでは、Google Maps APIを使用して地図を表示し、Tesla Supercharger APIからスーパーチャージャーの情報を取得してマーカーを表示します。マイル単位で検索条件を指定できます。ジョークとしては、「Teslaの電池がAndroidと同じくらい持続しないときは、たまにスーパーチャージャーを探す楽しみがある」というのがあります。