画像(logo)

HOME/[javascript言語]グーグルマップ利用法 目次/グーグルマップを表示する

広告

[javascript言語 グーグルマップ利用法]
グーグルマップを表示する

目次へ戻る

グーグルマップを表示する

ホームページ上の地図などでお馴染みのグーグルマップの表示方法を解説します。

APIキーというものが必要になるのでもし取得してない場合はAPIキーの取得方法こちらなどを参考にAPIキーの取得をお願いします。

javascript、cssのコード

ではさっそくですがこちらがマップを表示するための「javascript」、「css」のコードになります。

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&language=ja&region=JP"></script>
<script type="text/javascript">
<!--

function mapinit(){
	var centerposition = new google.maps.LatLng(35.683142915306746,139.7524109389633);
	var option = {
		zoom: 13,
		center: centerposition,
	};
	var map = new google.maps.Map(document.getElementById("map"),option);
}

//-->
</script>
<style type="text/css">
<!--

#map{
	width: 500px;
	height: 360px;
}

//-->
</style>

こちらをお使いのホームページの「<head>〜</head>」タグの間にそのまま貼り付けてください。

そして前半の

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&language=ja&region=JP"></script>

この「YOUR_KEY」の部分に取得したAPIキーを入れるようなカタチになります。

そしてとりあえず表示する部分の緯度・経度を

var centerposition = new google.maps.LatLng(35.683142915306746,139.7524109389633);

こちらに入れます。

35.683...が緯度(lat)で139.752...が経度(lng)になります。

緯度・経度を調べたい時は普通にグーグルを使って住所検索、地図を表示、調べたいトコロの上で右クリック、「この場所について」という項目を選択すれば緯度・経度を知る事ができます。

var option = {
	zoom: 13,
	center: centerposition,
};

この「zoom」の値が表示する時の初期拡大率になります。

ここまでが「javascript」の部分になります。

次は「css」でマップの大きさを決めます。

#map{
	width: 500px;
	height: 360px;
}

これはまあ、お好みの大きさに調整してください。

あとはhtmlを少し変更します。

「<body>」タグを「<body onload="mapinit()">」のように変更してください。

これで用意した「javascript」の部分がhtmlファイル読み込み時に実行されるようになります。

最後に表示したい場所に

<div id="map"></div>

こちらを書けば完了です!

画像(jsgm_2_1)

マップが表示されました!

簡単にまとめたソースになります!

グーグルマップ サンプル1

□ページの先頭へ□

□目次へ戻る□

□HOME□

広告