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

この記事は約23分で読めます。

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 というファイル名にします。ファイルを開いてみると、
 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>GMaps.js &mdash; Overlays</title>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
  <script type="text/javascript" src="../gmaps.js"></script>
  <link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css" />
  <link rel="stylesheet" type="text/css" href="examples.css" />
  <script type="text/javascript">
    var map;
    $(document).ready(function(){
      map = new GMaps({
        el: '#map',
        lat: -12.043333,
        lng: -77.028333
      });
      map.drawOverlay({
        lat: map.getCenter().lat(),
        lng: map.getCenter().lng(),
        layer: 'overlayLayer',
        content: '<div class="overlay">Lima<div class="overlay_arrow above"></div></div>',
        verticalAlign: 'top',
        horizontalAlign: 'center'
      });
    });
  </script>
</head>
<body>
  <h1>GMaps.js &mdash; Overlays</h1>
  <div class="row">
    <div class="span11">
      <div id="map"></div>
    </div>
    <div class="span6">
      <p>You can add overlays using:</p>
      <pre>map.drawOverlay({
  lat: -12.043333,
  lng: -77.028333,
  content: '&lt;div class="overlay"&gt;Lima&lt;/div&gt;'
});</pre>
      <p>You must define <strong>latitude</strong>, <strong>longitude</strong> and the <strong>content</strong> of the map overlay.</p>
      <p><span class="label notice">Note: </span>Also, you must define a <strong>height</strong> to the <strong>content</strong>.</p>
      <p><span class="label notice">Note: </span>Also, you can define a <code>verticalAlign</code>, which can be <code>top</code>, <code>middle</code> or <code>bottom</code>, and <code>horizontalAlign</code>, which can be <code>left</code>, <code>center</code> or <code>right</code>.</p>
      <p><span class="label notice">Note: </span>Also, you can define a <code>click</code> callback method, which will be triggered when the overlay's DOM element is clicked.</p>
    </div>
  </div>
</body>
</html>

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

    <div class="span6">
(中略)
    </div>

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

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

#map.large{
  height:500px;
}

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

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

座標を調べるには

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

地図を表示します。

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

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

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

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

      map = new GMaps({
        el: '#map',
        lat: -12.043333,
        lng: -77.028333
      });

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

        lat: 35.6575244,
        lng: 139.3349708

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

      map.drawOverlay({
        lat: map.getCenter().lat(),
        lng: map.getCenter().lng(),
        layer: 'overlayLayer',
        content: '<div class="overlay">Lima<div class="overlay_arrow above"></div></div>',
        verticalAlign: 'top',
        horizontalAlign: 'center'
      });

content

 

        content: '<div class="overlay">八王子8Beat<div class="overlay_arrow above"></div></div>',

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>GMaps.js &mdash; Overlays</title>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
  <script type="text/javascript" src="../gmaps.js"></script>
  <link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css" />
  <link rel="stylesheet" type="text/css" href="examples.css" />
  <script type="text/javascript">
    var map;
    $(document).ready(function(){
      map = new GMaps({
        el: '#map',
        lat: 35.6575244,
        lng: 139.3349708
      });
      map.drawOverlay({
        lat: map.getCenter().lat(),
        lng: map.getCenter().lng(),
        layer: 'overlayLayer',
        content: '<div class="overlay">八王子8Beat<div class="overlay_arrow above"></div></div>',
        verticalAlign: 'top',
        horizontalAlign: 'center'
      });
    });
  </script>
</head>
<body>
  <h1>GMaps.js &mdash; Overlays</h1>
  <div class="row">
    <div class="span11">
      <div id="map" class="large"></div>
    </div>
  </div>
</body>
</html>

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

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

.overlay{
  display:block;
  text-align:center;
  color:#fff;
  font-size:60px;
  line-height:80px;
  opacity:0.8;
  background:#4477aa;
  border:solid 3px #336699;
  border-radius:4px;
  box-shadow:2px 2px 10px #333;
  text-shadow:1px 1px 1px #666;
  padding:0 4px;
}

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

  font-size:16px;
  line-height:20px;

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

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

複数の地点を表示する

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

      map.drawOverlay({
        lat: 35.6578954,
        lng: 139.3386372,
        layer: 'overlayLayer',
        content: '<div class="overlay">ハニカムステージ<div class="overlay_arrow above"></div></div>',
        verticalAlign: 'top',
        horizontalAlign: 'center'
      });

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

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

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

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

/* overlay_cafe add */
.overlay_cafe{
  display:block;
  text-align:center;
  color:#fff;
  font-size:16px;
  line-height:20px;
  opacity:1;
  background:#44aa77;
  border:solid 3px #339966;
  border-radius:4px;
  box-shadow:2px 2px 10px #333;
  text-shadow:1px 1px 1px #666;
  padding:0 4px;
}
.overlay_cafe_arrow{
  left:50%;
  margin-left:-16px;
  width:0;
  height:0;
  position:absolute;
}
.overlay_cafe_arrow.above{
  bottom:-15px;
  border-left:16px solid transparent;
  border-right:16px solid transparent;
  border-top:16px solid #339966;
}
.overlay_cafe_arrow.below{
  top:-15px;
  border-left:16px solid transparent;
  border-right:16px solid transparent;
  border-bottom:16px solid #339966;
}

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

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

      // カフェ
      map.drawOverlay({
        lat: 35.6614742,
        lng:139.3306111,
        layer: 'overlayLayer',
        content: '<div class="overlay_cafe">Cafe de la poste<div class="overlay_cafe_arrow above"></div></div>',
        verticalAlign: 'top',
        horizontalAlign: 'center'
      });

      map.drawOverlay({
        lat: 35.653637,
        lng:139.3202639,
        layer: 'overlayLayer',
        content: '<div class="overlay_cafe">バーゼル富士森公園店<div class="overlay_cafe_arrow above"></div></div>',
        verticalAlign: 'top',
        horizontalAlign: 'center'
      });

これで作ったmapが

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

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

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>GMaps.js &mdash; Overlays - RYUS blog</title>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
  <script type="text/javascript" src="../gmaps.js"></script>
  <link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css" />
  <link rel="stylesheet" type="text/css" href="examples.css" />
  <script type="text/javascript">
    var map;
    $(document).ready(function(){
      map = new GMaps({
        el: '#map',
        lat: 35.6575244,
        lng: 139.3349708
      });

      // コワーキングスペース
      map.drawOverlay({
        lat: 35.6578954,
        lng: 139.3386372,
        layer: 'overlayLayer',
        content: '<div class="overlay">ハニカムステージ<div class="overlay_arrow above"></div></div>',
        verticalAlign: 'top',
        horizontalAlign: 'center'
      });

      map.drawOverlay({
        lat: 35.6578086,
        lng: 139.3131089,
        layer: 'overlayLayer',
        content: '<div class="overlay">Wark<div class="overlay_arrow above"></div></div>',
        verticalAlign: 'top',
        horizontalAlign: 'center'
      });

      map.drawOverlay({
        lat: map.getCenter().lat(),
        lng: map.getCenter().lng(),
        layer: 'overlayLayer',
        content: '<div class="overlay">八王子8Beat<div class="overlay_arrow above"></div></div>',
        verticalAlign: 'top',
        horizontalAlign: 'center'
      });

      // カフェ
      map.drawOverlay({
        lat: 35.6614742,
        lng:139.3306111,
        layer: 'overlayLayer',
        content: '<div class="overlay_cafe">Cafe de la poste<div class="overlay_cafe_arrow above"></div></div>',
        verticalAlign: 'top',
        horizontalAlign: 'center'
      });

      map.drawOverlay({
        lat: 35.653637,
        lng:139.3202639,
        layer: 'overlayLayer',
        content: '<div class="overlay_cafe">バーゼル富士森公園店<div class="overlay_cafe_arrow above"></div></div>',
        verticalAlign: 'top',
        horizontalAlign: 'center'
      });
     
    });
  </script>
<style type="text/css">
<!--
body {
font-family: Helvetica, Arial, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;
}
--> 
</style>
</head>
<body>
  <h1>GMaps.js &mdash; Overlays のサンプル</h1>
  <div class="row">
    <div class="span11">
      <div id="map" class="large"></div>
    </div>
  </div>
  <div style="margin:20px;">
    このmapに関する記事は→<a href="https://usortblog.com/gmap-js-multiple-information/" target="_blank">https://usortblog.com/gmap-js-multiple-information/</a>
  </div>
</body>
</html>

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

body{
  font-family: 'Droid Sans', 'Helvetica', Arial, sans-serif;
  margin:5px;
}
#map{
  display: block;
  width: 95%;
  height: 350px;
  margin: 0 auto;
  -moz-box-shadow: 0px 5px 20px #ccc;
  -webkit-box-shadow: 0px 5px 20px #ccc;
  box-shadow: 0px 5px 20px #ccc;
}
#map.large{
  height:500px;
}

.overlay{
  display:block;
  text-align:center;
  color:#fff;
  font-size:16px;
  line-height:20px;
  opacity:0.8;
  background:#4477aa;
  border:solid 3px #336699;
  border-radius:4px;
  box-shadow:2px 2px 10px #333;
  text-shadow:1px 1px 1px #666;
  padding:0 4px;
}
.overlay_arrow{
  left:50%;
  margin-left:-16px;
  width:0;
  height:0;
  position:absolute;
}
.overlay_arrow.above{
  bottom:-15px;
  border-left:16px solid transparent;
  border-right:16px solid transparent;
  border-top:16px solid #336699;
}
.overlay_arrow.below{
  top:-15px;
  border-left:16px solid transparent;
  border-right:16px solid transparent;
  border-bottom:16px solid #336699;
}

/* overlay_cafe add */
.overlay_cafe{
  display:block;
  text-align:center;
  color:#fff;
  font-size:16px;
  line-height:20px;
  opacity:1;
  background:#44aa77;
  border:solid 3px #339966;
  border-radius:4px;
  box-shadow:2px 2px 10px #333;
  text-shadow:1px 1px 1px #666;
  padding:0 4px;
}
.overlay_cafe_arrow{
  left:50%;
  margin-left:-16px;
  width:0;
  height:0;
  position:absolute;
}
.overlay_cafe_arrow.above{
  bottom:-15px;
  border-left:16px solid transparent;
  border-right:16px solid transparent;
  border-top:16px solid #339966;
}
.overlay_cafe_arrow.below{
  top:-15px;
  border-left:16px solid transparent;
  border-right:16px solid transparent;
  border-bottom:16px solid #339966;
}

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

サンプルページ

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

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

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

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

兎本美佳

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

ゆうそうとITブログの更新通知が受け取れます!
スポンサー広告

インターネット GoogleMap
スポンサーリンク
ゆうそうとITブログの更新通知が受け取れます!
ゆうそうとITブログ

コメント

トップへ戻る

ゆうそうとについての説明

ゆうそうと とは東京都八王子市を中心として、WordPressによるWEBサイトの作成や、スポットでのIT相談を行ったり、年間契約でのIT顧問をなりわいとして活動しています。

特徴としては30年以上IT業界でプログラムを中心として仕事をしてきたものと、美大出身のデザイナーがワンストップで対応するため、幅広い対応が可能であることです。

IT相談は直接お会いしてのご相談の他、ZOOMによるオンライン相談も可能です。