GoogleMapをレスポンシブ対応にしたい

###実現したいこと
GoogleMapをレスポンシブ対応にしたいｄ
###現状
地図が表示されません
###試したこと
以下のサイトを基にコードを記述しました。
http://on-ze.com/archives/5822

html

<DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
      <div id="googlemaps"></div>
      <script src="//maps.google.com/maps/api/js?key=【APIキーを入力してあります】"></script>
      <script src="main.js"></script>
  </body>
</html>

css

#googlemaps {
width:100%;
height:300px;
position:relative;
}

function initialize() {
	var latlng = new google.maps.LatLng(35.681298, 139.7662469);
	var myOptions = {
		zoom: 18,
		center: latlng,
		mapTypeId: google.maps.MapTypeId.LOADMAP,
		scrollwheel: false,
		disableDefaultUI: false,
	};
var map = new google.maps.Map(document.getElementById('googlemaps'), myOptions);
var lopanMarker = new google.maps.Marker({
	position: latlng,
	map: map,
});
google.maps.event.addDomListener(window, "resize", function() {
	var center = map.getCenter();
	google.maps.event.trigger(map, "resize");
	map.setCenter(center);
});
var styledMapOptions = { name: '東京駅' }
}
google.maps.event.addDomListener(window, 'load', initialize);

原因が分かる方いらっしいましたら、アドバイスお願いいたします。
以上、よろしくお願いいたします。

kei344

2017/11/27 15:37

エラーは出ていませんか？デベロッパーツールで確認してみてください。http://eng-entrance.com/javascript-display-error

narururu

2017/11/28 04:45

エラーは「uncaught referenceerror google is not defined」とでております。スクリプトの読み込み順番を変えたりして試しましたが、結果は変わりませんでした。

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

回答1件

ベストアンサー

エラーは「uncaught referenceerror google is not defined」とでております。

サーバ上でなく、ローカルで試していませんか？公開状態のサーバ上で試してみてください。

投稿2017/11/28 06:27

kei344

総合スコア69398

narururu

2017/11/28 10:47

ご回答ありがとうございます。インターネットに公開後、きちんとレスポンシブになっておりました。教えて下さり、本当にありがとうございます。助かりました。そういえば、以前、googlemapのマーカーのアイコンを編集して反映されなかった原因も、おそらくインターネットに公開していないからかも。。。試してみよう。。(゜-゜)

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