Google MapのデザインをjQueryで変更する為のメモ書き。Google Map APIとjQueryでGoogle Mapの色合いを変更し、オリジナルのマーカーを付けてみます。こうする事で、既存デザインに合わせたGoogle Mapが出来ます。

今後必要になりそうだったので調べ物をしたついでにメモ書きです。デザインを変更、というと語弊がありますけど、好みの色に変えてみます。

ゴール

↓ こんな感じのをjQueryでやろう、みたいな内容です。特に目新しい情報では無いですが。

なんかシャドウ変になっちゃった・・色やマーカーだけでもWebサイトで使用している色にあわせれば地図だけ浮いてしまうような事も無くなるんじゃないかなと思います。

ジオコーディングリクエスト

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<script type='text/javascript' charset='utf-8' src='http://maps.googleapis.com/maps/api/js?&sensor=false'></script>

まずはjQuery本体とAPIを読み込みます。※V3からAPIキーは不要になりました。

以下よりコードです。まずは住所から。

var gmg = new google.maps.Geocoder()

↑ google.maps.GeocoderオブジェクトでGoogle Maps APIジオコーディングにアクセス。

  gmg.geocode({
      'address': '下北沢'
  }

↑ で、geocode()メソッドでリクエスト。GeocodeRequestオブジェクトのaddress項目は必須ですので必ず指定します。

 if (status == google.maps.GeocoderStatus.OK) {
       center = results[0].geometry.location;
       initialize();
       //ここから処理

↑ これでコールバック関数に結果とステータスが渡されます。 有効なジオコードが取得したかは、google.maps.GeocoderStatusがOKになっているかどうかでチェック。その後でもろもろ処理していきます。まずはマーカーを立ててみます。

マーカーを立てる

     mk = new google.maps.Marker({
         map: map, position: results[0].geometry.location,
         icon: {
              url: '/wp-content/uploads/2012/05/shimo02.png',
              anchor: {
                    x: 50,
                    y: 130
                 }},
                    title: 'ここが下北沢駅ですぞ'
     });

google.maps.Markerでマーカーを作成します。icon{url: ‘画像のパス’,}がマーカーになります。anchorで位置決め。x軸とy軸を設定して下さい。titleはマーカー画像のtitleとなります。

色を変える

では、色を変えていきます。まずは初期化。

  function initialize() {
     var options = {
           center: center,
           zoom: 16,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                scrollwheel: false,
                panControlOptions: {
                    position: google.maps.ControlPosition.TOP_RIGHT
                },
                zoomControlOptions: {
                    position: google.maps.ControlPosition.TOP_RIGHT
                },
                mapTypeControlOptions: {
                    position: google.maps.ControlPosition.TOP_CENTER
                },
 

↑ initialize()メソッドで地図の初期化を行い、Mapオプションを設定。ここで中心位置指定やマウスホイールによる拡大機能の有無などを決めます。この辺はGoogle APIのドキュメントを見てください。

          styles: [{
                 stylers: [
                    {   hue: "#2985f5"},
                    {   gamma: 1.50},
                    {   saturation: -40}]}]
            };

↑ 続いて、地図に色付けをします。hueは色相、gammaはガンマ値、saturationは彩度。って、これはデザイナーさんなら分かりますよね。これで自由に色を変える事が出来ます。

 map = new google.maps.Map($("#gm").get(0), options);

↑ 最後に地図を表示させる場所をセレクタで指定。

マークアップ

<div id="gm"></div>

#gm{
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
}​

HTMLとCSSを書けば完成です。

全体のコード

var gmg = new google.maps.Geocoder(),
            map, center, mk ;
        gmg.geocode({
            'address': '下北沢'//表示したい場所
        }, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {//ジオコードが成功したかどうかチェック
                center = results[0].geometry.location;
                initialize();
                mk = new google.maps.Marker({//ここからマーカーの設定
                    map: map, position: results[0].geometry.location,
                    icon: {//マーカー画像のパスを設定
                        url: '/wp-content/uploads/2012/05/shimo02.png',
                        anchor: {//マーカーを表示させる場所を設定
                            x: 50,
                            y: 130
                        }},
                        title: 'ここが下北沢駅ですぞ'//マーカー画像のtitle
                });
            }
        });

        function initialize() {//初期化
            var options = {
                center: center,
                zoom: 16,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                scrollwheel: false,
                panControlOptions: {
                    position: google.maps.ControlPosition.TOP_RIGHT
                },
                zoomControlOptions: {
                    position: google.maps.ControlPosition.TOP_RIGHT
                },
                mapTypeControlOptions: {
                    position: google.maps.ControlPosition.TOP_CENTER
                },
                styles: [{
                    stylers: [{//色合いを設定
                        hue: "#2985f5"},//カラーコード
                    {   gamma: 1.50},//ガンマ値
                    {   saturation: -40}]}]//彩度
            };
            map = new google.maps.Map($("#gm").get(0), options);//セレクタ内に地図取得
        }

他の色にしてみる

ピンクが好きな人が身近にいたのでピンクに変えてみました。

簡単でいいですね。と言うわけでGoogle MapのTipsでした。今日はドキュメントを参考にしました。

Google Maps JavaScript API V3 サービス