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

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

ただいまの
回答率

90.84%

  • PHP

    18229questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • WordPress

    6219questions

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

プラグインの修正がうまくいかない

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 160

suizya2

score 19

wordpressのプラグイン「TCD Google Maps」を
1ページにいくつも地図が表示できるように
こちらのサイトを参考に修正を試みているのですが、リンク先の問題点2として挙げられているJavascriptのエラーが直らず困っております。

javascriptが1回だけ読み込まれるようにしたいのですが
下記コードの1、2、は3のどこに入れればよいのでしょう、、
ファイルが読み込まれる前と思い
function tcd_script_enqueue()の前に1と2を挿入したのですがうまくいきません・・・
どうかお教えいただけませんでしょうか。。。宜しくお願い致します。。。

1、地図の出現数をカウントし1以上ならscriptタグを読み込まないようにする

$obj = TcdCount::getInstance();
if($obj->count() > 1) {
$script = "";
}

2、地図の出現数をカウントするシングルトンクラスを追加する

class TcdCount {
private static $uniqueInstance;
private $count = 0;
private function __construct() {
}
public static function getInstance() {
if ( ! isset( static::$uniqueInstance ) ) {
static::$uniqueInstance = new TcdCount();
}
return static::$uniqueInstance;
}
public function count() {
$this->count = $this->count + 1;
return $this->count;
}
}

3、修正したいファイル

<?php
function tcd_script_enqueue() {
  wp_enqueue_script('jquery-ui-core');
  wp_enqueue_script('jquery-ui-slider');

  wp_enqueue_script('google-maps', 'https://maps.googleapis.com/maps/api/js');
  wp_enqueue_script('angular', plugins_url('angular.js', __FILE__));
  wp_enqueue_script('angular-slider', plugins_url('angular-slider.js', __FILE__));

  wp_register_style('custom_wp_admin_css', plugins_url('admin.css', __FILE__), false, '1.0.0');
  wp_enqueue_style('custom_wp_admin_css');

  wp_register_style('jquery-ui', plugins_url('jquery-ui.css', __FILE__), false, '1.0.0');
  wp_enqueue_style('jquery-ui');
}

add_action('admin_enqueue_scripts', 'tcd_script_enqueue');





load_plugin_textdomain( 'tcd-google-maps', false, basename( dirname( __FILE__ ) ) . '/languages' );

function tcd_add_google_js_css() {
  // wp_enqueue_script('google-maps', 'https://maps.googleapis.com/maps/api/js');
  wp_enqueue_style('tcd-maps', plugins_url("admin.css", __FILE__));
}

add_action('wp_enqueue_scripts', 'tcd_add_google_js_css');

function tcd_map_shortcode($opts){
  $mapId = (int)"map." + rand(100000, 999999);

  $address = @$opts['address'];
  $draggable = @$opts['draggable'];
  $controls = @$opts['controls'];
  $class = @$opts['class'];

  if( isset($opts['style']) ){
    $style = $opts['style'];
  } else {
    $style = '';
  }
  $width = @$opts['width'];
  $zoom =  ($opts['zoom'] ? $opts['zoom'] : '18');
  $height = ($opts['height'] ? $opts['height'] : '400px');
  $api = ($opts['api'] ? '?key=' . $opts['api'] : '');

  if( $opts['theme'] == "black" ){
   略}  else {
    $theme = '[]';
  }


   if(
      !wp_script_is( 'gmap', 'enqueued' ) &&
      !wp_script_is( 'gmaps', 'enqueued' ) &&
      !wp_script_is( 'g-map', 'enqueued' ) &&
      !wp_script_is( 'g-maps', 'enqueued' ) &&
      !wp_script_is( 'googlemap', 'enqueued' ) &&
      !wp_script_is( 'googlemaps', 'enqueued' ) &&
      !wp_script_is( 'google-map', 'enqueued' ) &&
      !wp_script_is( 'google-maps', 'enqueued' )
    ){
     $script = "<script src='https://maps.googleapis.com/maps/api/js$api' async defer></script>";
   } else {
     $script = "";
   }

  $map = <<<EOT
    $script

    <div id="$mapId" class="dp-google-map $class" style="height:$height; width:$width; $style"></div>

<script type="text/javascript">
var loaded_$mapId = false
setInterval(function(){
if( google && !loaded_$mapId ){
loaded_$mapId = true

          // google.maps.event.addDomListener(window, 'load', function(){
          // })
            var disabled = $controls ? false : true
            var draggable = $draggable
            var geocoder = new google.maps.Geocoder();

            geocoder.geocode({address: '$address'}, function(results, status) {
              if (status == google.maps.GeocoderStatus.OK){
                var mapOptions = {
                  draggable: jQuery(document).width() > 480 && draggable == true ? true : false,
                  center: results[0].geometry.location,
                  zoom: $zoom,
                  mapTypeId: google.maps.MapTypeId.ROADMAP,
                  scrollwheel: false,
                  disableDefaultUI: disabled,
                  disableDoubleClickZoom: disabled,
                  styles: $theme
                }

                var map = new google.maps.Map(document.getElementById('$mapId'), mapOptions)
                var marker = new google.maps.Marker({
                    map: map,
                    position: results[0].geometry.location
                })

                setTimeout(function(){  google.maps.event.trigger(map, "resize") }, 500)
              }

            })
        }
      }, 500)
    </script>
EOT;
//the above line MUST be UNINDENTED

  return $map;
}

function  settings_page() {
  include "file:///C|/Users/16126/Desktop/gmaps-options.php";
}

function tcd_maps_plugin_setup_menu(){
  add_menu_page('TCD Google Maps', 'TCD Google Maps', 'manage_options', 'tcd-google-maps', 'settings_page');
}

add_filter('widget_text', 'do_shortcode');
add_shortcode( 'map', 'tcd_map_shortcode' );
add_action('admin_menu', 'tcd_maps_plugin_setup_menu');

?>


追記、
他のMapのプラグインも試していますが、下記理由から本プラグインで実現できたらと考えております。
・デザインが豊富であること
・ショートコードの中に直接住所が表示されること
※カスタムフィードとの組み合わせで入力欄に住所を入力するだけで地図を表示させるようにしたい
どうかJavascriptに造詣の深い方がいらっしゃいましたらお知恵を御貸し頂けると幸いです。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+3

『TCG Google Maps』がどこで入手できるのか分かりませんが、アップデートしたら上書きされて元に戻るので、配布されているプラグインなら手を加えるのは避けた方が良いと思いますが。
そのプラグインに拘るわけでないならば他の物を検討してはいかがですか?

Google Maps Easy
https://wordpress.org/plugins/google-maps-easy/
複数の地図を同一のページに表示できます。

追記
プラグインはコレでしょうか?
TCD Google Maps
https://ja.wordpress.org/plugins/tcd-google-maps/
もしそうなら正しい名称を書いてください。

こういうことでしょうかね。
そのまま全部貼りました。
https://pastebin.com/CsXP8N5W

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/12/26 18:27

    Google Maps Easy、使い勝手がよさそうですね!ご教示ありがとうございます。
    仰る通り手を加えるのは避けるべきと思います・・・。現在は他のプラグインで表示させているのですが、気に入ったスタイルを使える事とJavascriptの勉強としてこのプラグインの修正にトライしている次第です。

    キャンセル

  • 2017/12/26 18:43

    ↑の背景を質問文に記載しておらず申し訳ありません。
    お教え頂いたマップを使ってみました。アイコンまで変えれて非常に気に入りました!
    Javascriptの勉強はまた腰を据えてゆっくり基礎を学んで取り組みます。
    ご回答ありがとうございました!

    キャンセル

  • 2017/12/26 19:50

    住所が記載されたショートコードが必要でした、、、質問再度受付中に致します。
    ご無礼お許し下さい。。
    マップのプラグインとしてはお教え頂いたものが一番気に入りました。
    今後使わせて頂きます!ありがとうございます。

    キャンセル

  • 2017/12/27 01:09

    誤記見落としておりました。申し訳ありません。
    記載頂いた位置でエラー表示消えました!!
    ありがとうございます。不躾な質問にも真摯にお答えいただき感謝致します。
    無知すぎて恐縮なのですが、、もしよろしければ
    どう考えてその位置に挿入されたかお教えいただけませんか。お願いいたします

    キャンセル

  • 2017/12/27 11:22

    あ、よく見たら条件分岐は要りますね。

    なので
    $script = "<script src='https://maps.googleapis.com/maps/api/js$api' async defer></script>";
    } else {
    $script = "";
    }
    $obj = TcdCount::getInstance();
    if($obj->count() > 1) {
    $script = "";
    }
    こうしておいた方がいいです。

    なぜその位置なのか。
    $scriptを定義しているのがそこであり、その下で$scriptが$mapに入れられているので、その間で判定しないと駄目だと思ったからです。

    キャンセル

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

  • ただいまの回答率 90.84%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • PHP

    18229questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • WordPress

    6219questions

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