Google Maps JavaScript APIを試した
2020-07-31
2020-07-31
前置き
今回はGoogle Maps JavaScript APIを使って地図の表示を試しました。
Maps JavaScript APIの使用を開始する前に、Googleアカウントの準備とMaps JavaScript APIキーが取得する必要があります。APIキーの取得する方法は公式サイト「Get an API Key」にご参照ください。
Maps JavaScript APIを使って地図表示
Google地図をウェブサイトに表示されます。取得したAPIキーを「YOUR_API_KEY」の所に入力します。
```<!DOCTYPE html>
<html>
<head>
<title>Map</title>
<meta charset="UTF-8">
<script defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>
<style>
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
// 座標指定
var latlng = {lat: 35.6812362, lng: 139.7649361};
// 地図表示
var map = new google.maps.Map(document.getElementById('map'), {
center: latlng,
zoom: 4
});
}
</script>
</body>
</html>
```<html>
<head>
<title>Map</title>
<meta charset="UTF-8">
<script defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>
<style>
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
// 座標指定
var latlng = {lat: 35.6812362, lng: 139.7649361};
// 地図表示
var map = new google.maps.Map(document.getElementById('map'), {
center: latlng,
zoom: 4
});
}
</script>
</body>
</html>
マーカーを地図上で表示されます。
```// マーカー設定
var marker = new google.maps.Marker({
position: latlng,
map: map
});
```var marker = new google.maps.Marker({
position: latlng,
map: map
});
InfoWindowポップアップ内に指定した文字列やコンテンツを表示されます。
```// InfoWindow設定
var infowindow = new google.maps.InfoWindow({
content: '東京'
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
``` content: '東京'
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});