こんにちわ。
本などを全く読まないですし、極端に勉強嫌いなもので人並み外れて、読解力が欠落しているナンバです。

そんな、私が久しぶりに勉強しました。
GoogleMapのカスタマイズです。

年齢的にもメッキリと記憶力が低下してきているので、忘れないように、記事にしておきます。
仕様は今さらながら、GoogleMapAPI2.0+javascript。
これにMT記事を連動させるという感じ。
マークアイコンとかのカスタムや、情報ボックス内のカスタムならFlashAS2.0+kmlで以前に実装経験があるので問題ないのですが、今回の案件では情報ウインドウ自体のデザインのカスタマイズが必要だったので、やたらめったら調べまくって、GoogleMapsAPIデモギャラリーにて見つけたoverlayカスタムなjsライブラリを使ってみました。
とりあえず、それをベースに基本部分の制御や、各カスタム方法など、ズラズラ～っとヤンワリと検証してみました。

まずは基本的な各エレメントの表示とか
◆デフォルトの画像切替ボタン表示
map.addControl(new GMapTypeControl());
◆地図タイプの増減
var maptypelist = [G_NORMAL_MAP, G_SATELLITE_MAP, G_PHYSICAL_MAP, G_SATELLITE_3D_MAP];
var opts = {mapTypes:maptypelist};
G_NORMAL_MAP//地図
G_SATELLITE_MAP//航空写真
G_HYBRID_MAP//航空写真+道とか
G_PHYSICAL_MAP//地形樹木とか
G_DEFAULT_MAP_TYPES//普通の地図+航空写真+道とか
G_SATELLITE_3D_MAP//GoogleEarth
◆地図タイプ選択
map.setMapType(G_SATELLITE_3D_MAP);
◆センター位置と倍率指定
map.setCenter(new GLatLng(緯度,経度), 倍率);
◆デフォルトの拡大縮小ボタン表示
map.addControl(new GSmallZoomControl());
◆デフォルトの拡大縮小上下左右ボタン表示
map.addControl(new GSmallMapControl());
◆デフォルトの拡大縮小上下左右センタリングズームバーボタン表示
map.addControl(new GLargeMapControl());
◆縮尺表示
map.addControl(new GScaleControl());
◆ちっさい地図で移動できちゃうヤツの表示
map.addControl(new GOverviewMapControl());
◆各エレメントの位置指定
var pos1 = new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(0, 0));
map.addControl(new エレメント名(), pos1);
G_ANCHOR_TOP_RIGHT//右上
G_ANCHOR_TOP_LEFT//左上
G_ANCHOR_BOTTOM_RIGHT//右下
G_ANCHOR_BOTTOM_LEFT//左下
◆マーカーアイコンの設定
markerIcon1 = new GIcon();
markerIcon1.image = "アイコン画像へのパス";
markerIcon1.shadow = "シャドウ画像へのパス";
markerIcon1.iconSize = new GSize(横幅, 縦幅);//マーカーアイコンサイズ
markerIcon1.shadowSize = new GSize(横幅, 縦幅);//マーカーシャドウサイズ
markerIcon1.iconAnchor = new GPoint(横幅, 縦幅);//マーカー表示位置調整
markerIcon1.infoWindowAnchor = new GPoint(横幅, 縦幅);//情報ウインドウ表示位置調整
ざっと、こんな感じでしょうか。

若干多用しそうな使い勝手の良いカスタム例としては
◆デフォルトで情報ウインドウ表示させたい時は
GEvent.trigger(開きたい変数,"click");
◆画像ボタン使用の場合
/*--html--*/
<a href="javascript:void();" onclick="mapZoomIn()"
title="1段階大きくします"><img src="./images/zoomin.png" alt="1段階大きくします" /></a>
/*--js--*/
function mapZoomIn() {map.zoomIn();}//拡大
function mapZoomOut() {map.zoomOut();}//縮小
function mapNormal() {map.setMapType(G_NORMAL_MAP);}//普通の地図表示
function 変数名() {
var point = new GLatLng(緯度,経度);
map.panTo(point);
}//任意の座標に移動する
こんな感じでしょうか。
googlemap内に画像ボタンを表示させる場合はcssにて調整。
急なデザイン変更などでもcssの修正で済むので簡単でイイですね。
ただGoogleEarth上には被らせる事ができないですけどね。
ieとかでGoogleMapを見ると、cssのリセット方法によっては地図タイプの切り替えテキストが微妙に崩れていたりするので、画像対応するのも良いかもですね。

と、またまたズラ～っと、なんとも不親切な感じで書き綴りましたが、どこかの誰かのお役にたっていれば、是幸いでございます。
肝心の情報ボックス部分のカスタマイズですが、ライブラリ頼りのヘッポコカスタムではありますが、また次回気が向いたら、更にディープに検証・解説してみたいと思います。
その頃には、実装したサイトもオープンしていると思いますので、合わせて紹介させていただきます。

「あっそうだ、MTとGooleMap連動でイロイロな情報発信できるサイトを構築してみたいな」って、
お考えのそこの社長さんや、
「ねぇねぇお父さん、ブログで記事更新したらGoogleMapに自動的に反映されるのって、なんかカッコイイよね～」と、
お子様にねだられているそこのアナタ！
是非、WEBOSSに問い合わせを！