NTTドコモ様_dカーシェア
NTTドコモ様_dカーシェア
2014.12.10

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

のびすけ

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

さて、ランニングといえば、アプリを使ってタイム測定をしている人も多いのではないでしょうか。大半のアプリには地図が内蔵してあり、特に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)と一緒に描画することもできます。