HTMLファイルにグーグルマップを埋め込む方法が分からない。

HTMLファイルにグーグルマップを埋め込みたいのですが、何回ソースをいじってもうまくいきません。
jacascriptを用いるはずなのですが、これに関しては知識がなく、HTMLとjavascriptを連携させる方法が分かりません。
ソース自体はこれなのですが、そもそも合っているのでしょうか？
また、どこの部分にこれを埋め込むのが最適なのでしょうか？
よろしくお願いします。

javascript
1<div id="mapField">
2<style>
3#mapField {
4  width: 350px;
5  height: 350px;
6}
7</style>
8<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false">
9function mapInit() {
10    var centerPosition = new google.maps.LatLng(35.656956, 139.695518);
11    var option = {
12        zoom : 18,
13        center : centerPosition,
14        mapTypeId : google.maps.MapTypeId.ROADMAP
15    };
16    //地図本体描画
17    var googlemap = new google.maps.Map(document.getElementById("mapField"), option);
18}
19 
20    mapInit();
21</script>
22</div>

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

回答2件

ベストアンサー

HTMLファイルに最も簡単にGoogleマップを埋め込む事を考えると、

javascriptを使わずにカンタンに設置できます。
http://inthecom.net/?p=718

投稿2015/10/14 06:16

編集2015/10/14 06:17

YuichiKataoka

総合スコア216

abuuu1203

2015/10/14 06:34

こんなに簡単な方法があったんですね！ありがとうございます。

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

html
1<!DOCTYPE HTML>
2<html lang="ja-JP">
3	<head>
4		<meta charset="UTF-8">
5		<title></title>
6		<style>
7			#mapField {
8				width: 350px;
9				height: 350px;
10			}
11		</style>
12	</head>
13	<body>
14		<div id="mapField"></div>
15		<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?sensor=false"></script>
16		<script type="text/javascript">
17			function mapInit() {
18				var centerPosition = new google.maps.LatLng(35.656956, 139.695518);
19				var option = {
20					zoom: 18,
21					center: centerPosition,
22					mapTypeId: google.maps.MapTypeId.ROADMAP
23				};
24				//地図本体描画
25				var googlemap = new google.maps.Map(document.getElementById("mapField"), option);
26			}
27			mapInit();
28		</script>
29	</body>
30</html>