質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.51%
Google API

Googleは多種多様なAPIを提供していて、その多くはウェブ開発者向けのAPIです。それらのAPIは消費者に人気なGoogleのサービス(Google Maps, Google Earth, AdSense, Adwords, Google Apps,YouTube等)に基づいています。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

5077閲覧

現在位置と「投稿」内のカスタムフィールドに登録した場所を同時にgooglemap上に表示したい

yukko

総合スコア21

Google API

Googleは多種多様なAPIを提供していて、その多くはウェブ開発者向けのAPIです。それらのAPIは消費者に人気なGoogleのサービス(Google Maps, Google Earth, AdSense, Adwords, Google Apps,YouTube等)に基づいています。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2016/05/16 01:45

編集2016/05/18 06:42

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自体が描画されてないようです。
質問内容とずれてきたので、調べてわからなければ、別途質問します。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Lhankor_Mhy

2016/05/16 03:16

「PHPに記述しても上手くいきませんでした。」とありますが、具体的にはどのようにうまくいきませんでしたか? 出力されたエラーなどをご提示ください。
yukko

2016/05/16 05:21

エラーというよりは、コメントアウト以降がそのまま文字列として出力されてしまう状態です。 phpファイルにjavascriptのコメントアウトの記述をすれば、まぁそりゃ確かにそうなんですが…。 ではphpのどこに記述するのか?という状態です。
Lhankor_Mhy

2016/05/16 06:58

? よく分からないのですが、「位置情報のパラメーターを受け取って近くのお城順に並べる」のパラグラフに書いてあるのはjavascriptではなくPHPコードだと思いますよ。もう一度その記事を読まれた方がいいのでは。
yukko

2016/05/16 13:25

そうなんですか…。PHPのどこに記述してもコードがただの文字列としてそのまま出てしまい、何度も記事を読み直し、「固定ページのテンプレート」のループ内に記述、外部javascriptとして読み込む、を試したのですが、全く動作しませんでした。どうも私の知識不足でできないみたいです。こちらの方法は諦めようと思います。
guest

回答2

0

ベストアンサー

「移動先の固定ページのテンプレートファイル(PHP)に記述」の箇所でPHPに記述しても上手くいきませんでした。

記述の仕方にもよります。記事が Geo Mashup を想定していればそのままの記述で目的を果たせますが、そうで無い様なので難しいと思います。


(コメントアウトや記述を見る限り、ほとんどjavascriptのような気がするのですが、そもそもphpに記述して上手くいくものなのでしょうか?)

Google Maps JavaScript API を利用するため、地図を表示し、マーカーを置く部分はすべて JavaScript で記述されます。PHPで書いているところはDB内の位置情報を JavaScript に埋め込むためのものです。
PHPはサーバ上で、JavaScript はブラウザ上で動くため、PHPの変数を渡すに埋め込む方法を採っているという感じでしょうか。(わかりにくいですかね)


カスタムフィールドの情報を参照できたら、一番いいのですが

Geo Mashup がどのようにデータを扱っているかがわかりませんが、投稿・固定ページでカスタムフィールドが入っているか確認し、入っているなら get_post_meta() で取得できます。

【カスタムフィールドの使い方 - WordPress Codex 日本語版】
https://wpdocs.osdn.jp/カスタムフィールドの使い方

【関数リファレンス/get post meta - WordPress Codex 日本語版】
https://wpdocs.osdn.jp/関数リファレンス/get_post_meta


・Geo Mashupと現在位置を紐付ける手がかり

公式リファレンスによると map ロード時に JavaScript を挟めるようです。「custom-googlev3.js」をプラグインディレクトリに入れれば実行時に読んでくれるみたいです。

【GoogleMapにWordPressの記事をプロットする方法 | Geo Mashup - wald-grun.biz】
http://wald-grun.biz/web/wp/5275/

custom-googlev3.jsという名前で保存して、/wp-content/plugins/geo-mashup-customに放り込めばOKです。

下記は「多分こんな感じで書く」というコードです。(検証環境がこちらにないため未検証です)

JavaScript

1GeoMashup.addAction( 'loadedMap', function ( properties, mxn ) { 2 if ( !navigator.geolocation ) { return; } 3 navigator.geolocation.getCurrentPosition( success, ( function () {} ) ); 4 function success( position ) { 5 var map = mxn.getMap(); 6 var latlng = new google.maps.LatLng( position.coords.latitude, position.coords.longitude ); 7 var marker = new google.maps.Marker( { 8 position: latlng 9 , map: map 10 , title: '現在地' 11 , icon: 'http://maps.google.co.jp/mapfiles/ms/icons/tree.png' 12 } ); 13 map.setCenter( latlng ); 14 } 15} );

【Google Maps JavaScript API V3 Reference | Google Maps JavaScript API | Google Developers】
https://developers.google.com/maps/documentation/javascript/reference#Map

【Javascript API ・ cyberhobo/wordpress-geo-mashup Wiki ・ GitHub】
https://github.com/cyberhobo/wordpress-geo-mashup/wiki/Javascript-API

投稿2016/05/16 03:02

kei344

総合スコア69357

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yukko

2016/05/16 05:23

回答ありがとうございます。 できそうなものから試してみて、成功したら詳しく記述し、ベストアンサーにさせていださきます。 大分手がかりが見えてきました。
kei344

2016/05/18 07:14

追記文を見たところ、とりあえずひとつ指摘させていただきます。 id="map map_canvas" という記法はありません。IDは1つのみ指定できます。
yukko

2016/05/19 09:16

ケアレスミスですね;ご指摘ありがとうございます。 なんとか解決したので、自己解決欄に記載します。
guest

0

googlemapが描画されませんの質問から発展して、なんとか目的は果たせたのでご報告します。

下記を「category-スラッグ.php」に記述しました。

CSS

1.map-embed{ 2 max-width: 100% ; 3 height: 0 ; 4 margin: 0 ; 5 padding: 0 0 56.25% ; 6 overflow: hidden ; 7 position: relative ; 8 top: 0 ; 9 left: 0 ; 10} 11 12.map-embed > div 13{ 14 position: absolute ; 15 top: 0 ; 16 left: 0 ; 17 width: 100% ; 18 height: 100% ; 19 margin: 0 ; 20 padding: 0 ; 21} 22 23.map-embed img{ max-width: none ;}

php

1 2<div class="map-embed"> 3 <div id="map-canvas"></div> 4</div> 5<script> 6// ユーザーの端末がGeoLocation APIに対応しているかの判定 7 8// 対応している場合 9if( navigator.geolocation ) 10{ 11 // 現在地を取得 12 navigator.geolocation.getCurrentPosition( 13 14 // [第1引数] 取得に成功した場合の関数 15 function( position ) 16 { 17 // 取得したデータの整理 18 var data = position.coords ; 19 20 // データの整理 21 var lat = data.latitude ; 22 var lng = data.longitude ; 23 var alt = data.altitude ; 24 var accLatlng = data.accuracy ; 25 var accAlt = data.altitudeAccuracy ; 26 var heading = data.heading ; //0=北,90=東,180=南,270=西 27 var speed = data.speed ; 28 29 var canvas = document.getElementById( 'map-canvas' ) ; 30 // 位置情報 31 var latlng = new google.maps.LatLng( lat , lng ) ; 32 33 // Google Mapsに書き出し 34 var mapOptions = { 35 zoom: 17 , // ズーム値 36 center: latlng , // 中心座標 [latlng] 37 }; 38 39var map = new google.maps.Map( canvas , mapOptions ) ; 40var markers = [] ; 41var infowindows = []; 42 43 44<?php $m=0; $m1=0; $m2=0; $i=0; $i2=0; ?> 45 46 47<?php while (have_posts()) : the_post(); ?> 48 49 markers[<?php echo $m++; ?>] = new google.maps.Marker({ 50 icon: 'http://maps.google.co.jp/mapfiles/ms/icons/blue-pushpin.png', 51 position: new google.maps.LatLng( <?php echo post_custom("Map_lat")?>,<?php echo post_custom("Map_lng")?> ), 52 map: map, 53 title: '<?php the_title(); ?>' 54 }); 55 infowindows[<?php echo $i++; ?>] = new google.maps.InfoWindow({ 56 content: '<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>', 57 maxWidth: 250 , 58 }); 59 google.maps.event.addListener( markers[<?php echo $m1++; ?>], 'click', function() { 60 infowindows[<?php echo $i2++; ?>].open( map, markers[<?php echo $m2++; ?>] ); 61 }); 62<?php endwhile; // End the loop. Whew. ?> 63}, 64 65 // [第2引数] 取得に失敗した場合の関数 66 function( error ) 67 { 68 // エラーコード(error.code)の番号 69 // 0:UNKNOWN_ERROR 原因不明のエラー 70 // 1:PERMISSION_DENIED 利用者が位置情報の取得を許可しなかった 71 // 2:POSITION_UNAVAILABLE 電波状況などで位置情報が取得できなかった 72 // 3:TIMEOUT 位置情報の取得に時間がかかり過ぎた… 73 74 // エラー番号に対応したメッセージ 75 var errorInfo = [ 76 "原因不明のエラーが発生しました…。東京駅を中心に表示します。" , 77 "位置情報の取得が許可されませんでした…。東京駅を中心に表示します。" , 78 "電波状況などで位置情報が取得できませんでした…。東京駅を中心に表示します。" , 79 "位置情報の取得に時間がかかり過ぎてタイムアウトしました…。東京駅を中心に表示します。" 80 ] ; 81 82 // エラー番号 83 var errorNo = error.code ; 84 85 // エラーメッセージ 86 var errorMessage = "[エラー番号: " + errorNo + "]\n" + errorInfo[ errorNo ] ; 87 88 // アラート表示 89 alert( errorMessage ) ; 90 91var canvas = document.getElementById( 'map-canvas' ) ; 92 93var latlng = new google.maps.LatLng( 35.681298 , 139.766247 ); 94 95var mapOptions = { 96 zoom: 17 , // ズーム値 97 center: latlng , // 中心座標 [latlng] 98}; 99 100var map = new google.maps.Map( canvas , mapOptions ) ; 101var markers = [] ; 102var infowindows = []; 103 104 105<?php $m=0; $m1=0; $m2=0; $i=0; $i2=0; ?> 106 107 108<?php while (have_posts()) : the_post(); ?> 109 110 markers[<?php echo $m++; ?>] = new google.maps.Marker({ 111 icon: 'http://maps.google.co.jp/mapfiles/ms/icons/blue-pushpin.png', 112 position: new google.maps.LatLng( <?php echo post_custom("Map_lat")?>,<?php echo post_custom("Map_lng")?> ), 113 map: map, 114 title: '<?php the_title(); ?>' 115 }); 116 infowindows[<?php echo $i++; ?>] = new google.maps.InfoWindow({ 117 content: '<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>', 118 maxWidth: 250 , 119 }); 120 google.maps.event.addListener( markers[<?php echo $m1++; ?>], 'click', function() { 121 infowindows[<?php echo $i2++; ?>].open( map, markers[<?php echo $m2++; ?>] ); 122 }); 123<?php endwhile; // End the loop. Whew. ?> 124 125 } , 126 127 // [第3引数] オプション 128 { 129 "enableHighAccuracy": false, 130 "timeout": 8000, 131 "maximumAge": 2000, 132 } 133 134 ) ; 135} 136 137// 対応していない場合 138else 139{ 140 // エラーメッセージ 141 var errorMessage = "お使いの端末は、GeoLacation APIに対応していません。東京駅を中心に表示します。" ; 142 143 // アラート表示 144 alert( errorMessage ) ; 145 146var canvas = document.getElementById( 'map-canvas' ) ; 147 148var latlng = new google.maps.LatLng( 35.681298 , 139.766247 ); 149 150var mapOptions = { 151 zoom: 17 , // ズーム値 152 center: latlng , // 中心座標 [latlng] 153}; 154 155var map = new google.maps.Map( canvas , mapOptions ) ; 156var markers = [] ; 157var infowindows = []; 158 159 160<?php $m=0; $m1=0; $m2=0; $i=0; $i2=0; ?> 161 162 163<?php while (have_posts()) : the_post(); ?> 164 165 markers[<?php echo $m++; ?>] = new google.maps.Marker({ 166 icon: 'http://maps.google.co.jp/mapfiles/ms/icons/blue-pushpin.png', 167 position: new google.maps.LatLng( <?php echo post_custom("Map_lat")?>,<?php echo post_custom("Map_lng")?> ), 168 map: map, 169 title: '<?php the_title(); ?>' 170 }); 171 infowindows[<?php echo $i++; ?>] = new google.maps.InfoWindow({ 172 content: '<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>', 173 maxWidth: 250 , 174 }); 175 google.maps.event.addListener( markers[<?php echo $m1++; ?>], 'click', function() { 176 infowindows[<?php echo $i2++; ?>].open( map, markers[<?php echo $m2++; ?>] ); 177 }); 178<?php endwhile; // End the loop. Whew. ?> 179 180} 181</script>

javascriptの箇所がスマートではありませんが、これで一応動作しました。
本来なら現在地にもピンを立てたいのですが、個別記事のピンと競合してしまうので、それは別途解決方法を調べていきます。

ご回答、ご指摘していただいた方々、ありがとうございました。

参照URL:https://syncer.jp/how-to-use-geolocation-api

投稿2016/05/19 09:22

yukko

総合スコア21

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問