mrgarita/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, user-scalable=yes">
	<meta name="robots" content="INDEX,FOLLOW">
	<meta name="description" content="東海第2原発から30km圏内をGoogle Maps APIで表示してみました。ただし30kmより外は安全という意味ではありません。">
	<title>東海第2原発から30km圏内</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}

		/* Googleマップをレスポンシブに表示 */
		#map_wrapper {
			position: relative;
			padding-bottom: 56.25%;
			padding-top: 30px;
			height: 0;
			overflow: hidden;
		}

		#map_wrapper #gmap {
			position: absolute; /* 親要素のパディング領域に配置 */
			width: 100%; /* 親コンテナの幅いっぱいに表示 */
			height: 100%; /* 親コンテナの高さいっぱいに表示 */
			top: 0;
			left: 0;
		}
	</style>
</head>

<body>
<div id="map_wrapper">
	<div id="gmap"></div><!-- 地図を表示する領域 -->
</div>
<script>
function initMap() {
	// 中心の座標（東海第2原発の位置）
	var center = { lat: 36.466635, lng: 140.606930};

	//地図のインスタンスを生成
	var map = new google.maps.Map(document.getElementById("gmap"), {
		zoom: 10,
		center: center,
		mapTypeId: "roadmap"
	});

	// マーカーを生成
	var marker = new google.maps.Marker({
		position: center,
		map: map,
		title: "東海第2原発",
		animation: google.maps.Animation.DROP,
		icon: {
			url: "https://maps.google.com/mapfiles/ms/micons/yellow-dot.png",
			scaledSize: new google.maps.Size(30, 30)
		},
	});

	// 吹き出しを生成
	var infoWindow = new google.maps.InfoWindow({
		position: center,
		content: "<h2>東海第2原子力発電所</h2><br>東海第2原発から30km圏内をGoogle Maps APIで表示してみました<br>by <a href='https://dianxnao.com/' target='_blank'>dianxnao.com</a>"
	});

	// 吹き出しをマップに表示
	infoWindow.open(map, marker);

	// 吹き出しが閉じられた場合、マーカークリックすると再度開く設定
	google.maps.event.addListener(infoWindow, "closeclick", function(){
		google.maps.event.addListenerOnce(marker, "click", function(event){
			infoWindow.open(map, marker);
		});
	});

	//Circle（円）のインスタンスを生成
	var myCircle = new google.maps.Circle({
		strokeColor: '#FF0000',
		strokeOpacity: 0.8,
		strokeWeight: 1,
		fillColor: '#FF0000',
		fillOpacity: 0.2,
		map: map,
		center: center,
		draggable: false, 	//円をドラッグできるようにしない
		radius: 1000 * 30  // 単位メートル
	});
}
</script>
<!-- 非同期で表示-->
<script src="https://maps.googleapis.com/maps/api/js?key=ここにAPIキー&callback=initMap" async defer></script>
</body>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, user-scalable=yes">
	<meta name="robots" content="INDEX,FOLLOW">
	<meta name="description" content="東海第2原発から30km圏内をGoogle Maps APIで表示してみました。ただし30kmより外は安全という意味ではありません。">
	<title>東海第2原発から30km圏内</title>
	<style>
	*{
	margin: 0;
	padding: 0;
	}

	/* Googleマップをレスポンシブに表示 */
	#map_wrapper {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
	}

	#map_wrapper #gmap {
	position: absolute; /* 親要素のパディング領域に配置 */
	width: 100%; /* 親コンテナの幅いっぱいに表示 */
	height: 100%; /* 親コンテナの高さいっぱいに表示 */
	top: 0;
	left: 0;
	}
	</style>
	</head>

	<body>
	<div id="map_wrapper">
	<div id="gmap"></div><!-- 地図を表示する領域 -->
	</div>
	<script>
	function initMap() {
	// 中心の座標（東海第2原発の位置）
	var center = { lat: 36.466635, lng: 140.606930};

	//地図のインスタンスを生成
	var map = new google.maps.Map(document.getElementById("gmap"), {
	zoom: 10,
	center: center,
	mapTypeId: "roadmap"
	});

	// マーカーを生成
	var marker = new google.maps.Marker({
	position: center,
	map: map,
	title: "東海第2原発",
	animation: google.maps.Animation.DROP,
	icon: {
	url: "https://maps.google.com/mapfiles/ms/micons/yellow-dot.png",
	scaledSize: new google.maps.Size(30, 30)
	},
	});

	// 吹き出しを生成
	var infoWindow = new google.maps.InfoWindow({
	position: center,
	content: "<h2>東海第2原子力発電所</h2><br>東海第2原発から30km圏内をGoogle Maps APIで表示してみました<br>by <a href='https://dianxnao.com/' target='_blank'>dianxnao.com</a>"
	});

	// 吹き出しをマップに表示
	infoWindow.open(map, marker);

	// 吹き出しが閉じられた場合、マーカークリックすると再度開く設定
	google.maps.event.addListener(infoWindow, "closeclick", function(){
	google.maps.event.addListenerOnce(marker, "click", function(event){
	infoWindow.open(map, marker);
	});
	});

	//Circle（円）のインスタンスを生成
	var myCircle = new google.maps.Circle({
	strokeColor: '#FF0000',
	strokeOpacity: 0.8,
	strokeWeight: 1,
	fillColor: '#FF0000',
	fillOpacity: 0.2,
	map: map,
	center: center,
	draggable: false, //円をドラッグできるようにしない
	radius: 1000 * 30 // 単位メートル
	});
	}
	</script>
	<!-- 非同期で表示-->
	<script src="https://maps.googleapis.com/maps/api/js?key=ここにAPIキー&callback=initMap" async defer></script>
	</body>