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

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

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

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

gmaps.js

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. 豊富な機能

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

• gmaps.jsドキュメントページ
  http://hpneo.github.io/gmaps/documentation.html
• gmaps.jsサンプルページ
  http://hpneo.github.io/gmaps/examples.html

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

Polylines： 地図上に線を描く

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

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

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

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。