デフォルトのマーカーを表示する

まずは、デフォルトのマーカーを表示させます。マーカーを表示させるには、以下のコードを追記します。（※ここからは「新宿駅（35.690, 139.700）」を中心とした地図を表示します）

  var markerOptions = {
    position: latlng,
    map: map,
    title: '新宿駅'
  };
  var marker = new google.maps.Marker(markerOptions);

最後の行のvar marker = new google.maps.Marker(markerOptions);で、「marker」というマーカーを作成しています。括弧の中（引数）には、オプションを指定できます。ここではmarkerOptionsという変数に入れたオプションを指定しています。オプションには以下のようなものが用意されています。

• position
  マーカーを表示させる位置を座標で指定します。この指定は必須です。
• map
  どの地図にマーカーを表示させるか指定します。この指定も必須だと思います。
• title
  マーカーにロールオーバーした時に出るツールチップ用テキストを指定できます。
• draggable
  マーカーをドラッグできるかできないかを指定できます。draggable: trueで「ドラッグできる」、draggable: falseで「ドラッグできない」。
• animation
  マーカーにアニメーションを指定できます。アニメーションには、上から落ちてくる「DROP」、ピョンピョン弾む「BOUNCE」があります。
  animation: google.maps.Animation.DROPという風に記述。

ここまでで、以下のような表示結果となります。

アイコン用の画像を用意する

オリジナルアイコン用の画像を制作します。アイコンには「Lopan cafeのロゴ」を使用します。

影の画像は、通常、主の画像の右上方向に 45 度の角度で作成する必要があり、影の画像の左下角はアイコン画像の左下角と揃っている必要があります。影の画像は、画像の境界が地図上に正しく表示されるように、アルファ透明度の 24 ビット PNG 画像にする必要があります。

地図上にアイコンを設置する

マーカーをオリジナルのアイコンに変更するには、マーカーの指定部分に、以下のように追記します。（※ハイライトされた行が追記部分。）

  /* アイコン設定 */
  var icon = new google.maps.MarkerImage('ico_lopan.png',
    new google.maps.Size(82,42),
    new google.maps.Point(0,0),
    new google.maps.Point(31,42)
  );
  var shadow = new google.maps.MarkerImage('ico_lopan.png',
    new google.maps.Size(82,42),
    new google.maps.Point(0,42),
    new google.maps.Point(31,42)
  );
  var markerOptions = {
    position: latlng,
    map: map,
    icon: icon,
    shadow: shadow,
    title: '新宿駅'
  };
  var marker = new google.maps.Marker(markerOptions);

前半部分で、アイコンに使う画像をiconという変数に、アイコンの影に使う画像をshadowという変数に、それぞれ入れています。画像の表示方法について、以下の事を定義する事ができます。

ここまでで、以下のような表示結果となります。

デフォルトで表示されるコントロールセット

• ズーム コントロール
  +と-でズームレベルを変更する。地図のサイズが400×370px以上の場合と、400×370px未満の場合とで、表示が変わります。
• 移動 コントロール
  上下左右の矢印で地図を移動する。地図のサイズが400×370px未満の場合は、表示されません。
• マップ タイプ コントロール
  地図、航空写真などのマップ タイプを変更する。幅が300px以上の場合は並列表示、300px未満の場合はドロップダウン表示になります。
• ストリートビュー コントロール
  ペグマンを地図上にドラッグして、ストリートビューを有効にする。地図のサイズが400×370px以上の場合は移動 コントロールの下、400×370px未満の場合は左上に表示されます。

デフォルトのコントロールセットを無効にする

これらデフォルトの設定をすべて取っ払いたい場合は以下のようにコードを追記します。

  var myOptions = {
    zoom: 8,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    disableDefaultUI: true
  };

disableDefaultUIをtrueにするだけ。この一行で、Google マップのデフォルトのコントローラーをいっぺんに取っ払うことができます。

このプロパティは、Google Maps API のすべての自動の UI 動作を無効にします。

デフォルトのコントロールセットを取っ払った結果、以下のような表示となります。

コントロールの表示を個別で指定するためのプロパティ

コントロールの表示/非表示を個別に設定するには、以下のプロパティで設定できます。trueで「表示する」、falseで「表示しない」です。

• panControl: true（移動 コントロールの表示）
  移動コントロールを有効または無効にします。
• zoomControl: true（ズーム コントロールの表示）
  ズーム コントロールを有効または無効にします。
• mapTypeControl: true（マップ タイプ コントロールの表示）
  マップ タイプ（地図や航空写真など）を切り替えるマップ タイプ コントロールを有効または無効にします。
• scaleControl: true（スケールの表示）
  簡単な地図縮尺を表示するスケール コントロールを有効または無効にします。
• streetViewControl: true（ペグマンの表示）
  ストリートビューを有効または無効にするペグマンを、表示または非表示にします。
• rotateControl: true（回転コントロールの表示）
  45 度画像の向きをコントロールする回転コントロールの表示を有効または無効にします。デフォルトではこのコントロールの表示は、現在表示されているズームと場所での指定されたマップ タイプに 45 度画像があるかどうかで決まります。
• overviewMapControl: true（概観マップの表示）
  概観マップを有効または無効にします。概観マップ コントロールは、完全に表示（サムネイル概観マップを表示）するか、折りたたんで最小化した状態で表示することができます。デフォルトは、コントロールは無効で、折りたたまれた状態です。

その他にもオプション設定が出来たりします。詳しくはこちらをご参照ください！

スタイル付き地図を使ったカスタマイズ

地図上の地名などの文字情報を取っ払うにはこのスタイル付き地図を使用します。
スタイル付き地図を使用して文字を取っ払うと、以下のようになります。

文字を消すには以下のコードを追記します。

  /* スタイル付き地図 */
  var styleOptions = [{
    featureType: 'all',
    elementType: 'labels',
    stylers: [{ visibility: 'off' }]
  }];
  var lopanType = new google.maps.StyledMapType(styleOptions);
  map.mapTypes.set('noText', lopanType);
  map.setMapTypeId('noText');

スタイルの指定方法

  var styleOptions = [{
    featureType: 'all',
    elementType: 'labels',
    stylers: [{ visibility: 'off' }]
  }];

上記の記述で、地図に適用させるスタイルを指定しています。記述の流れは以下の通り。

1. featureTypeで、地図上のどの対象物に適用するか選択し、

2. elementTypeで、その対象物のどの要素に適用するかを選択し、

3. stylersに、適用するスタイラを指定する。

今回の、文字を取っ払うための記述では、以下のような流れになってます。

1. 対象物として、all（すべて）を選択し、

2. 要素として、labels（テキスト要素）を選択し、

3. スタイラで、visibility（表示状態）をoffに指定した。

Google マップを構成する対象物とその要素

Google マップは、道路とか公園などの対象物の集合体で構成され、一部の対象物は、描画された「線や図形の要素（geometry）」と、地名や標識を表す「テキストやラベルの要素（labels）」とで構成されています。
下図は、左がデフォルトの状態、真ん中はテキストやラベルの要素を取っ払ったもの、右は線や図形の要素を取っ払ったものです。

作成したスタイルをマップ タイプに登録する

  var lopanType = new google.maps.StyledMapType(styleOptions);

ここで、lopanTypeという名前のStyledMapType（スタイル付き地図）を作成しています。括弧の中（引数）には、上で指定したスタイルstyleOptionsを指定しています。

  map.mapTypes.set('noText', lopanType);
  map.setMapTypeId('noText');

スタイル付き地図というのは、StyledMapTypeとあるように、スタイル付きの「マップ タイプ」です。Google マップの右上に表示される「地図」とか「航空写真」と並ぶ、別の表示タイプを登録する事ができる、という事です。たぶん。

なので、例えば以下のように記述すれば、作成したスタイル付き地図を、右上のマップ タイプ コントロールとして表示させる事ができます。

スタイル付き地図の色に関するオプション

• hue

  基本色を指定できます。#593869などのRGBの16進文字列で指定。

  
• lightness

  明度を調整できます。-100（暗い）⇔+100（明るい）です。デフォルトは0。

  
• saturation

  彩度を調整できます。-100（くすんだ）⇔+100（鮮やか）です。デフォルトは0。

  
• gamma

  階調度を調整できます。0.01（コントラストが高い）⇔10.0（コントラストが低い）です。デフォルトは1.0。

  
• invert_lightness

  現在の明るさを反転できます。true（反転する）、false（反転しない）です。

  

スタイル付き地図を使った色のカスタマイズ

以下のように記述すれば、下のサンプルのように色を変更する事ができます。
線や図形の基本色を#6d4d38にして、彩度を下げて、コントラストを上げてみました。

  var styleOptions = [{
    featureType: 'all',
    elementType: 'labels',
    stylers: [{ visibility: 'off' }]
  }, {
    featureType: 'all',
    elementType: 'geometry',
    stylers: [{ hue: '#6d4d38' }, { saturation: '-70' }, { gamma: '0.5' }]
  }];

はい、統一されましたね。
…けどなんかモノトーンで味気ないし、テキストが全くないってのも分かりズライ。海の色は水色にしたいし、地上の色はもっとベージュっぽくしたいし、テキストも、地名と駅の名前だけは表示させたいなぁ…。

そんな時はfeatureTypeとelementTypeで、どの対象物にスタイルを適用するかを細かく指定してやる必要があります！
「featureType（対象物タイプ）」の指定に使用できる値は以下の通り（2012年3月12日現在）。

指定できる対象物とその子対象物

• all

  

  地図上の対象物タイプすべてを選択する事ができます。
  表示倍率によって、表示される対象物の描画が異なるので、右の図では上からzoom: 18、zoom: 15、zoom: 12、zoom: 8、の時の表示を載せてます。
  また、対象物タイプには、さらに詳細に選択できる子対象物というのも用意されています。

• administrative

  

  地図上の行政領域を選択します。
  国境・県境などの線や図形、国名・市区町村名などの地名を含みます。

  • administrative.country（国）
  • administrative.land_parcel（区画）
  • administrative.locality（地区・市区）
  • administrative.neighborhood（周辺地域）
  • administrative.province（州・県）
• landscape

  

  地図上の風景を選択します。
  建物・山などの線や図形、建物・島・山・川・峠・湖などの名称を含みます。

  • landscape.man_made（人造物）
  • landscape.natural（自然物）
• poi

  

  地図上のランドマークを選択します。
  学校・病院・駅・公園・工場・遊園地・大きいお店やビルなどの線や図形、それらの名称を含みます。

  • poi.attraction（観光地）
  • poi.business（ビジネス）
  • poi.government（政府機関）
  • poi.medical（緊急サービス）
  • poi.park（公園）
  • poi.place_of_worship（宗教関係の施設）
  • poi.school（学校）
  • poi.sports_complex（スポーツ施設）
• road

  

  地図上のすべての道路を選択します。
  高速道路・国道・県道・市道などの線や図形、それらの名称や国道標識・県道標識・信号機アイコンを含みます。

  • road.arterial（幹線道路）
  • road.highway（高速道路）
  • road.local（地方道）
• transit

  

  地図上のすべての交通機関の駅と路線を選択します。
  線路・航路・空路・空港などの線や図形、線路名・駅名・空港名や駅・バス停留所アイコンを含みます。

  • transit.line（交通機関の路線）
  • transit.station（交通機関の駅）
  • transit.station.airport（空港）
  • transit.station.bus（バス停留所）
  • transit.station.rail（鉄道駅）
• water

  

  地図上の水域を選択します。
  海・川・湖・プールなど水のある場所の線や図形、海・洋・湾の名称を含みます。

より細かく色指定してみる

より細かく設定してみました。
地面の色をベージュにして、市区名と駅名を焦げ茶色で表示。道路は、一般道を白に、高速道路を黄色に。ランドマークはビジネス系のみオレンジ色で表示。あとは、水域を水色に、公園を緑に、といった感じにしました:)。

行列の画像をつくる

画像を貼るためのコード

画像を追加するには下記コードを追加しました。（※ほぼこちらのサンプルで使われているもののコピペです…）

var overlay;
function initialize() {
  
  〜中略〜
  
  /* カスタム オーバーレイ */
  var neBound = new google.maps.LatLng(35.693555, 139.70108); // NorthEast（北東）上, 右
  var swBound = new google.maps.LatLng(35.691792, 139.700375); // SouthWest（南西）下, 左
  var bounds = new google.maps.LatLngBounds(swBound, neBound);
  var srcImage = 'pegman.png';
  overlay = new USGSOverlay(bounds, srcImage, map);
}

/* カスタム オーバーレイ */
function USGSOverlay(bounds, image, map) {
  this.bounds_ = bounds;
  this.image_ = image;
  this.map_ = map;
  this.div_ = null;
  this.setMap(map);
}

USGSOverlay.prototype = new google.maps.OverlayView();

USGSOverlay.prototype.onAdd = function() {
  var div = document.createElement('div');
  div.style.border = 'none';
  div.style.borderWidth = '0px';
  div.style.position = 'absolute';
  var img = document.createElement('img');
  img.src = this.image_;
  img.style.width = '100%';
  img.style.height = '100%';
  div.appendChild(img);
  this.div_ = div;
  var panes = this.getPanes();
  panes.overlayLayer.appendChild(div);
}

USGSOverlay.prototype.draw = function() {
  var overlayProjection = this.getProjection();
  var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
  var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());
  var div = this.div_;
  div.style.left = sw.x + 'px';
  div.style.top = ne.y + 'px';
  div.style.width = (ne.x - sw.x) + 'px';
  div.style.height = (sw.y - ne.y) + 'px';
}

USGSOverlay.prototype.onRemove = function() {
  this.div_.parentNode.removeChild(this.div_);
  this.div_ = null;
}

画像を貼るだけだろ？なんて安易に考えてましたが、なんだか無情に複雑でした…。Google マップに画像を貼り込むには、いろいろな手続きが必要なようです。
ひとつずつ見ていきましょう。
まず、initialize()の中で下記を記述しています。

  var neBound = new google.maps.LatLng(35.693555, 139.70108); // NorthEast（北東）上, 右
  var swBound = new google.maps.LatLng(35.691792, 139.700375); // SouthWest（南西）下, 左
  var bounds = new google.maps.LatLngBounds(swBound, neBound);
  var srcImage = 'pegman.png';
  overlay = new USGSOverlay(bounds, srcImage, map);

ここではオーバーレイのサブクラス化というのをしてるらしいです。
パッと見分かるのがgoogle.maps.LatLngBoundsというのが、どうやら画像を貼り込む座標位置らしいぞ、ということ。
画像の右上角と左下角の点を置く座標位置を指定します。アイコンの時と指定方法が違います。ので、プレビューを見ながらの微調整が必要でした…X(。（※簡単な設置の仕方があれば教えて欲しいです…！）
で次に、すべてのプロパティを初期化→OverlayView を明示的に USGSOverlay のサブクラスとして指定します。僕にはまだ敷居が高過ぎたようです。

function USGSOverlay(bounds, image, map) {
  this.bounds_ = bounds;
  this.image_ = image;
  this.map_ = map;
  this.div_ = null;
  this.setMap(map);
}
USGSOverlay.prototype = new google.maps.OverlayView();

そしてさらに、以下でオーバーレイの初期化を行います。

画像を保持する <div> を作成し、<img> 要素を追加し、それを <div> に貼り込み、最後にオーバーレイを、地図の「ペイン」（DOM ツリーのノード）の 1 つに貼り込みます。

USGSOverlay.prototype.onAdd = function() {
  var div = document.createElement('div');
  div.style.border = 'none';
  div.style.borderWidth = '0px';
  div.style.position = 'absolute';
  var img = document.createElement('img');
  img.src = this.image_;
  img.style.width = '100%';
  img.style.height = '100%';
  div.appendChild(img);
  this.div_ = div;
  var panes = this.getPanes();
  panes.overlayLayer.appendChild(div);
}

ここはなんとなく分かるかも。上記で作成したオーバーレイに、

<div><img src="pegman.png" width="100%" height="100%" /></div>

を作成してる感じですね。
そして次に、ついにオーバーレイの描画になります。

USGSOverlay.prototype.draw = function() {
  var overlayProjection = this.getProjection();
  var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
  var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());
  var div = this.div_;
  div.style.left = sw.x + 'px';
  div.style.top = ne.y + 'px';
  div.style.width = (ne.x - sw.x) + 'px';
  div.style.height = (sw.y - ne.y) + 'px';
}

オブジェクトの右上隅と左下隅を固定する座標を計算し、これに基づき <div> のサイズを変更します。

overlayProjection.fromLatLngToDivPixelで、座標の値を、<div id="map_canvas">内の左上を原点としたピクセル値に変換しています。
例えば画像が下図の位置にある場合は、こんな感じで取得するのかな？

ne.x（右上のX値）-sw.x（左下のX値）=<div>のwidth（幅）に指定、
sw.y（左下のY値）-ne.y（右上のY値）=<div>のheight（高さ）に指定。

サンプルのペグマンの行列画像は以下のようになってました。初期の状態では画像の上部が見切れちゃってるため、ne.y（右上のY値）がマイナス値ですね。

• sw.x（左下のX値） = 340.9762666635215
• sw.y（左下のY値） = 64.38758346624672
• ne.x（右上のX値） = 373.8316479995847
• ne.y（右上のY値） = -36.777141883037984
• div.style.width（幅） = 32.8554px
• div.style.height（高さ） = 101.165px

そして最後に、以下を行います。なぜこれを行うのか、僕からは説明できません。

地図からオーバーレイをきれいに削除するための onRemove() メソッドを追加します。

USGSOverlay.prototype.onRemove = function() {
  this.div_.parentNode.removeChild(this.div_);
  this.div_ = null;
}

今回参考にさせて頂いたサイトです。

サンプル付でいろいろ紹介されてますので、もっと詳しく勉強したい方は必読！

• Google Code
• Geekなぺーじ
• Google Maps 活用講座