GoogleMapがうまく表示されない

Question

Google APIキーを使用してMAPを埋め込んだのですが地図が表示されません。
特にエラーメッセージなどはなく、少しブラウザのウインドウ幅を触ると地図が表示されます。レスポンシブ対応でスマホで見ると問題なく表示されます。
HTMLの書き方に問題があるのでしょうか？
APIキーを再取得してみたり、<script>の記述位置を変えてみたりしてもうまくいきませんでした。
エラーメッセージなどがなく、表示されることは表示されるので対処法に困っています。
どなたかご教示よろしくお願いします。

<div id="map">
<script src="https://maps.googleapis.com/maps/api/js?key=APIキー"
  type="text/javascript"></script>

<script type="text/javascript">
function mapInit() {
	var position = new google.maps.LatLng(座標);
	var mapOptions = {
		zoom : 16,
		center : position,
	};
	var map = new google.maps.Map(document.getElementById("map"), mapOptions);
	var marker = new google.maps.Marker({
		position : position,
		map : map,
		title : "",
		icon : {
		url : "アイコン画像",
		size : new google.maps.Size(75, 98),
		origin : new google.maps.Point(0, 0),
		}
});
mapInit();

</script>
</div>

css

#map{
	width:850px;
	height: 350px;
}

@media only screen and (max-width:768px) {	
#map{
	width:100%;
	height: 200px;
}
}

Comments

[Lhankor_Mhy]

ご提示のコードは`function mapInit() {`が閉じられてないので文法エラーになります。スマホで問題なく表示されたとのこと、おそらく実際のコードとは異なるのだと思います。閉じカッコを補完したコードを試してみましたが、問題が再現しませんでしたので、ここに書かれていないコードに問題があるのだと思います。

[YOD]

申し訳ありません！コピペミスでした。function mapInit() {は閉じてあるのですがやはり表示されません。他のページではちゃんと表示されるのですが....HTMLかCSSに問題があるのでしょうか？

[Lhankor_Mhy]

ご提示のコードは当方の環境で問題が再現しなかったというだけなので、ご提示されていないコードに問題があるか、あるいは環境の問題なのか、の切り分けはできていません。

[Lhankor_Mhy]

言葉が足りないような気がしましたので補足しますと、ご提示のコードを質問者の環境で実行してみて動作するようなら問題はそれ以外のコードに、動作しないのなら問題は環境に、あるということかと思います。

[YOD]

ありがとうございます。やはりscriptのコードには問題がなさそうなので、全体のソースを見直して見ることにしました。ご丁寧にありがとうございます。おっしゃる通り、環境の問題も考慮して可能性を1つずつ試していこうと思います。

Answer 1

mapInit()呼び出しタイミングで準備が出来ていないからでは。

<script src="https://maps.googleapis.com/maps/api/js?key=APIキー" type="text/javascript"></script>
```↓
```HTML
<script src="https://maps.googleapis.com/maps/api/js?key=APIキー&callback=mapInit" type="text/javascript"></script>

// ↓ これを消す
// mapInit();

Comments

[YOD]

Kei344さん、いつも返答ありがとうございます！JavaScriptも勉強中でわからない事だらけなのでとても勉強になります！無事に表示されるようになりました！