Mappy.js - Googleマップでマーカーを立てるのに便利なjQueryライブラリ
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