wordpressのプラグイン「TCD Google Maps」を
1ページにいくつも地図が表示できるように
こちらのサイトを参考に修正を試みているのですが、リンク先の問題点2として挙げられているJavascriptのエラーが直らず困っております。
javascriptが1回だけ読み込まれるようにしたいのですが
下記コードの1、2、は3のどこに入れればよいのでしょう、、
ファイルが読み込まれる前と思い
function tcd_script_enqueue()の前に1と2を挿入したのですがうまくいきません・・・
どうかお教えいただけませんでしょうか。。。宜しくお願い致します。。。
1、地図の出現数をカウントし1以上ならscriptタグを読み込まないようにする
php
1$obj = TcdCount::getInstance(); 2if($obj->count() > 1) { 3$script = ""; 4}
2、地図の出現数をカウントするシングルトンクラスを追加する
php
1class TcdCount { 2private static $uniqueInstance; 3private $count = 0; 4private function __construct() { 5} 6public static function getInstance() { 7if ( ! isset( static::$uniqueInstance ) ) { 8static::$uniqueInstance = new TcdCount(); 9} 10return static::$uniqueInstance; 11} 12public function count() { 13$this->count = $this->count + 1; 14return $this->count; 15} 16}
3、修正したいファイル
php
1<?php 2function tcd_script_enqueue() { 3 wp_enqueue_script('jquery-ui-core'); 4 wp_enqueue_script('jquery-ui-slider'); 5 6 wp_enqueue_script('google-maps', 'https://maps.googleapis.com/maps/api/js'); 7 wp_enqueue_script('angular', plugins_url('angular.js', __FILE__)); 8 wp_enqueue_script('angular-slider', plugins_url('angular-slider.js', __FILE__)); 9 10 wp_register_style('custom_wp_admin_css', plugins_url('admin.css', __FILE__), false, '1.0.0'); 11 wp_enqueue_style('custom_wp_admin_css'); 12 13 wp_register_style('jquery-ui', plugins_url('jquery-ui.css', __FILE__), false, '1.0.0'); 14 wp_enqueue_style('jquery-ui'); 15} 16 17add_action('admin_enqueue_scripts', 'tcd_script_enqueue'); 18 19 20 21 22 23load_plugin_textdomain( 'tcd-google-maps', false, basename( dirname( __FILE__ ) ) . '/languages' ); 24 25function tcd_add_google_js_css() { 26 // wp_enqueue_script('google-maps', 'https://maps.googleapis.com/maps/api/js'); 27 wp_enqueue_style('tcd-maps', plugins_url("admin.css", __FILE__)); 28} 29 30add_action('wp_enqueue_scripts', 'tcd_add_google_js_css'); 31 32function tcd_map_shortcode($opts){ 33 $mapId = (int)"map." + rand(100000, 999999); 34 35 $address = @$opts['address']; 36 $draggable = @$opts['draggable']; 37 $controls = @$opts['controls']; 38 $class = @$opts['class']; 39 40 if( isset($opts['style']) ){ 41 $style = $opts['style']; 42 } else { 43 $style = ''; 44 } 45 $width = @$opts['width']; 46 $zoom = ($opts['zoom'] ? $opts['zoom'] : '18'); 47 $height = ($opts['height'] ? $opts['height'] : '400px'); 48 $api = ($opts['api'] ? '?key=' . $opts['api'] : ''); 49 50 if( $opts['theme'] == "black" ){ 51 略} else { 52 $theme = '[]'; 53 } 54 55 56 if( 57 !wp_script_is( 'gmap', 'enqueued' ) && 58 !wp_script_is( 'gmaps', 'enqueued' ) && 59 !wp_script_is( 'g-map', 'enqueued' ) && 60 !wp_script_is( 'g-maps', 'enqueued' ) && 61 !wp_script_is( 'googlemap', 'enqueued' ) && 62 !wp_script_is( 'googlemaps', 'enqueued' ) && 63 !wp_script_is( 'google-map', 'enqueued' ) && 64 !wp_script_is( 'google-maps', 'enqueued' ) 65 ){ 66 $script = "<script src='https://maps.googleapis.com/maps/api/js$api' async defer></script>"; 67 } else { 68 $script = ""; 69 } 70 71 $map = <<<EOT 72 $script 73 74 <div id="$mapId" class="dp-google-map $class" style="height:$height; width:$width; $style"></div> 75 76<script type="text/javascript"> 77var loaded_$mapId = false 78setInterval(function(){ 79if( google && !loaded_$mapId ){ 80loaded_$mapId = true 81 82 // google.maps.event.addDomListener(window, 'load', function(){ 83 // }) 84 var disabled = $controls ? false : true 85 var draggable = $draggable 86 var geocoder = new google.maps.Geocoder(); 87 88 geocoder.geocode({address: '$address'}, function(results, status) { 89 if (status == google.maps.GeocoderStatus.OK){ 90 var mapOptions = { 91 draggable: jQuery(document).width() > 480 && draggable == true ? true : false, 92 center: results[0].geometry.location, 93 zoom: $zoom, 94 mapTypeId: google.maps.MapTypeId.ROADMAP, 95 scrollwheel: false, 96 disableDefaultUI: disabled, 97 disableDoubleClickZoom: disabled, 98 styles: $theme 99 } 100 101 var map = new google.maps.Map(document.getElementById('$mapId'), mapOptions) 102 var marker = new google.maps.Marker({ 103 map: map, 104 position: results[0].geometry.location 105 }) 106 107 setTimeout(function(){ google.maps.event.trigger(map, "resize") }, 500) 108 } 109 110 }) 111 } 112 }, 500) 113 </script> 114EOT; 115//the above line MUST be UNINDENTED 116 117 return $map; 118} 119 120function settings_page() { 121 include "file:///C|/Users/16126/Desktop/gmaps-options.php"; 122} 123 124function tcd_maps_plugin_setup_menu(){ 125 add_menu_page('TCD Google Maps', 'TCD Google Maps', 'manage_options', 'tcd-google-maps', 'settings_page'); 126} 127 128add_filter('widget_text', 'do_shortcode'); 129add_shortcode( 'map', 'tcd_map_shortcode' ); 130add_action('admin_menu', 'tcd_maps_plugin_setup_menu'); 131 132?> 133
追記、
他のMapのプラグインも試していますが、下記理由から本プラグインで実現できたらと考えております。
・デザインが豊富であること
・ショートコードの中に直接住所が表示されること
※カスタムフィードとの組み合わせで入力欄に住所を入力するだけで地図を表示させるようにしたい
どうかJavascriptに造詣の深い方がいらっしゃいましたらお知恵を御貸し頂けると幸いです。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2017/12/26 09:27
退会済みユーザー
2017/12/26 09:43
退会済みユーザー
2017/12/26 10:50
退会済みユーザー
2017/12/26 16:09
退会済みユーザー
2017/12/27 02:22