前提・実現したいこと

googlemapsを表示したいです。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html>
3<head>
4</head>
5<body>
6...
7  <div id="map" style="height: 100px; width: 100px; border: 1px solid #000;"></div>
8...
9 <script type="text/javascript" src="main.js" src="https://maps.googleapis.com/maps/api/js?key=API-KEY"></script>
10</body>
11</html>

JavaScript
1addEventListener('DOMContentLoaded', () => {
2 initMap();
3});
4
5function initMap() {
6  const map = new google.maps.Map(document.getElementById("map"), {
7    zoom: 8,
8    center: { lat: -34.397, lng: 150.644 },
9  });
10  const geocoder = new google.maps.Geocoder();
11  document.getElementById("submit").addEventListener("click", () => {
12    geocodeAddress(geocoder, map);
13  });
14	geocodeAddress(geocoder, resultsMap);
15}
16
17function geocodeAddress(geocoder, resultsMap) {
18  const address = document.getElementById("address").value;
19  geocoder.geocode({ address: address }, (results, status) => {
20    if (status === "OK") {
21      resultsMap.setCenter(results[0].geometry.location);
22      new google.maps.Marker({
23        map: resultsMap,
24        position: results[0].geometry.location,
25      });
26    } else {
27      alert("Geocode was not successful for the following reason: " + status);
28    }
29  });
30}

発生している問題・エラーメッセージ

Uncaught ReferenceError: google is not defined at initMap

読み込み順が関係しているのでは無いかとは思っているのですがよくわかりません。
どうぞよろしくお願いします。

補足情報

jsのコードはGoogle Maps Platformのサンプルコードのコピペ
有効な API: Geocoding API, Geolocation API, Maps JavaScript API

行動規範の内容に同意します

回答1件

ベストアンサー

エラーは google が定義されていないという単純なことですよね。

それはそれとして

<script type="text/javascript" src="main.js" src="https://maps.googleapis.com/maps/api/js?key=API-KEY"></script>
このAPI-KEYのところにはあなたのキーを入れなければならないのでは。
まずここから始める必要がありそうですね。
Google Maps Platform スタートガイド | Google Developers

追記：
src="main.js"が余計というかAPIの読み込みを邪魔しているのでは？

投稿2021/05/03 09:04

編集2021/05/03 09:20