どうもです、フロントエンドエンジニアのはやちです( ˘ω˘)✌
こないだ「ファイナルファンタジーX HD Remaster」をクリアしまして、マッコリ飲みつつ夜中4時頃エンディングに感動、号泣しとりました(◞‸◟)
どうでもいいですね✌(´ʘ‿ʘ｀)✌
さて、今回は「JavaScriptが苦手なあなたへ！グーグルマップを簡単にカッコよくカスタマイズする方法」という記事でご紹介したマップの実装に、モーダルを実装するプラグイン「colorbox」を使用して応用したものを作ってみました✌(´ʘ‿ʘ｀)✌
以下、ご紹介させていただきますね( ˘ω˘)
- colorbox
http://www.jacklmoore.com/colorbox/
実装
それでは実装方法を解説していきます( ˘ω˘)☝
HTML
モーダルを起動させたいボタンとモーダルウィンドウを用意してあげましょう。
モーダルウィンドウはあらかじめdisplay:noneしてあげてくださいまし( ˘ω˘)☝
<div class="button"><a href="#overrey_lig" class="button_lig link">Click</a></div>
<div style='display:none'>
<div class='modal' id='overrey_lig'>
<div id='map_canvas_lig' class='map_style'>Company</div>
</div>
</div>JS
JSはそれぞれのソースを整理するために、Googleマップを設定するmap.jsとモーダルを生成するmodal.jsを用意しましょう( ˘ω˘)☝
map.js（Googleマップ用）
//拡大比率の定数
var ZOOM = 15;
/*------------------------------------------------------
マップのプラグイン
--------------------------------------------------------*/
$.fn.modalMap = function() {
// 位置を定義をする 変わるところ
var latlng = new google.maps.LatLng(34.680590, 135.501109);
//ベースマップのオプション定義
var myOptions = {
zoom: ZOOM,//拡大比率
center: latlng,//表示枠内の中心点
mapTypeControlOptions: {
mapTypeIds: ['mapstyle', google.maps.MapTypeId.ROADMAP]
}//表示タイプの指定
};
//アイコン設定
var icon = new google.maps.MarkerImage('images/pin_lig.png',
new google.maps.Size(52,90), //アイコンサイズ設定
new google.maps.Point(0,0) //アイコン位置調整
);
//マップの描画 変わるところ
var map = new google.maps.Map(document.getElementById('map_canvas_lig'), myOptions);
//マップアイコンの設定
var marker = new google.maps.Marker({
position: latlng,
map: map,
icon: icon
});
//マップデザインの貼り付け
var styleOptions = [
//お好みのマップデザイン
];
//マップスタイルの呼び出し
var sampleType = new google.maps.StyledMapType(styleOptions);
map.mapTypes.set('mapstyle', sampleType);
map.setMapTypeId('mapstyle');
};マップの設定はmodalMapでプラグイン化しちゃいましょう。
マップのデザインはSnazzy Mapsでソースを配布しているので、ちゃちゃっとコピペをして//お好みのマップデザインにはってくださいまし( ˘ω˘)☝
modal.js（モーダル用）
$(function(){
$('.link').colorbox({
inline:true,
transition:'none',
//モーダルが表示されきった時に地図を生成
onComplete:function(){
$("#map_canvas_lig").modalMap();
}
});
});Googleマップはページのローディングが終わった後に生成されてしまうため、colorboxプラグインのオプションを使い、モーダルウィンドウが表示されきったときに地図が生成されるようタイミングを調整しましょう( ˘ω˘)☝
仕上げ
最後にHTML上で読み込んであげましょう。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src='http://maps.google.com/maps/api/js?sensor=true'></script>
<script src="js/jquery.colorbox.js"></script>
<script src="js/map.js"></script>
<script src="js/modal.js"></script>順番を間違えると生成されなくなりますので、お気をつけくださいまし( ˘ω˘)☝
はい、これで完成になります✌(´ʘ‿ʘ｀)✌
できあがったものはこちらからご覧いただけます( ˘ω˘)☞三☞ｼｭｯｼｭｯ
実装（応用編）
続いて、複数の地図を表示する実装をご紹介します( ˘ω˘)☝
前回のmodalMapは一箇所の地図しか使えないので、複数使えるように変更しました。
map.jsの変更
それでは以下、変更点をご紹介します( ˘ω˘)☝
引数の設定
- 変更前
$.fn.modalMap = function()- 変更後
$.fn.modalMap = function(id, pin, lat, lng)それぞれ変更する部分を設定する準備をします( ˘ω˘)☝
位置の設定
- 変更前
// 位置を定義をする
var latlng = new google.maps.LatLng(34.680590, 135.501109);- 変更後
// 位置を定義をする
var latlng = new google.maps.LatLng(lat, lng);地図の場所は変更するところなので、引数の設定をlat,lngという名前で設定しちゃいましょう( ˘ω˘)☝
ピンアイコンの設定
- 変更前
//アイコン設定
var icon = new google.maps.MarkerImage('images/pin_lig.png',
new google.maps.Size(52,90), //アイコンサイズ設定
new google.maps.Point(0,0) //アイコン位置調整
);- 変更後
//アイコン設定
var icon = new google.maps.MarkerImage(pin,
new google.maps.Size(52,90), //アイコンサイズ設定
new google.maps.Point(0,0) //アイコン位置調整
);ピンの画像も変更したいので、こちらもpinという名前で設定しちゃいましょう( ˘ω˘)☝
表示するIDの設定
- 変更前
//マップの描画 変わるところ
var map = new google.maps.Map(document.getElementById('map_canvas_lig'), myOptions);- 変更後
//マップの描画
var map = new google.maps.Map(document.getElementById(id), myOptions);マップを表示させるdivの指定を複数できるように、idという名前で設定しちゃいましょう( ˘ω˘)☝
複数のマップの設定
//マッププラグイン引数の設定
var POINT ={
lig:{
id: 'map_canvas_lig',//マップの描画
pin: 'images/pins_lig.png',//アイコンの画像
lat: 34.680590,// 位置を定義をする
lng: 135.501109// 位置を定義をする
},
lamp:{
id: 'map_canvas_lamp',
pin: 'images/pins_lamp.png',
lat: 36.825442,
lng: 138.204649
}
};
//拡大比率の定数
var ZOOM = 15;設定ができたところで、それぞれの引数に当て込んでいきましょう。
全体コード
//マッププラグイン引数の設定
var POINT ={
lig:{
id: 'map_canvas_lig',//マップの描画
pin: 'images/pins_lig.png',//アイコンの画像
lat: 34.680590,// 位置を定義をする
lng: 135.501109// 位置を定義をする
},
lamp:{
id: 'map_canvas_lamp',
pin: 'images/pins_lamp.png',
lat: 36.825442,
lng: 138.204649
}
};
//拡大比率の定数
var ZOOM = 15;
/*------------------------------------------------------
マップのプラグイン
--------------------------------------------------------*/
$.fn.modalMap = function(id, pin, lat, lng) {
// 位置を定義をする
var latlng = new google.maps.LatLng(lat, lng);
//ベースマップのオプション定義
var myOptions = {
zoom: ZOOM,//拡大比率
center: latlng,//表示枠内の中心点
mapTypeControlOptions: {
mapTypeIds: ['mapstyle', google.maps.MapTypeId.ROADMAP]
}//表示タイプの指定
};
//アイコン設定
var icon = new google.maps.MarkerImage(pin,
new google.maps.Size(52,90), //アイコンサイズ設定
new google.maps.Point(0,0) //アイコン位置調整
);
//マップの描画
var map = new google.maps.Map(document.getElementById(id), myOptions);
//マップアイコンの設定
var marker = new google.maps.Marker({
position: latlng,
map: map,
icon: icon
});
//マップデザインの貼り付け
var styleOptions = [
];
//マップスタイルの呼び出し
var sampleType = new google.maps.StyledMapType(styleOptions);
map.mapTypes.set('mapstyle', sampleType);
map.setMapTypeId('mapstyle');
};変更されたJSはこのようになります。
これでmap.jsの変更は完了になります( ˘ω˘)☝
JS（modal.js）
$(function(){
var $mapButton = $('.link'),
$this = $(this);
/*--- モーダルの表示 ---*/
$mapButton.colorbox({
inline:true,
width:"962",
transition: "none"
});
/*--- 地図の表示 ---*/
for (var i in POINT){
(function(i){
$('.' + 'button_' + i ).colorbox({
//モーダルが表示されきった時に地図を生成
onComplete:function(){
//プラグインの引数
var point = POINT[i];
//マップの引数を取得
$this.modalMap(point.id,point.pin,point.lat,point.lng);
}
});
})(i);
}
});モーダルの共通で表示する部分と、地図を出す部分を分けました。
地図を出す部分はforを使って、呼び出す部分をまとてめおります( ˘ω˘)☝
これで応用編は完成になります。
こちらにてご確認いただけます( ˘ω˘)☞三☞ｼｭｯｼｭｯ
まとめ
いかがでしたでしょうか！
以前はJSがまったくわからないまま実装をしていましたが、1つ1つ理解もすすみ、ソースの整理もできるようにもなってきました。
まだまだ覚えることが多いですがこれからも頑張っていきたい所存でございます( ˘ω˘)
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
