こんなかんじにGoogleMapを表示する方法です。
2012.10の方法
Googlemapで検索したあと、リンクのアイコンを押して、そこに表示される
ウェブサイトへの地図埋め込み用HTMLコードをコピーして
自分のホームページのソースに貼付けるだけ。。非常に簡単になりました。
過去の方法
以下、詳しいことは省力して必要最低限な作業手順のみを紹介します。
1. ヘッダーに追加
自分のホームページのhtmlソースの中の
<head>から
</head>
の間に以下をコピペします。
<script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=places&sensor=talse"></script>
2. 本文に追加
htmlのソースの中で、GoogleMapの地図を表示させたいところに以下を入力すればOKです。
基本的にこれで作業は終わりです。
赤字のところが変数です。変数については3.で説明しますので各自で変更してください。
以下をコピペ。
<div id="googlemap" style="width : 500px; height : 300px;"></div>
<script type="text/javascript">
ido=34.413654;
keido=134.792503;
google.maps.event.addDomListener(window, 'load', function() {
var mapdiv = document.getElementById('googlemap');
var myOptions = {
zoom:9,
center: new google.maps.LatLng(ido,keido),
mapTypeId: google.maps.MapTypeId.ROADMAP,
scaleControl: true,
};
var map = new google.maps.Map(mapdiv, myOptions);
});
</script>
3. 変数について
width : 500px;
height : 300px;
 |
地図の横と縦の大きさです。単位はピクセル。
この例では横500、縦300ピクセルです。 |
ido=34.413654;
keido=134.792503; |
地図の場所の緯度と経度です。
緯度と経度は、GoogleMapで場所を検索すると表示されますので、それをコピペで入力します。
|
zoom:9,
|
地図の縮尺です。
だいたいの目安は
zoom:2, アジア全体
zoom:4, 日本列島全体
zoom:8, 周辺の県を含む
zoom:9, 県
zoom:10, 淡路島ぐらい
以下に例を示します。
■zoom:9のとき
■zoom:4のとき
|
|
