グーグルマップを表示する
ホームページ上の地図などでお馴染みのグーグルマップの表示方法を解説します。
APIキーというものが必要になるのでもし取得してない場合はAPIキーの取得方法こちらなどを参考にAPIキーの取得をお願いします。
javascript、cssのコード
ではさっそくですがこちらがマップを表示するための「javascript」、「css」のコードになります。
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&language=ja®ion=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®ion=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>
こちらを書けば完了です！
マップが表示されました！
簡単にまとめたソースになります！
広告