やまさきやまさき
2017/08/01

Google Map APIを使用してGoogle Mapをカスタマイズしてみよう [#2]

この記事は約6分で読めます。

Google Map APIを使用してGoogle Mapをカスタマイズしてみよう [#2]

初級カスタマイズ

Google Map APIを活用してGoogle Mapをカスタマイズする方法、第二弾です。

今回は、実際にjavascriptをいじっていこうかなと思います!

 

*この記事は以下の記事の続きになります。合わせてご覧ください!

Google Map APIを使用してGoogle Mapをカスタマイズしてみよう [#1] – APIキー の取得

とりあえず、普通のマップを表示させてみる

何はともあれ、カスタマイズする前に通常のMapを表示できなければなりません。

手順1 : Mapを表示させるdivをHTML側で準備しておく

Mapを表示させたい場所に任意のIDを付けたdivタグを置いておきます。

今回の例では、”map_canvas”というIDを付けたdivを設置してみます。

<!-- 表示させたい場所 -->
<div id="map_canvas" style="width:600px;height:400px;"></div>

中身は空で構いません。上の例ではwidthとheightをstyle属性で指定していますが、CSSファイルで記述するのであれば必要ないです。

手順2 : 表示したい場所の座標を取得する

試しに、大阪城の座標を取得してみましょう。

まず、Google Mapを開きます。

http://maps.google.co.jp/

「大阪城」と検索します

すると、URLバーに、「@緯度,経度,ズームの度合い/」と情報が表示されています。

画像は少し見づらいですが、大阪城だと、緯度,経度は 「34.6859517,135.5239936」のようです。

この数値をメモしておきましょう。

手順3 : javascriptを記述する

記述方法は一つではないですが、今回はMapの設定と呼び出しなどを関数に記述しておき、ウインドウのロードが完了したときにその関数を呼び出す、という方法で記述していきます。

function initialize(){
  var latlng = new google.maps.LatLng(34.6859517,135.5239936); // 緯度・経度
  var myOptions = {
    zoom: 17, //ズーム率
    center: latlng, //表示枠内の中心点
    mapTypeId: google.maps.MapTypeId.ROADMAP//表示タイプの指定
  }
  var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions); //mapという名前で地図を作成
}

$(window).on('load', function(){
  if($('#map_canvas').length > 0){
    initialize();
  }
});

とりあえずこれだけで、大阪城のMapが表示されます。

*緯度経度・ズーム率、divのID名(‘map_canvas’)は好きに変えてみてください。

カスタマイズ!色を変えてみる

さて、いよいよMapのカスタマイズに移っていきます。

まずは簡単に、地図の彩度を下げてみます。

以下のスクリプトを、initialize()に追記します。

function initialize(){
  var latlng = new google.maps.LatLng(34.6859517,135.5239936); // 緯度・経度
  var myOptions = {
    //省略
  }
  var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions); //mapという名前で地図を作成
  
  //ここから追記分
   var styleOptions = [
    {
      "stylers": [
        { "saturation": -40 }
      ]
    }
  ];

  var styledMapOptions = { name: 'Example' };
  var sampleType = new google.maps.StyledMapType(styleOptions, styledMapOptions);
  map.mapTypes.set('sample', sampleType);
  map.setMapTypeId('sample');
}

ポイントはstyleOptionの中身です。「”saturation”: -40」の部分で、彩度を-40%に指定しています。

このように、カスタマイズしたい内容を、styleOptionという配列に入れていき、作成した「map」にその情報たちを少しごにゅごにょするだけです。

彩度だけでなく、全体的に緑っぽくしたい場合は、次のようにstyleOptionの情報を増やします。


   var styleOptions = [
    {
      "stylers": [
        { "saturation": -40 },
        { "hue": "#f0f8f3" }
      ]
    }
  ];

上のようにすることで、彩度を落としながら、指定した緑系の色(#f0f8f3)に合わせて、地図全体の色が変わります。

Styled Map Wizard が便利!

先ほど、彩度や色相の指定方法は例に挙げましたが、他にも指定できるものはたくさんあります。

Styled Map Wizard というサービスを利用すれば、実際に地図の見た目を変えていきながら、カスタマイズ内容を決めることができます。jsで指定すべき配列も自動で作成してくれるので、非常に便利です!

http://www.dwzone-it.com/StyledMapWizard/StyledMapWizard.asp

カスタマイズが決まれば、デフォルトで画面右側に表示されている「MAP STYLE」という小ウインドウの下部にある「Show JSON」というボタンをクリックすれば、 styleOptions に指定する配列の内容が表示されますので、コピペすればOK!

どういう配列の指定をすればどのように地図の見た目が変わるか、を調べるのにも役に立ちます!

 

おわりに

今回は、GoogleMapの実際の読み込みと、簡単なカスタマイズ方法、便利なWebサービスについてご紹介しました。

これだけもサイトのデザインにあったオリジナルなGoogle Mapが使用できるようになりますが、最後の仕上げ、「Mapアイコン」が残ってます。

次回は、「オリジナルのMapアイコンを作成して地図に埋め込む方法」ご紹介していこうと思います!

Google Map APIを使用してGoogle Mapをカスタマイズしてみよう [#2]
やまさき フロントエンジニア

新人縄跳び野郎です!

一覧へ戻る

私たちについて

私たち『Camarade(カマラード)』はクリエイター目線で
総合的な情報を発信するWebメディアとして
PhotoShopやillustratorの活用方法や、WordPressなどのCMSの
カスタマイズ方法など幅広い情報をお届けしていきます。
同時にSOHOやフリーランスのパートナーを募集しております。