[Google API] 手軽にGoogle Maps APIをカスタマイズできる「gmaps.js」の使い方

  javascript, jQuery , , , , , ,

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る
Google Maps API タイトル

Google Maps APIを使えばオリジナルの画像を使ったマーカーを地図上への設置やルートを地図上に描くことが可能です。しかし、Google Maps API V3はAPI Keyが必要だったりなかったり、導入が面倒だったので何かいいのないかなと探していると良さそうな「gmaps.js」を見つけたので、gmaps.jsの使い方をご紹介したいと思います。

Google Maps APIを手軽に使用できるgmaps.jsの使い方

gmaps.js サイト
http://hpneo.github.io/gmaps/

gmaps.jsは、シンプルなコードでこれ以上ない豊富なドキュメント・機能を使用でき、簡単にGoogle Mapsを使用することができます。

gmaps.jsでシンプルなGoogle Maps

まずは基本的な設定でgmaps.jsを使用してGoogle Mapsを実行してみようと思います。

基本的なgmaps.js使用の記述例

gmaps.jsで名古屋駅を表示させるために「id:map、緯度:35.170694、経度:136.88163699999995、縮尺14」の情報をコードとして記述すると下記のようになります。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>gmaps.jsサンプル</title>
    <style type="text/css">
        #map {
            width: 400px;
            height: 400px;
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <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",//id名
              lat: 35.170694,//緯度
              lng: 136.88163699999995,//経度
              zoom: 14//縮尺
          });
        };
   </script>
</body>
</html>

オプション設定

記述例ででてきたオプションの説明を下記に示していきたいと思います。

オプション設定 オプション詳細 オプション設定例
div: “任意のid名” 地図を描画する要素 div: “#map”
lat: 緯度 緯度 lat: 35.170694
lng: 経度 経度 lng: 136.88163699999995
zoom: 縮尺 縮尺0-23 zoom: 14

記述例の実行結果

gmaps.jsを使用して名古屋駅を表示させる記述例を実行すると下の画像のようになります。(重たいので画像で表示)

gmaps.jp 実行結果

地図上に任意の画像マーカーを設置

gmaps.jsではGoogle Mapsのピンのマーカーとは違い任意の画像を設置することができるので、下記に示したいと思います。

gmaps.jsファイルのダウンロード

gmaps.jsをネット上で参照するとサイトが重くなってしまうので、GitHUbからgmaps.jsをダウンロードします。

GitHub サイト gmaps.jp ダウンロード

画像マーカーの記述例

gmaps.jsで名古屋駅に指の画像「finger.png」のマーカーを表示させるコードを記述すると下記のようになります。
緯度・経度は同じものを地図・マーカーで使用するため変数lat・lngを宣言して使用する。map.addMarkerでマーカーの設定、infoWindowで吹き出しを設定をしています。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>gmaps.jsサンプル</title>
    <style type="text/css">
        #map {
            width: 400px;
            height: 400px;
        }
    </style>
</head>
<body>
<div id="map"></div>
    <script src="//maps.google.com/maps/api/js?sensor=true"></script>
    <script src="gmaps.js"></script>
    <script>
        window.onload = function(){
            var lat = 35.170694;//緯度
            var lng = 136.88163699999995;//経度
            var map = new GMaps({
                div: "#map",//id名
                lat: lat,
                lng: lng,
                zoom: 14//縮尺
            });
            map.addMarker({
                lat: lat,
                lng: lng,
                title: "名古屋駅",
                icon: "finger.png",//任意の画像名
                infoWindow: {
                    content: "<p>名古屋駅へようこそ</p>"
                }
            });
        };
    </script>
</body>
</html>

画像マーカーのオプション設定

記述例ででてきたオプションの説明を下記に示していきたいと思います。

オプション設定 オプション詳細 オプション設定例
title: “テキスト” ポップアップメッセージのテキスト title: “名古屋駅”
icon: “../images/画像名.png” マーカーの画像の参照 icon: “finger.png”
content: “<p>テキスト<⁄p> クリック時のテキスト content: “<p>名古屋駅<⁄p>”

画像マーカーの記述例の実行結果

gmaps.jsを使用して名古屋駅にオリジナルのマーカーを表示させる記述例を実行すると下の画像のようになります。(重たいので画像で表示)
画像の参照は任意で行ってください。画像は50×50pxのサイズ、png形式で作成しました。

gmaps.jp 実行結果 マーカー

地図上にルートを表示

gmaps.jsではGoogle Mapsとは違い任意のルートを表示することができるので、下記に示したいと思います。

ルート表示の記述例

gmaps.jsで名古屋駅から名古屋城までのルートを表示させるコードを記述すると下記のようになります。
map.drawRouteでルートの設定をしています。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>gmaps.jsサンプル</title>
    <style type="text/css">
        #map {
            width: 400px;
            height: 400px;
        }
    </style>
</head>
<body>
<div id="map"></div>
    <script src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script src="http://raw.githubusercontent.com/HPNeo/gmaps/master/gmaps.js"></script>
    <script>
        window.onload = function(){
            var lat = 35.170694;//緯度
            var lng = 136.88163699999995;//経度
            var map = new GMaps({
                div: "#map",//id名
                lat: lat,
                lng: lng,
                zoom: 13//縮尺
            });
            map.drawRoute({
              origin: [35.170694, 136.88163699999995],//出発点の緯度経度
              destination: [35.183766, 136.900294],//目標地点の緯度経度
              travelMode: 'walking',//モード(walking,driving)
              strokeColor: '#2ecc40',//ルートの色
              strokeOpacity: 0.8,//ルートの透明度
              strokeWeight: 4//ルート線の太さ
            });
            map.addMarker({
                lat: lat,
                lng: lng,
                title: "名古屋駅",
                icon: "finger.png",
                infoWindow: {
                    content: "<p>名古屋駅スタート</p>"
                }
            });
            map.addMarker({
                lat: 35.183766,
                lng: 136.900294,
                title: "名古屋城",
                infoWindow: {
                    content: "<p>名古屋城ゴール</p>"
                }
            });
        };
    </script>
</body>
</html>

ルート表示のオプション設定

記述例ででてきたオプションの説明を下記に示していきたいと思います。

オプション設定 オプション詳細 オプション設定例
origin: [緯度, 経度] 出発点の緯度経度 origin: [35.170694, 136.88163699999995]
destination: [緯度, 経度] 目標地点の緯度経度 destination: [35.183766, 136.900294]
travelMode: ‘モード’ モード(walking,driving) travelMode: ‘walking’
strokeColor: ‘色’ ルートの色 strokeColor: ‘#2ecc40’
strokeOpacity: 透明度 ルートの透明度1-0 strokeOpacity: 0.8
strokeWeight: 太さ ルート線の太さ strokeWeight: 4

ルート表示の記述例の実行結果

gmaps.jsを使用して名古屋駅から名古屋城までのルートを表示させる記述例を実行すると下の画像のようになります。(重たいので画像で表示)
画像の参照は任意で行ってください。画像は50×50pxのサイズ、png形式で作成しました。

gmaps.jp 実行結果 ルート

gmaps.jsをさらに使いこなすサイト

他にもgmaps.jsを使用した様々なオプションが用意されていますので、調べてみてください。
下記に実用的なものが紹介されています。

gmaps.jsでは使用できない機能があるため、やりたいことができないや機能として物足りなさを感じる方はGoogle Maps javaScript API v3を使用してみてください。

参考サイト

SNSでもご購読できます。

コメント

  1. ニシモト より:

    お世話になります。
    いつも参考にさせて頂いております。

    まだ趣味でWEB制作を始めた素人なのですが、Googleマップのカスタマイズ方法についてご質問があります。

    宜しければご教授頂けると幸いです。

    現在、こちらのサイトのテンプレートを使用しております。
    http://bootstrapmaster.com/themes/free-bootstrap-themes/essentia-fr

    このサイトにあるGoogleMapの色やマーカーのカスタマイズをしたいのですが、上手く行きません。

    こちらの記事を参考に色々と試しているのですが上手く行っておりません。
    http://kotori-blog.com/js/googlemaps_customcolor/

    この記事の方法単独では記事通りに出来るのですが、使用しているテンプレートサイトには適用できず困っております。

    こちらの方法でなくても結構ですので、使用しているテンプレートサイトのGoogleMapのカスタマイズ方法をご教授頂けると有難いです。

    お手数をお掛け致しますが宜しくお願い致します。

    1. ぶぶりん より:

      返信が遅くなってしまい、大変申し訳ありません。
      「この記事の方法単独では記事通りに出来るのですが」とありますが具体的にどのような状況までできているのかお教え願えないでしょうか?

      記述してくださったテンプレートサイトについて、使用したことがございませんので、詳しいことは言えませんが、WordPressであるのならばプラグイン・javascriptとの兼ね合いにより、うまくいかないことも考えられるかと思います。
      GoogleMapの色以外であれば、マーカーなどは上記でご紹介させていただいている記事にて実現できるのではないかと思われます。

コメントを残す

*