自由にカスタマイズしたければGoogleMap APIを使ってワンランク上のマップ表示を覚えよう



ホームページに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に対してサイズを指定します。

#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 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からコードをひっぱってきて貼り付けるより、
いろんなことができるので、そのうち紹介しますね。