ホームページにGoogleMapを表示させる方法はいくつかあります。
一番簡単な方法はGoogleMapからコードをもってきて貼り付ける方法。
誰でも簡単に設置できる。GOOGLEMAPをホームページやブログに載せる方法
一番簡単な方法はGoogleMapからコードをもってきて貼り付ける方法。
誰でも簡単に設置できる。GOOGLEMAPをホームページやブログに載せる方法
でも、ちょっと高度な使い方をしたかったらこの方法では無理なので、
ちょっと高度なGppgleMap APIの使い方を説明。
そんなに難しくないので一度トライしてみてください。
GoogleMAP APIを使えるように準備する
まずはGoogleMAPのAPIを使うための準備です。
GoogleMAPを使うために次のコードを<head></head>に入れます。
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
GoogleMAPを表示する場所を用意する
次にGoogleMAPを表示させたい場所に表示領域を作ります。
idは何でもいいですが、スタイルや表示の指示を行うのでわかりすい名前で。
idを変えれば複数のマップを1つのページに設置ができます。
よくわからなければ、このままでいきましょう。
<div id="map"></div>
先ほどマップを表示する場所を指定しましたが、
あのままだと幅も高さもないのでマップが見えません。
cssで先ほどのidに対してサイズを指定します。
あのままだと幅も高さもないのでマップが見えません。
cssで先ほどのidに対してサイズを指定します。
#map{ width: 500px; height: 320px; }
GoogleMAPを実際に表示させる
最後に、指定したマップの表示場所に実際にマップを表示させる処理です。
ここが一番ややこしいのですが、とりあえず下のスクリプトをそのまま使ってください。
まずやってみることです。
<script type="text/javascript"> /* map */ function initialize() { var latlng = new google.maps.LatLng(35, 135); var myOptions = { zoom: 10, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById('map'), myOptions); // マーカーの設定 var marker = new google.maps.Marker({ position: latlng, map: map }); } </script>
最後に、どのタイミングでマップの表示を指示するかというと、
ページがロードされた後なので、<body>タグにこのように書きます。
ページがロードされたらinitialize()を処理してね、という命令です。
ページがロードされた後なので、<body>タグにこのように書きます。
ページがロードされたらinitialize()を処理してね、という命令です。
<body onload="initialize()">
マップ表示のカスタマイズ
マップのスタイルは自由に変えることができます。
先ほどのmyOptionsという変数で指定している内容
var latlng = new google.maps.LatLng(35, 135); var myOptions = { zoom: 10, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP };
座標系は次のヶ所で指定してます
var latlng = new google.maps.LatLng(35, 135);
myOptionは次の属性を設定しています。
zoom | 地図の拡大縮。 | 0~19で数字が大きくなるほど拡大。 |
---|---|---|
center | 地図の中心。 | |
mapTypeId | 地図の形式 | ROADMAP … 通常の地図 SATELLITE … 航空写真 HYBRID … 写真+地図 TERRAIN … 地形 |
マーカーを立てる
マーカーは次の個所で表示させてます。
このまま使うといいでしょう。
latlng という変数はマーカーを置く場所を指定しています。
上で指定したものを使ってます。
// マーカーの設定 var marker = new google.maps.Marker({ position: latlng, map: map });
このカスタマイズの部分はまだまだいろいろなことができます。
GoogleMapからコードをひっぱってきて貼り付けるより、
いろんなことができるので、そのうち紹介しますね。