wordpress内で、現在位置と「投稿」内のカスタムフィールド「googlemap」に登録した場所を同時にgooglemap上に表示したいのですが、紐付けができなくて悩んでいます。
下記のようなイメージです
http://waox.main.jp/wordpressmap/?page_id=2
上記を参考にした場合、現在位置以外の表示の仕方が投稿ではありませんでした。
https://bizvektor.com/wordpress-event/2014_wordfes_geolocation_api/
上記が一番やりたいことに近かったのですが、「位置情報のパラメーターを受け取って近くのお城順に並べる」の箇所で「移動先の固定ページのテンプレートファイル(PHP)に記述」の箇所でPHPに記述しても上手くいきませんでした。(コメントアウトや記述を見る限り、ほとんどjavascriptのような気がするのですが、そもそもphpに記述して上手くいくものなのでしょうか?)
プラグインの「Geo Mashup」はかなりイメージに近く、投稿内の記事をまとめてgooglemap上に表示させられたのですが、現在地を取得した場合、どう紐付けしていいのか、というところで詰まってしまいました。(Geo Mashupを使う場合、投稿する側の人が二回住所を打ち込まないといけない、というのもちょっとややこしい点です)
記事に含まれている経度、緯度の情報をまとめてMapに表示→ユーザーに現在地を取得のアクションをしてもらう→Map上に現在地も表示される。
ということができれば、何でもいいのですが、それらしいプラグインもなく、困っております。
カスタムフィールドの情報を参照できたら、一番いいのですが、結果的にできれば二度手間でも構いません。
・上記の自分が参考したURLから何か自分が解釈を間違えてること
・Geo Mashupと現在位置を紐付ける手がかり
・すぐにできちゃうプラグイン
なんでも構いません。何か手がかりがありましたらお願いします。
追記
下記のURLからなんとかできないかと思い、現在作成中です。
http://make.mapmap.biz/api/559/
上記サイトではトップページなのですが、今手がけている案件では「カテゴリーページ」に導入したいので、「category-スラッグ.php」に以下のように書き込みました。
php
1<div id="map map_canvas" class="acf-map" style="width: 400px; height: 620px;"></div> 2<script type="text/javascript"> 3 google.maps.event.addDomListener(window, 'load', function() { 4 var mapdiv = document.getElementById( 'map' ); 5 var myOptions = { 6 zoom: 15, 7 center: new google.maps.LatLng(35.68971, 139.69168), 8 mapTypeId: google.maps.MapTypeId.ROADMAP, 9 scaleControl: true 10 }; 11 var map = new google.maps.Map( mapdiv, myOptions ); 12 13 var marker = []; 14 var infowindow = []; 15 16<?php $m=0; $m1=0; $m2=0; $i=0; $i2=0; ?> 17 18<?php while (have_posts()) : the_post(); ?> 19 20 marker[<?php echo $m++; ?>] = new google.maps.Marker({ 21 icon: 'http://maps.google.co.jp/mapfiles/ms/icons/blue-pushpin.png', 22 position: new google.maps.LatLng( <?php echo post_custom("Map_lat")?>,<?php echo post_custom("Map_lng")?> ), 23 map: map, 24 title: '<?php the_title(); ?>' 25 }); 26 infowindow[<?php echo $i++; ?>] = new google.maps.InfoWindow({ 27 content: '<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>', 28 size: new google.maps.Size( 50, 30 ) 29 }); 30 google.maps.event.addListener( marker[<?php echo $m1++; ?>], 'click', function() { 31 infowindow[<?php echo $i2++; ?>].open( map, marker[<?php echo $m2++; ?>] ); 32 }); 33<?php endwhile; // End the loop. Whew. ?> 34 var markerCluster = new MarkerClusterer( map, marker ); 35 }); 36 37</script> 38
こう書き込んだところ、初めはgooglemapが表示されなかったので、
css
1.acf-map { 2 width: 100%; 3 height: 400px; 4 border: #ccc solid 1px; 5 margin: 20px 0; 6 }
と付け足したら、mapは表示されました。
ただ、mapの中心が東京駅
javascript
1center: new google.maps.LatLng(35.68971, 139.69168),
にならず、各記事にリンクするはずのピンも表示されません。
ソースを見たところ、javascriptから各記事のデータは読み込まれています。
このマップの中心地に現在地を読み込んで代入すれば、目的は果たせると思うのですが、根本的に何か間違っていると思うのでご教授願います。
追記2
.acf-mapがそもそも個別ページのカスタムフィールドのmapを描画するjavascriptのクラスだったので、こっちのmapが表示されていただけでした。
ただ、.acf-mapを外すと、mapが表示されない(エラーメッセージもなく真っ白です)ので、そもそもこのmap自体が描画されてないようです。
質問内容とずれてきたので、調べてわからなければ、別途質問します。
回答2件
あなたの回答
tips
プレビュー