ITエンジニア/デザイナ向けにオープンソースを毎日紹介

Googleマップは地図を便利に使える存在ですが、プログラムと組み合わせようと思うと若干面倒なことがあります。そうした時にはサードパーティ製のライブラリを使うのがお勧めです。

マーカーを立てたり、検索したりと言った操作をするならばMappy.jsが便利ではないかと思います。さっそく見ていきましょう。

マーカーを立てたところです。
マーカーを立てたところです。

コードはこんな感じになります。面白いのはリファレンスとして画像をBase64エンコードし、それをそのまま配置しているところです。また、クリックでマーカー詳細を表示するかどうかはautoShowで制御できます。

$("#custom-places").mappy({
  showOnLoad:
  [
    // City Varieties
    {
      // flag that this place should have the tooltip shown when the map is first loaded
      autoShow: true,
      // flags the user can edit this place
      canEdit: false,
      lat: 53.798823,
      lng:-1.5426760000000286,
      reference: "CoQBfAAAAPw-5BTCS53grSLDwX8rwo5BnWnEWnA72lmOjxdgWg2ODGfC5lLjGyoz428IEaln1vJ6rq1jI96Npzlm-N-wmPH2jdJMGfOLxno_rmgnajAnMPzNzuI8UjexIOdHVZPBPvQGloC-tRhudGeKkbdTT-IWNP5hp4DIl4XOLWuYFOVYEhBxNPxaXZdW9uhKIETXf60hGhTc9yKchnS6oO-6z5XZJkK2ekewYQ"
    },
    // Random made up CUSTOM place
    {
      // flag that this place should have the tooltip shown when the map is first loaded
      autoShow: true,
      lat: 53.79,
      lng:-1.5426760000000286,
      name: "Somewhere",
      street: "Over the rainbow, Up high way"
    }
  ]
}); 

アクションも実行できます。例えばこれはSelectボタンを押した時にイベントを実行するサンプルです。

ツールチップの中にボタンを配置。
ツールチップの中にボタンを配置。

クリックでイベント実行。
クリックでイベント実行。

能動的にマーカーの追加もできます。

マーカー追加。
マーカー追加。

検索と連動させる機能もあります。
検索と連動させる機能もあります。

検索対応する場合のコード。ちょっと長いですが。

$("#search-for-places").mappy({
  // Adds a predictive search box
  searchOptions: {
    enabled: true,
    initSearch: "Football in Leeds",
    placeholder: "Search ..."
  },

  // allow user to select somewhere
  onSelect: function(mappy, details) {
    var msg = 
      "name: " + details.name +
      "street: " + details.street + ", " + 
      details.area + ", " + 
      details.town + ", " + details.postCode + 
      "telNo: " + details.telNo + 
      "website: " + details.website + 
      "g+: " + details.url
    ;
    mappy.showMsg("You selected ...", msg);
    // indicate tip should be closed
    return true;
  },

  // shows additional instructions to the user  
  getHelpWindow: function(mappy) {
    var html = 
      "<div class='mappy-help'>" +
        "<h3>Find a venue</h3>" +
        "<ol>" +
          "<li>Simply use the <strong>search</strong> box to find a venue in your area.</li>" +
          "<li>On the pop-up, click <strong>Select</strong> to pick a pitch.</li>" + 
        "</ol>" +
        "<h3>New venues</h3>" +
        "<ol>" +
          "<li>Your venue isn't displayed?  Simply click on the map where your pitch is.</li>" +
          "<li>Fill in the details in the dialog.</li>" + 
          "<li>You can drag the marker around to pinpoint the right location.</li>" + 
          "<li>Once you're happy, click the <strong>OK</strong> button</li>" + 
        "</ol>" +
      "</div>"
    ;
    return html;
  }
});

Mappy.jsは汎用的なGoogleマップラッパーという感じではありませんが、マーカーを立てたり検索と連携したりと言ったニーズであればマッチするのではないかと思います。

CGMとしてユーザが自由にマーカーを立てられるサイトに使ってみるのも良さそうです。全てのパラメータを一気に渡して表示させるだけなのは手軽で使い勝手良さそうです。

Mappy.jsはjQuery/JavaScript製のソフトウェア(ライセンスはWTFPL)です。

mappy.js - jQuery plug-in for Google Maps and Places API integration

toepoke/mappy

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2