株式会社LIG (リグ) - 台東区上野にあるWeb制作会社

超サイヤ人が会社員になったら叫びそうなこと 「売り上げ不信の原因……クリリンのことかーッ！！」

  2. LIGブログ
  3. Web制作
  4. HTML・CSS
  5. CSS
  6. Web初心者でもGoogle Mapsを...
Web制作

Web初心者でもGoogle Mapsをカスタマイズできるgmaps.jsでAPIを使い倒そう！

Web初心者でもGoogle Mapsをカスタマイズできるgmaps.jsでAPIを使い倒そう！

こんにちは。エンジニアののびすけです。
最近はひさしぶりに浅草をランニングして健康オタクを気取っています。

さて、ランニングといえば、アプリを使ってタイム測定をしている人も多いのではないでしょうか。大半のアプリには地図が内蔵してあり、特にGoogle Mapsを呼び出しているものが多いですね。

そこで今回は、そのGoogle Mapsをカンタンに導入できるgmaps.jsを使ってみたいと思います。コピペで試せるので、JavaScriptが得意ではないデザイナーやコーダーの方にもおすすめです。

gmaps.js

655px

http://hpneo.github.io/gmaps/

gmaps.jsはGoogle Maps APIを使いやすくしてくれるライブラリです。
そのメリットは大きく3つあります。

1. シンプルなコード

記述方法がとてもカンタンで、通常のGoogle Maps APIよりも分かりやすいソースコードになります。

例えば、Google Maps API (v3)でカンタンな地図を表示する場合のソースコードがこちらです。

var map;
function initialize() {
    var mapOptions = {
        zoom: 15,
        center: new google.maps.LatLng(35.710285, 139.77714)
    };
    map = new google.maps.Map(document.getElementById('map'),
    mapOptions);
}

google.maps.event.addDomListener(window, 'load', initialize);

これでも結構シンプルだとは思うのですが、gmaps.jsを使うともっとシンプルになります。

var map = new GMaps({
    div: "#map",
    lat: 35.710285,
    lng: 139.77714,
    zoom: 15,
});

どちらもidがmapの要素に地図（緯度：35．710285，経度：139．77714，縮尺15）を表示させるコードになりますが、gmaps.jsを使うとコードが分かりやすくなりますね。

2. 豊富な機能

655px

gmaps.jsには機能がたくさんあるので、下記ページにまとめられているものの中からいくつかご紹介いたします。

直接API使えばいいんじゃないの？などの意見もあると思うのですが、“複雑な機能をシンプルに使うことができる”という便利さはgmaps.jsを使わないと味わうことができない醍醐味です。

Polylines： 地図上に線を描く

Polylines

地図に線を引いて、ルートを見せることができます。

Static Maps： 指定座標の地図を画像として取得する

Static Maps

地図画像の描画はあると便利ですね。マーカー（With Markers）や線（With polylines）と一緒に描画することもできます。

Context menu： 右クリックをカスタマイズする

Context menu

地図上での右クリック（コンテキスト）メニューをカスタマイズすることができます。表現の幅が広がりますね。

Map Types： 表示形式を変更する

Map Types

航空写真やOpen Street Mapのように表示させることもできます。Google Mapsらしさを出したくないときに便利かもしれません。

Geocoding： ジオコーディング（住所から緯度経度への変換）

Geocoding

座標を覚えていなくても住所でジオコーディングができるのは便利ですね。ジオコーディング単体では色々なAPIがありますが、その中でもこれは使いやすくて感動しました。

Routes： 移動ルートの表示

Routes

Google Mapsの行き先検索が使えます。曲がり角や信号などステップごとに描画することもできます。

KML layers： KMLファイルを読み込める

KML layers

KMLという地図情報をまとめたxmlベースのファイルを読み込むこともできます。

Street View Panoramas： ストリートビューを表示する

Street View Panoramas

なんとストリートビューにも対応していて、立体的な地図表示もできます。

Geolocation： 位置情報取得

Geolocation

HTML5のGeolocation APIもラップしてくれています。

機能の紹介はこれで以上です。
もちろんGoogle Maps APIを直接使わないと利用できない機能もありますが、かなり特殊な場合でなければgmaps.jsでおおよその機能面はカバーできると思います。

3. メンテナンスがされていて最新APIに対応している

ライブラリを選定するときにはメンテナンスが適切にされているか、API側のバージョンアップに対応しているかなどはチェックすべき点ですね。

655px

gmaps.jsはこの記事を書いた時点（2014年11月21日）から一週間前（11月14日）が最終コミットになっており、頻繁に開発が進められていることが分かります。
PullRequestやcontributorsの数も多いので常にメンバーの誰かが開発しているのかもしれません。

何はともあれ動かしてみる

先に実行結果をご覧ください。

655px

上の画像のように、LIGがある上野駅周辺の地図が表示されるものを作ってみます。

まずはコピペしてみましょう！

何かのライブラリを使ってみるときは、ちゃんと導入する前に「まずは少し試してみよう」と思いますよね。そんなときにはコピペでカンタンに動かせるコードが入門におすすめです。

以下のコードをまるっとコピペして任意のhtmlファイルを作ってみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>gmapsサンプル</title>
    <style>
        @charset "utf-8";
        #map {
            height: 400px;
        }
    </style>
    <script src="//maps.google.com/maps/api/js?sensor=true"></script>
    <script src="//raw.githubusercontent.com/HPNeo/gmaps/master/gmaps.js"></script>
    <script>
        window.onload = function(){
            var map = new GMaps({
                div: "#map",
                lat: 35.710285,
                lng: 139.77714,
                zoom: 15,
            });
        };
    </script>
</head>
<body>
    <div id="map"></div>
</body>
</html>

どうでしょう、動きましたでしょうか？
すごくカンタンにGoogle Mapsを自分のサイトに表示させることができましたね。

覚えやすいプロパティ

  • div: 地図を描画する要素
  • lat: 地図の中心点となる緯度
  • lng: 地図の中心点となる経度
  • zoom: 地図を表示する際の縮尺。値が大きい程、拡大して表示されます。

次はもう少し発展的な内容を試してみます。

任意の地点に画像マーカーを設置してみる

Google Mapsでは指定したポイントにピンのマーカーがつきますが、gmaps.jsならマーカーを任意の画像に変更することができます。
練習として、LIGの新しくなったロゴを地図上のLIG住所にマッピングしてみましょう。

※13行目のgmaps.jsは外部から取得ではなくてダウンロードして設置する形にしました。直接アクセスは負荷がかかるのでこの方法がおすすめです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>gmapsサンプル</title>
    <style>
        @charset "utf-8";
        #map {
            height: 400px;
        }
    </style>
    <script src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script src="./gmaps.js"></script>
    <script>
        window.onload = function(){
            var lat = 35.710285;
            var lng = 139.77714;
            var map = new GMaps({
                div: "#map",
                lat: lat,
                lng: lng,
                zoom: 17
            });

            map.addMarker({
                lat: lat,
                lng: lng,
                title: "LIG",
                icon: "http://i.gyazo.com/0f00ed1cff497b7390020f9e64e31674.png",
                infoWindow: {
                    content: "<p>LIGは<br/>ココだよ!</p>"
                }
            });
        };
    </script>
</head>
<body>
<div id="map"></div>
</body>
</html>

結果はこうなりました。

655px

これもとてもカンタンに表示できましたね。あまり手間がかからないので、いろいろなサイトに組み込みやすいと思います。

おまけ：geocodingというサイトが便利！

座標を指定したいのに住所しか分からない……というケースは多いのではないでしょうか。そんなときはgeocodingを使って、住所を座標に変換しましょう。
gmaps.jsにもgeocoading機能はありますが、その機能を実装していないときにも便利です。

http://www.geocoding.jp/?q=東京都台東区東上野2−18−7にアクセスすると“東京都台東区東上野2−18−7”の座標を表示してくれます。

655px

まとめ

いかがでしたでしょうか？
個人的にGoogle MapsのAPIは使いにくかった印象があり、今まで地図の実装に苦手意識があったのですが、gmaps.jsを使ってみてこんなに使いやすいのかと感動しています。

これからは地図に強い男というブランディングで頑張っていこうと思います。これでドライブ好きな女子にモテモテですね。

……冗談抜きにしても、gmaps.jsはGoogle Mapsを使うときだけにとどまらず、位置情報を利用する際にはチェックしておきたいライブラリだと思いました。こういうライブラリの発見はテンションが上がりますね。Web制作者の味方です。

これを超えるライブラリがあれば誰か紹介してください。それでは！

参考：gmaps.js
http://hpneo.github.io/gmaps/

参考：gmaps.jsで簡単グーグルマップ
http://php-fan.org/gmapsjs.html

参考：gmaps.jsで簡単グーグルマップ
http://k1blog.com/web/web-create/post-4408/
 

【カスタマイズで差がつくGoogle Maps！】

※ Googleマップのお手軽カスタマイズできる「Styled Maps Wizard」の使い方

※ Illustratorの効率化テクニックでGoogle Mapsをカスタマイズしてみよう

※ Googleマップを簡単にカッコよくカスタマイズする方法

※ デザイナーの参考になる世界のGoogleマップデザイン20選

※ カッコよくカスタマイズされたグーグルマップをモーダル表示させてみよう