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

2016年2月12日2016年7月13日

この記事は最終更新日から9年経過しています。内容が古い可能性があります。

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

記事をざっと見る

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

GMap.jsはGitHubにソースが置いてありました

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
      });

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

        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-size と line-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 のワンセットが１つの地点を表しています。ここではハニカムステージさんを追加してみした。

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

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

吹き出しの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]

この記事が気に入ったら
いいねまたはフォローしてね！

Follow @u_sort

あなたのシェアが励みになります！

URLをコピーしました！

URLをコピーしました！