以下は、地図上に赤いピンで表示される世田谷区駒沢1-4-6から8km先の場所を、地図上に青い円で示すサンプルコードです。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>8km先の場所を地図で表示する</title>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
<script>
function initMap() {
var startingPoint = {lat: 35.644288, lng: 139.673318}; // 世田谷区駒沢1-4-6
var radius = 8000; // 8km
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: startingPoint
});
var marker = new google.maps.Marker({
position: startingPoint,
map: map,
title: "世田谷区駒沢1-4-6"
});
var circle = new google.maps.Circle({
strokeColor: '#0f9d58',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#0f9d58',
fillOpacity: 0.15,
map: map,
center: startingPoint,
radius: radius
});
}
</script>
</head>
<body onload="initMap()">
<div id="map" style="height: 400px;"></div>
</body>
</html>
```
注意点として、Google Maps APIキーを取得し、`YOUR_API_KEY`の部分を自身のAPIキーに置き換えてください。また、8km先の場所を求めるために計算を行うのではなく、半径8kmの円を描画することで表現しています。
