現在位置を中心にして�地図にマッピングしようとして�悩んだこと

フォルトゥナ 坂本邦夫

a-blog cms Training Camp 2017 Autumn

坂本邦夫

• フォルトゥナ 代表
• 大阪府東大阪市在住
• ウェブデザイナー�ウェブ配色スペシャリスト
• a-blog cmsエバンジェリスト
• Jimdoエキスパート

前回の合宿で発表

Entry_Geolistを使ってみた�

• 「あまり大事でない東大阪ガイド」

​

http://bit.ly/2iiuyge

基本的な作り方は�いちがみさんに聞いてください

その時に質問しました

このままだと自分を中心にして、地図にマッピングできませんよね？

JSでごにょごにょしないと…

ごにょごにょしてみた

課題の整理

1. Googleスタティックマップを使うと、�幅が640px以上のときに切り替え美しくない��
2. 現在位置を地図の中心にしたければ、�JavaScriptに現在位置を書かなければならない

結構手こずりました

Entry_Geolistモジュールでは�ポストインクルードを使って�エントリー情報を読み込む

ポストインクルード

post include機能は、フォームでpost（送信）した結果を、ページのリロードなしで表示する機能です。

つまり見た目のURLは変わらない

ただし実際の読み込みファイルは別にあるので、�それを読み込むためのURLが存在する

開発者ツールで確認

クエリストリングを確認

https://sakamotokunio.com/higashiosaka/include/entry/near_geo.html?lat=34.6723654&lng=135.5723887

�URLを加工したら�変数を作れるんじゃない？

現在位置のグローバル変数を作る

public function extendsGlobalVars(&$globalVars) {� if(isset($_GET['lat'])) {� $lat = $_GET['lat'];� $globalVars->set('NOW_LAT', $lat);� }� if(isset($_GET['lng'])) {� $lng = $_GET['lng'];� $globalVars->set('NOW_LNG', $lng);� }�}

2つのグローバル変数

クエリストリングに緯度と経度がある場合に

• 現在の緯度：%{NOW_LAT}
• 現在の経度：%{NOW_LNG}

の2つが使えるようになる

マップを生成するJSに使える

map = new google.maps.Map(document.getElementById('map'), {� center: {� lat: %{NOW_LAT}, // 緯度� lng: %{NOW_LNG}, // 経度� }�});

​

​

地図のマーカーのテーマはこう

var markerData = [{

name: "現在地",

lat: %{NOW_LAT},

lng: %{NOW_LNG},

pic: '', icon: 'https://sakamotokunio.com/themes/geo/images/map_current.png',

}, <!-- BEGIN_MODULE Entry_GeoList id="map_geo_list" --><!-- BEGIN unit:loop --><!-- BEGIN entry:loop -->{

name: "{title}",

lat: {geo_lat},

lng: {geo_lng},

<!-- BEGIN_IF [{entrySliderImage@path}/nem] -->

pic : '<img src="%{HTTP_ARCHIVES_DIR}{entrySliderImage@tinyPath}[resizeImg(160,90)]" alt="">',

<!-- ELSE -->

pic: '',<!-- END_IF -->

url: '{url}',

},<!-- END entry:loop --><!-- END unit:loop --><!-- END_MODULE Entry_GeoList -->

];

グローバル変数最強！

グローバル変数とかモジュールは

JavaScriptファイルでも動きます

画像の校正オプションも問題なし

あれ？JSはどこに書く？

通常のポストインクルード

トップページ

CSS

JS

マップ

エントリー一覧

読み込むHTML

今回のポストインクルード

トップページ

CSS

マップ

エントリー一覧

JS

読み込むHTML

マップを表示させるためにはJSが必要だが、�トップページに記述しても動作しないため、読み込まれる側に書く必要があるはず。

でも動かない・・・誰か教えて・・・。

マップをiframeで読み込んで解決�

トップページ

CSS

iframeでマップエントリー一覧

読み込むHTML

マップ

JS

マップのHTML

<iframe src="/include/entry/near_geo2.html�?lat=%{NOW_LAT}&lng=%{NOW_LNG}" frameborder="0" scrolling="no"></iframe>

​

要するに

1. ポストインクルードでファイルを読み込み（ファイル1）
2. そのURLにはクエリが付いている
3. クエリから緯度と経度のグローバル変数を作る
4. 緯度・経度付きのURLでiframe読み込み（ファイル2）。�JSもモジュールもファイル2の中で解決させる

まとめ

機能の組み合わせでまだまだできる

• グローバル変数を作れると幅が広がる
• モジュールとか変数はJSにも書けます
• ポストインクルードのちゃんとした�ドキュメントを誰か作って！
• もっといい方法があると思うので、�ちゃんとしたものを作って！

参考にしたサイト

グローバル変数の作り方�https://developer.a-blogcms.jp/blog/acmscamp/globalvars.html

Google Maps APIを使って複数のマーカーと吹き出しを設置してみる�https://www.tam-tam.co.jp/tipsnote/javascript/post7755.html

​

​

「詰んでからはじまる a-blog cms」 �by ミズノケイスケさん

終わり