以前当サイトのニュース「Google Mapsを意識した低価格・高機能の地図API「Mapfit」 非商用であれば無料で利用可能」でも紹介した「Mapfit」について、詳細な設定手順が解説されています。
まずは、事前準備の手順から。最初にAPIキーを取得します。
Mapfitの料金ページにアクセスし、無料プランの記述の下にある「Get a free key」を押下します。
遷移したページで、メールアドレスと地図を表示させたいサイトのドメインを入力し、「Send me my API key」を押下すると、APIキーが登録メールアドレス宛に送られてきます。
次に、Mapfit用のCSSとJavaScriptを、地図を表示させたいサイトに設定します。
専用のCSSファイルとJavaScriptファイルは、CDN経由で容易に導入することができますので、地図を表示させたいサイトのHTMLファイルに次のように記述するだけでよいそうです。
//CSSファイル <link href="https://cdn.mapfit.com/v2-4/assets/css/mapfit.css" rel="stylesheet" /> //JavaScriptファイル <script src="https://cdn.mapfit.com/v2-4/assets/js/tetragon.js"></script> <script src="https://cdn.mapfit.com/v2-4/assets/js/mapfit.js"></script>
この2ステップで事前準備は完了です。
また、サイトにMapfitを表示させる手順も非常にカンタンです。まずは、HTMLファイルに次のような記述を追加します。
<div id="mapfit" style="width: 100%; height: 400px;"></div>
id属性に関しては、どんな値でも良いのですが、JavaScriptの設定でも利用するため、メモしておくと良いとのこと。
また、設定例では直接styleが書き込まれていますが、こちらはCSSファイルに記述しても良いそうです。
次に、JavaScriptファイルで以下のような記述を追加します。
mapfit.apikey = "【APIキー】";
mapfit.MapView('【id属性】', {theme: 'day'});
【APIキー】には、事前準備で取得したAPIキーを設定します。
【id属性】には、先程HTMLファイルで記述したid属性の値を設定します。
また「theme」については、「day」だと明るい日中の地図を表示させることができます。他にも暗い夜の地図を表示させたい場合は「night」、モノトーンの地図を表示させたい場合は「grayscale」といった設定ができるそうです。
これで、地図の表示設定も完了です。
参考記事ではこの他にも、地図の配色の変更方法やマーカーの設置方法、イベント処理の方法、目的地までのルート案内機能の導入方法などが紹介されています。
参考記事の著者も「Googleマップよりも手軽に扱える。」と語っており、地図機能の導入を検討されている方は、ぜひ一度試していただくと良いでしょう。
Googleマップより簡単！JavaScriptで独自マップやナビ機能を作成できる「mapfit」を使ってみた！ – paiza開発日誌
