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

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

のびすけ

のびすけ

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

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

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/
 


LIGでは、エンジニアを絶賛募集中!
https://liginc.co.jp/recruit/mid_career

この記事のシェア数

271

のびすけ
のびすけ バックエンドエンジニア / 菅原 のびすけ

dotstudio株式会社 ( https://dotstud.io ) 岩手から上京してきました。 ギークハウスを経て、現在は0円シェアハウスに住んでいます。 好きなスポーツはフットサル/雪合戦/わんこそばです。 2015年は東京Node学園で登壇してみたいです。 ・milkcocoa公認エバンジェリストになりました。(https://mlkcca.com/) ・gihyo.jpで記事書いてます (http://gihyo.jp/dev/feature/01/milkcocoa-baas) ・html5experts.jpで記事書いてます。(https://html5experts.jp/n0bisuke/)