このjavascriptが動作しない原因を教えてくだい。

google map が表示されないのですが以下のコードのどこが間違っているのでしょうか。

Function
1	var	myLatlng = new google.maps.LatLng(35.047205, 135.7871331),
2		mapElement = document.getElementByld("mapDiv"),
3		mapOptions = {
4			zoom: 14,
5			center: myLatlng
6		},
7		map = new google.maps.Map(mapElement, mapOptions);
8}

<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>gmsmp</title>
	<style>
		#mapDiv {
			height: 500px;
			width: 800px;
		}
	</style>
	<script src="gmsmp.js"></script>
	<script src="https://maps.googleapis.com/maps/api/js?language=ja&region=JP&key=●●●&callback=initMap" async defer></script>
</head>
<body onload="initMap()">
	<div id="mapDiv"></div>
</body>
</html>

●●●はAPIキーです。
javascriptを始めたばかりです。よろしくお願いします。

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

回答1件

ベストアンサー

参考：
https://qiita.com/Haruka-Ogawa/items/997401a2edcd20e61037
から、ほぼ持ってきたコードかと思いますが、
なんで参考サイトに書いてあるとおりにしないのでしょうか？

bodyのonloadでinitMap関数を呼ぶ必要はありません。こちらは

<script src="https://maps.googleapis.com/maps/api/js?language=ja&region=JP&key=●●●&callback=initMap" async defer></script>

のcallback指定から自動的に呼び出されます。

JavaScript部分も下手に「,」区切りに変更せず、まずは１行ずつ「;」区切りにして実行してはいかがでしょうか？

また、JavaScriptを別ファイルにしているのか、記述を抜粋しているのか分からない為、initMap関数の実装自体が合っているのかが判別できません。

投稿2020/06/05 18:27

massive003

総合スコア70

lakajahaga

2020/06/05 18:31

回答ありがとうございます。別ファイルにしています。コードはこのサイトでなく教則本に書いてあったものです。 bodyのonloadが無い状態でも動作しないので、試しにonloadを加えたものを載せてしまいました。

lakajahaga

2020/06/05 19:18

すみません...解決しました。 getElementByIdをgetElementByld と小文字のエルで書いていたのが原因でした。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

このjavascriptが動作しない原因を教えてくだい。

関連した質問