GMaps.jsでGoogleMapに複数の吹き出しマーカーのある地図を作る

GoogleMapを使って複数の場所を1つの地図に掲載したいという要望があります。「オープンデータの住所からポインタ入り地図を作って自分のサイトに貼り付ける」で書いたようにマイマップを使って行う方法もあるのですが、今回は吹き出しだけで表示したいなどの要望だったため、GoogleMapのカスタマイズを簡単に使えるGMaps.jsを使って実現してみました。

GMap.jsのダウンロードとサンプルの確認

GMap.jsGitHubにソースが置いてありました

https://github.com/hpneo/gmaps

こちらのサイトの、

Download ZIP をクリックして、gmaps-master.zip を取得し、

解凍します。解凍すると、

このようなファイルとフォルダ構成になっています。examplesを開きます。

GMaps.jsの利用例がこのようにたくさんあります。これなら自分が求めるものが見つかりそうですね。

作ろうとしているmapに近いものがありましたので見てみます。overlays.html です。

ブラウザで表示するとこんな感じで、位置を示すポインターは表示されずに吹き出しだけでその場所を示しています。形としてはこのような感じのものが作りたいのでこれを元にして実現していきたいと思います。

元にするhtmlをコピーして、表示したい地図の大きさと位置にしてみる

overlays.html をコピーして 8_overlays.html というファイル名にします。ファイルを開いてみると、
 

こういうコードになっていました。必要な部分以外を削除します。
 

は説明部分のようなので削除。

地図の縦をもっと大きくしたかったので、examples/examples.css を開いて見ると、
 

largeクラスにすれば縦が500pxになるようなのでそのように変更します。

あとは中心部の座標を自分が作りたいmapの中心にしたいと思います。例として コワーキングスペース八王子8Beatにしてみます。

座標を調べるには

GoogleMap の検索窓で、八王子8Beatと入れてリターンし、

地図を表示します。

*注:以下の座標の取り方についてより正確にするため書き換えました(2016/07/13)

表示されたポインタの下の丸(赤いポインタではなくその下の丸)を右クリックして この場所について をクリック

赤枠で囲った部分が座標(lat,lng)となります。

* 注:上記で座標の取り方を変えたため、座標が以下のコード内の数値と異なっている部分があります。ご了承ください。

もとのコードではこのように表示されているところのlatlngを、

このように変更します。また、吹き出しに表示される文字も変えたいので
 

content

 

にします。今時点でコードは、
 

こうなりました。漢字を入力したのでファイルはUTF-8形式で保存します。これを表示すると、

このように 8Beat中心の地図ができました。ちょっと吹き出しが大きいので
 

examples.cssにある吹き出しのclass overlay の font-sizeline-height
 

このぐらい小さくしてみました。これで、

イメージ通りの地図ができてきました(^^)/

複数の地点を表示する

今回作ろうとしている地図は複数地点を同時に表示しているものです。地点を追加したいと思います。

この map.drawOverlay のワンセットが1つの地点を表しています。ここでは ハニカムステージ さんを追加してみした。

このように2つの地点が表示されました!この方法で地点を必要なだけ追加していきます。

吹き出しの色が違う地点を追加してみる

吹き出しのCSSを追加して違う色の吹き出しを追加してみたいと思います。examples.css
 

を追加します。これは元々あった overlay クラスのワンセットをコピーして、名前を変更して色を指定しているところで色コードを 青系 から 緑系 に変更したものです。また、透明度が変えられるということをお見せしたかったので opacity というオプションの数値を 0.8 から 1 にしてみました。opacity とは透明度のことなので1にすることで透明度がなくなります。

このクラスを使った地点を2カ所 8_overlays.html に追加しました
 

これで作ったmapが

こちらになります。コワーキングスペースを青色の吹き出し、Cafe緑色の吹き出しで表示してみました♪

今回カスタマイズしたHTML、cssとサンプルページ

今回追加してカスタマイズしたHTML 8_overlays.html
 
 

今回カスタマイズしたCSS examples.css

動作がどのようになるのか分かるようにサーバーに載せました↓

サンプルページ

もしご自分で試してみたかったら、GMap.js をダウンロードしてきて、上記のファイルをコピーすると試すことができます。

まとめ:WordPressなどでも使えるように設定してみたいですね

GMap.js簡単に使えるので、今度はWordPressなどに地図を貼り付けるときにも使ってみたいと思います。

できるだけ簡単に地図を貼り付けられるようになにか考えてみたいですね(^^)/

[Amazon sponsored link] ベストセラーを見る

兎本美佳

ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサー広告
ブログをメールで購読

メールアドレスを記入して購読すれば、更新をメールで受信できます。

261人の購読者に加わりましょう

トップへ戻る