概要
1日10行コーディングとは
まず、1日10行コーディングというのは、1日10行でいいから新しいコード書こうよって感じのやつです(雑)
(1日1記事とか1機能とかだと続かない気がしてしまってる...)
実装するもの
最終的に作りたいのは自分でピンを立てた店のアイコンとかを自由に変えられたり、カテゴリごとにアイコン変えたりとかするものが作りたいという気持ち。Google Map my place??とかいうのに近いというか多分おんなじようなのになると思う。
ただ、今日はその前の前の前の前段階くらいのとりあえずマップを表示するページを作ろうと思います。
手順
https://www.javadrive.jp/google-maps-javascript/charset/
とりあえずこちらの手順を参考にAPIキーの取得とかをします。
資料古かったのでスクショとかは微妙にあてにならなかった。
-
Google Maps PlatformページのCreating API keys手順に従ってAPIキーを生成する。(https://developers.google.com/maps/documentation/javascript/get-api-key)
-
HTMLにすべてをベタ書きする
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>俺のいきつけ</title>
<style>
/* Set the size of the div element that contains the map */
#map {
height: 400px;
/* The height is 400 pixels */
width: 100%;
/* The width is the width of the web page */
}
</style>
<script>
function initMap() {
// The location of Uluru
const uluru = { lat: -25.344, lng: 131.036 };
// The map, centered at Uluru
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 4,
center: uluru,
});
// The marker, positioned at Uluru
const marker = new google.maps.Marker({
position: uluru,
map: map,
});
}
</script>
</head>
<body>
<!--The div element for the map -->
<div id="map"></div>
<!-- Async script executes immediately and must be after any DOM elements used in callback. -->
<script
src="https://maps.googleapis.com/maps/api/js?key=APIキー&callback=initMap&libraries=&v=weekly"
async
></script>
</body>
</html>
- ブラウザで動作確認
無事表示できた！
ちょっと困ったこと
請求先みたいなのがないとちゃんと表示されないみたいだったからクレカの登録をしました。
終わり。