• はてなアカウントでログイン
• 無料ユーザー登録

ベストアンサー

• a-kuma32017/05/18 10:59:47

  満足100pt

  これと同じ状況のような気がします。
  ブラウザのコンソールには、こんな感じのエラーが出てます？

  The page at https://domain.com/rwd/#/customer-plot/234 displayed insecure content from http://b.tile.openstreetmap.org/14/8743/5624.png.

  
  

  補足にあるコードだと、

      // 地図
      var map = new OpenLayers.Map("map", {
          layers: [
              new OpenLayers.Layer.OSM()
          ],
          center: pos,
          zoom: 17,
      });
  

  の部分を、以下のような感じにすると、とりあえず地図は表示されるんじゃないでしょうか。

      // 地図
      var map = new OpenLayers.Map("map", {
          layers: [
              new OpenLayers.Layer.OSM(
                  "OpenStreetMap", 
                  // Official OSM tileset as protocol-independent URLs
                  [
                      '//a.tile.openstreetmap.org/${z}/${x}/${y}.png',
                      '//b.tile.openstreetmap.org/${z}/${x}/${y}.png',
                      '//c.tile.openstreetmap.org/${z}/${x}/${y}.png'
                  ], 
                  null
              )
          ],
          center: pos,
          zoom: 17,
      });
  

  
  

  後、マーカーの画像が http から取得しているので、こちらも https で取得できる画像の URL に変更する必要があります。
  
  http://openlayers.org/api/OpenLayers.js を眺めてても、http に依存しているところが他にもあるようなので、すんなりとはいかないかもしれません（使ってない機能であれば、そのままにしておいても良いのですが）。
  
  
  
  別の質問の fiwa さんの回答も、ぼくの以前の回答も、OpenLayers 2 を対象にしたものです。

  OpenLayers 2 is outdated. Go to the latest 3.x version: http://openlayers.org/

  Documentation ? OpenLayers 2

  もう OpenLayers 2 は古臭いので、3 を使え、と（公式ではありませんが）。
  ＃ このページも、すでに消えてしまっています
  
  openlayers の GitHub を見ると、今年の 1 月には「3」の文字を消されてますし、2月には v3.21ではなく v4.0 になっています。
  https://github.com/openlayers/openlayers/commit/7424ee91e3e790d5a3ad84ad0a19588e60091c7b
  
  一応、公式には OpenLayers 2 の情報も http://openlayers.org/two/ にありますし、GitHub（https://github.com/openlayers/ol2）でもメンテはされているようです（約一名？）。
  
  ふーむ　(´・ω・｀)

  スター

  • 

    21件のコメントを見る

  • mocchi 2017/05/18 12:50:56

    一発で表示されました！
    ありがとうございます。
    本当に助かりました。
    最初、いただいたコ－ドに置き換えても地図は表示されなかったのですが、ブラウザのキャッシュを消し、読み込み直したら表示されていました！
    ありがとうございました。
    
    本当にいつもお世話さまです。
    毎回助けていただき感謝しております。

    スター

  • mocchi 2017/05/25 21:19:38

    先日はありがとうございました。
    いただいた情報を元に今度は、以前にご尽力いただいた検証サイトの大きいマップの方もＳＳＬサイトに組み込もうとしております。が、やはり苦戦しておりまして、どのあたりがダメなのかわからず、このまま引き続いて質問させていただけませんでしょうか。
    （ポイントは直接のお支払いとさせていただきます）
    
    もともとのコ－ドは以下の通りで、検証サイトの方では問題なく動いております。
    

    
    
    <?php
        if (have_posts()) {
            while (have_posts()) {
                the_post();
                get_template_part('content', 'page');
            }
        }
    ?>
    
    
    
    <br><br>
    
    <?php
    $place = $_POST['place'];
    $cc = $_POST['cc'];
    if ($cc) {
        foreach ($cc as $v) {
            $cc_stat[$v] = 'checked';
        }
    }
    ?>
    
    <style>
    form label {
        margin-right: 2ex;
    }
    </style>
    <form action="" method="post">
        検索したい地域　<input type="text" name="place" value="<?php echo $place ?>">
        <!-- カテゴリーの指定 -->
        <label><input type="checkbox" name="cc[]" value="2" <?php echo $cc_stat[2] ?>>飲食             </label>
        <label><input type="checkbox" name="cc[]" value="3" <?php echo $cc_stat[3] ?>>家関係           </label>
        <label><input type="checkbox" name="cc[]" value="4" <?php echo $cc_stat[4] ?>>ファッション関係 </label>
        <label><input type="checkbox" name="cc[]" value="5" <?php echo $cc_stat[5] ?>>ペット関係       </label>
        <br>
        <input type="submit" name="send" value="検索">
    </form>
    
    
    <script type="text/javascript" src="http://www.openlayers.org/api/OpenLayers.js"></script>
    
    <?php
    if ($place):
    
        $args = Array(
            'post_type' => 'post',
            'posts_per_page' => -1,
            'meta_query' => array(array(
                'key' => 'address',
                'value' => $place,
                'compare' => 'LIKE'
            ))
        );
    
        // カテゴリーのどれかにチェックが入っていたら、検索条件を追加する
        $cc = $_POST['cc'];
        if (sizeof($cc) > 0) {
            $args['category__in'] = $cc;
        }
    
        $the_query = new WP_Query($args);
    
        if ($the_query->have_posts()):
    ?>
    <div id="map" style="width: 99%; height: 650px;"></div>
    <script type="text/javascript">
    (function() {   // ★ こんなので、くるんでみる
    
        var posts = [];
    <?php while ($the_query->have_posts()) :
        $the_query->the_post();
        $googlemap = get_field('lat');
        if (! $googlemap) {   // マップ住所が登録されていないこともある
            continue;
        }
        $category = get_the_category();
    ?>
        posts.push({
            lat: '<?php echo post_custom("lat")?>',
            lng: '<?php echo post_custom("lon")?>',
            name: '<?php echo post_custom("Name")?>',
            link: '<?php the_permalink();?>',
            title: '<?php the_title(); ?>',
            cat_id: '<?php echo $category[0]->category_nicename; ?>'
        });
    <?php endwhile; // End the loop. Whew. ?>
    
    // ★ これ以降、OpenLayers API を使うように、ばっさりと書き換え
        var map;
        var select;
    
        function display_map() {
    
            // マーカーとツールチップを、店舗情報毎に設定するための overlay
            var overlay = new OpenLayers.Layer.Vector('Overlay', {
                styleMap: new OpenLayers.StyleMap({
                    externalGraphic: '${marker_image}',
                    graphicWidth: 21,
                    graphicHeight: 25,
                    graphicYOffset: -25,
                    cursor: "pointer",
                    title: '${tooltip}',
                })
            });
    
    
            var icon_map = {
                2: "http://dev.openlayers.org/img/marker.png",
                3: "http://dev.openlayers.org/img/marker-blue.png",
                4: "http://dev.openlayers.org/img/marker-gold.png",
                5: "http://dev.openlayers.org/img/marker-green.png",
            };
    
            var epsg4326 = new OpenLayers.Projection("EPSG:4326");
            var epsg3857 = new OpenLayers.Projection("EPSG:3857");
    
            // マーカーの生成
            var features = [];
            for (var i in posts) {
                var post = posts[i];
                features.push(new OpenLayers.Feature.Vector(
                        new OpenLayers.Geometry.Point(post.lng, post.lat)
                        .transform(epsg4326, epsg3857), {
                            tooltip: post.title,
                            marker_image: icon_map[ post.cat_id ],
                            post: post,
                        }
                ));
            }
    
            overlay.addFeatures(features);
    
            overlay.events.on({
                'featureclick': function(evt) {
                    toggle_popup(evt.feature);
                },
            });
    
            // マップの生成
            map = new OpenLayers.Map("map");
    
            map.addLayers([new OpenLayers.Layer.OSM(), overlay]);
    
            // マーカーのクリック状態を取得するために、SelectFeature なるものを作る
            select = new OpenLayers.Control.SelectFeature(overlay);
            map.addControl(select);
            select.activate();
    
            // マーカーが含まれる範囲の Bounds と、それに合わせたズーミング
            var bounds = new OpenLayers.Bounds();
            for (var i in posts) {
                bounds.extend(new OpenLayers.LonLat(posts[i].lng, posts[i].lat));
            }
            bounds.transform(epsg4326, epsg3857);
            map.zoomToExtent(bounds);
    
            // ズームの最大値は 16 まで
            if (map.getZoom() > 16) {
                map.zoomTo(16);
            }
        }
    
        // 吹き出しの「×」を押したときの処理
        function close_popup(evt) {
            toggle_popup(this.feature);
        }
    
        // マーカーをクリックしたときに吹き出しの表示を切り替える
        function toggle_popup(feature) {
            if (! feature.popup) {
                var post = feature.attributes.post;
                var content = '<div>' + post.name + '：' + '<a href="' + post.link + '" target="_blank">' + post.title + '</a></div>';
    
                var popup = new OpenLayers.Popup.FramedCloud("featurePopup",
                                    feature.geometry.getBounds().getCenterLonLat(),
                                    new OpenLayers.Size(100, 100),
                                    content,
                                    null, true, close_popup);
                popup.calculateRelativePosition = function() { return "bl"; };
                feature.popup = popup;
                popup.feature = feature;
                map.addPopup(popup);
            } else {
                var popup = feature.popup;
    //          popup.feature = null;
                map.removePopup(feature.popup);
                feature.popup.destroy();
                feature.popup = null;
            }
        }
    
    
        // ページの読み込みが終わったら、地図表示の処理を行う
        window.addEventListener("DOMContentLoaded", display_map);
    
    })();
    </script>
    
        <?php else: ?>
        該当する店舗はありませんでした。
        <?php endif; ?>
    
    <?php else: ?>
    地域を入力してください。
    <?php endif; ?>
    
    <!-- ★ スタイルの調整 -->
    <style>
    /* 地図領域と地図のサイズが合わないとき : Google Maps は API が設定する */
    #map {
        position: relative;
        overflow: hidden;
    }
    /* style.css の指定が影響して、吹き出しが正しく表示されない */
    #map .olPopup img {
        max-width: none;
    }
    </style>
    
    

    スター

  • mocchi 2017/05/25 21:20:19

    
    

    今回教えていただいたことを踏まえて、上記のコ－ドを改変し、ＳＳＬペ－ジに対応させたつもりのものが以下となりまして、問題の箇所をakuma3さんにご指摘いただきたく、よろしくお願いします。

    
    <?php
    $place = $_POST['place'];
    $cc = $_POST['cc'];
    if ($cc) {
        foreach ($cc as $v) {
            $cc_stat[$v] = 'checked';
        }
    }
    ?>
    
    <style>
    form label {
        margin-right: 2ex;
    }
    </style>
    <form action="" method="post">
        検索したい地域　<input type="text" name="place" value="<?php echo $place ?>">
        <!-- カテゴリーの指定 -->
        <label><input type="checkbox" name="cc[]" value="2" <?php echo $cc_stat[2] ?>>飲食             </label>
        <label><input type="checkbox" name="cc[]" value="3" <?php echo $cc_stat[3] ?>>家関係           </label>
        <label><input type="checkbox" name="cc[]" value="4" <?php echo $cc_stat[4] ?>>ファッション関係 </label>
        <label><input type="checkbox" name="cc[]" value="5" <?php echo $cc_stat[5] ?>>ペット関係       </label>
        <br>
        <input type="submit" name="send" value="検索">
    </form>
    
    
    
    
    <script type="text/javascript" src="https://openlayers.org/api/2.13.1/OpenLayers.js"></script>
    
    <?php
    if ($place):
    
        $args = Array(
            'post_type' => 'post',
            'posts_per_page' => -1,
            'meta_query' => array(array(
                'key' => 'address',
                'value' => $place,
                'compare' => 'LIKE'
            ))
        );
    
        // カテゴリーのどれかにチェックが入っていたら、検索条件を追加する
        $cc = $_POST['cc'];
        if (sizeof($cc) > 0) {
            $args['category__in'] = $cc;
        }
    
        $the_query = new WP_Query($args);
    
        if ($the_query->have_posts()):
    ?>
    <div id="map" style="width: 99%; height: 650px;"></div>
    <script type="text/javascript">
    (function() {   // ★ こんなので、くるんでみる
    
        var posts = [];
    <?php while ($the_query->have_posts()) :
        $the_query->the_post();
        $googlemap = get_field('lat');
        if (! $googlemap) {   // マップ住所が登録されていないこともある
            continue;
        }
        $category = get_the_category();
    ?>
        posts.push({
            lat: '<?php echo post_custom("lat")?>',
            lng: '<?php echo post_custom("lon")?>',
            name: '<?php echo post_custom("Name")?>',
            link: '<?php the_permalink();?>',
            title: '<?php the_title(); ?>',
            cat_id: '<?php echo $category[0]->category_nicename; ?>'
        });
    <?php endwhile; // End the loop. Whew. ?>
    
    // ★ これ以降、OpenLayers API を使うように、ばっさりと書き換え
        var map;
        var select;
    
        function display_map() {
    
            // マーカーとツールチップを、店舗情報毎に設定するための overlay
            var overlay = new OpenLayers.Layer.Vector('Overlay', {
                styleMap: new OpenLayers.StyleMap({
                    externalGraphic: '${marker_image}',
                    graphicWidth: 21,
                    graphicHeight: 25,
                    graphicYOffset: -25,
                    cursor: "pointer",
                    title: '${tooltip}',
                })
            });
    
    
            var icon_map = {
                2: "https://hogehoge.com/images/2.png",
                3: "https://hogehoge.com/images/3.png",
                4: "https://hogehoge.com/images/4.png",
                5: "https://hogehoge.com/images/5.png",
            };
    
            var epsg4326 = new OpenLayers.Projection("EPSG:4326");
            var epsg3857 = new OpenLayers.Projection("EPSG:3857");
    
            // マーカーの生成
            var features = [];
            for (var i in posts) {
                var post = posts[i];
                features.push(new OpenLayers.Feature.Vector(
                        new OpenLayers.Geometry.Point(post.lng, post.lat)
                        .transform(epsg4326, epsg3857), {
                            tooltip: post.title,
                            marker_image: icon_map[ post.cat_id ],
                            post: post,
                        }
                ));
            }
    
            overlay.addFeatures(features);
    
            overlay.events.on({
                'featureclick': function(evt) {
                    toggle_popup(evt.feature);
                },
            });
    
            // マップの生成
            var map = new OpenLayers.Map("map", {
            layers: [
                new OpenLayers.Layer.OSM(
                    "OpenStreetMap", 
                    // Official OSM tileset as protocol-independent URLs
                    [
                        '//a.tile.openstreetmap.org/${z}/${x}/${y}.png',
                        '//b.tile.openstreetmap.org/${z}/${x}/${y}.png',
                        '//c.tile.openstreetmap.org/${z}/${x}/${y}.png'
                    ], 
                    null
                )
            ],
            center: pos,
            zoom: 17,
        });
            
    
            // マーカーのクリック状態を取得するために、SelectFeature なるものを作る
            select = new OpenLayers.Control.SelectFeature(overlay);
            map.addControl(select);
            select.activate();
    
            // マーカーが含まれる範囲の Bounds と、それに合わせたズーミング
            var bounds = new OpenLayers.Bounds();
            for (var i in posts) {
                bounds.extend(new OpenLayers.LonLat(posts[i].lng, posts[i].lat));
            }
            bounds.transform(epsg4326, epsg3857);
            map.zoomToExtent(bounds);
    
            // ズームの最大値は 16 まで
            if (map.getZoom() > 16) {
                map.zoomTo(16);
            }
        }
    
        // 吹き出しの「×」を押したときの処理
        function close_popup(evt) {
            toggle_popup(this.feature);
        }
    
        // マーカーをクリックしたときに吹き出しの表示を切り替える
        function toggle_popup(feature) {
            if (! feature.popup) {
                var post = feature.attributes.post;
                var content = '<div>' + post.name + '：' + '<a href="' + post.link + '" target="_blank">' + post.title + '</a></div>';
    
                var popup = new OpenLayers.Popup.FramedCloud("featurePopup",
                                    feature.geometry.getBounds().getCenterLonLat(),
                                    new OpenLayers.Size(100, 100),
                                    content,
                                    null, true, close_popup);
                popup.calculateRelativePosition = function() { return "bl"; };
                feature.popup = popup;
                popup.feature = feature;
                map.addPopup(popup);
            } else {
                var popup = feature.popup;
    //          popup.feature = null;
                map.removePopup(feature.popup);
                feature.popup.destroy();
                feature.popup = null;
            }
        }
    
    
        // ページの読み込みが終わったら、地図表示の処理を行う
        window.addEventListener("DOMContentLoaded", display_map);
    
    })();
    </script>
    
        <?php else: ?>
        該当する店舗はありませんでした。
        <?php endif; ?>
    
    <?php else: ?>
    地域を入力してください。
    <?php endif; ?>
    
    <!-- ★ スタイルの調整 -->
    <style>
    /* 地図領域と地図のサイズが合わないとき : Google Maps は API が設定する */
    #map {
        position: relative;
        overflow: hidden;
    }
    /* style.css の指定が影響して、吹き出しが正しく表示されない */
    #map .olPopup img {
        max-width: none;
    }
    </style>
    
    

    
    

    入力フォ－ムに条件を入力し、それに合致しているものがあればマップが表示され、マ－カ－が現れるはずなのですが、条件が合致していたとしてもマップが現れず「該当する店舗はありませんでした。」と表示されてしまいます。
    どこがマズいのかわからず、あれから考え込んでおりまして、ご指摘いただければ嬉しいです。
    よろしくお願いいたします。

    スター

  • a-kuma3 2017/05/26 01:00:50

    条件が合致していたとしてもマップが現れず「該当する店舗はありませんでした。」と表示されてしまいます。

    これは、今回の質問の回答とは関係ないところに問題があるのだと思います。
    php の方の大枠は、こういう構造になってます。

    <?php
    $place = $_POST['place'];
        ...
        ここで、検索フォーム
    ?>
    <?php
    if ($place):
        ...
    
        $the_query = new WP_Query($args);
    
        if ($the_query->have_posts()):      // ★ここの判定が false (偽) だから
            ...
    
        <?php else: ?>
        該当する店舗はありませんでした。    // ★これが表示されている
        <?php endif; ?>
    
    <?php else: ?>
    地域を入力してください。
    <?php endif; ?>
    ?>
    

    この質問では、javascript のレベルで SSL に対応していないところがある、というところに原因がありましたが、こちらの方は php のレベルで、期待したところを通っていないところに問題がありそうです。
    
    ちなみに、この質問の回答を取り込んだところにも問題はありそうですが、「マーカーをクリックしても、吹き出しが表示されない」というような挙動になるので、まずは「該当する店舗がありませんでした」の方の問題を解決してから考えた方が良いと思います。
    
    
    ちなみに、現在のぼくのIDでは、ポイント付きメッセージが受け取れない状態になっているようなので、ポイントのことはお気になさらずに。

    スター

  • mocchi 2017/05/26 18:52:57

    コメントありがとうございます。
    テスト環境で問題はないものの、本番環境（SSLサイト）に持ってきたときにはpost（投稿）の条件が違うから、期待したところを通らない、という理解でいいものでしょうか。
    であれば、本番環境の方をテスト環境に一致させる、という手で解決していこうと思います。
    さすがにこのコ－ドをいじることはできずにいます。
    おっしゃる通り、「該当する店舗がありませんでした」問題の解決が優先ですね。
    うむ～。

    スター

  • a-kuma3 2017/05/26 18:58:01

    本番環境を見ていないので、確実なことは言えませんが、コメントで書かれた状況は「SSL だと地図が表示されない」とは別の問題のように思います。

    スター

  • mocchi 2017/05/26 20:11:52

    テスト環境と本番環境を全く揃えてテストを行っています。
    条件が合致しないときは「該当する店舗がありませんでした」が表示されますが、条件が合う店舗があった場合、画面にマップを読み込んでいるような挙動になります（白い画面ですが）。
    カテゴリ－もカテゴリ－スラッグもまったく同じものにして、テストを行ったところ、どうもカテゴリ－が動いているものがあるらしいのです。
    例えばファッションカテゴリ－は大丈夫なのですが、飲食で登録しているはずの店舗がペット関係にチェックを入れた時に表示され（たような挙動になり）ます。飲食と家カテゴリ－が効かない感じです。
    
    カテゴリ－はカテゴリ－ＩＤではなくスラッグで取得しているはずなので首をかしげています。
    飲食と家カテゴリ－に登録してある店舗はどこにチェックをいれても表示されませんが、どこにもチェックを入れずに検索するとマップが読み込まれるような動作をしますので、やはりネックはカテゴリ－の移動？だと今のところ断定しております。
    
    それにしてもすぐにお返事がいただけ、すごく心強いです。
    これさえ完成すればしたかったことが完成するのでワクワクしつつテストしています。

    スター

  • mocchi 2017/05/26 20:14:33

    ちなみに、本番環境のコ－ドを以下にコピペします（ＳＳＬ対応は二の次にするとして、いったん仮サイトのものを丸コピペしてる状態です）。
    

    
    <?php
    /*
    Template Name: map
     */
    ?>
    <?php get_header(); ?>
    
    
    <div id="content">
    <div id="inner-content" class="wrap cf">
    <main id="main" class="m-all t-all d-5of7 cf" role="main">
    
    
    
    <!--＊＊＊＊＊＊＊＊＊＊＊＊＊　テンプレ－ト編集スタ－ト　＊＊＊＊＊＊＊＊＊＊＊＊＊-->
    
    
    
    <?php
        if (have_posts()) {
            while (have_posts()) {
                the_post();
                get_template_part('content', 'page');
            }
        }
    ?>
    
    
    
    <br><br>
    
    <?php
    $place = $_POST['place'];
    $cc = $_POST['cc'];
    if ($cc) {
        foreach ($cc as $v) {
            $cc_stat[$v] = 'checked';
        }
    }
    ?>
    
    <style>
    form label {
        margin-right: 2ex;
    }
    </style>
    <form action="" method="post">
        検索したい地域　<input type="text" name="place" value="<?php echo $place ?>">
        <!-- カテゴリーの指定 -->
        <label><input type="checkbox" name="cc[]" value="2" <?php echo $cc_stat[2] ?>>飲食             </label>
        <label><input type="checkbox" name="cc[]" value="3" <?php echo $cc_stat[3] ?>>家関係           </label>
        <label><input type="checkbox" name="cc[]" value="4" <?php echo $cc_stat[4] ?>>ファッション関係 </label>
        <label><input type="checkbox" name="cc[]" value="5" <?php echo $cc_stat[5] ?>>ペット関係       </label>
        <br>
        <input type="submit" name="send" value="検索">
    </form>
    
    
    <script type="text/javascript" src="http://www.openlayers.org/api/OpenLayers.js"></script>
    
    <?php
    if ($place):
    
        $args = Array(
            'post_type' => 'post',
            'posts_per_page' => -1,
            'meta_query' => array(array(
                'key' => 'address',
                'value' => $place,
                'compare' => 'LIKE'
            ))
        );
    
        // カテゴリーのどれかにチェックが入っていたら、検索条件を追加する
        $cc = $_POST['cc'];
        if (sizeof($cc) > 0) {
            $args['category__in'] = $cc;
        }
    
        $the_query = new WP_Query($args);
    
        if ($the_query->have_posts()):
    ?>
    <div id="map" style="width: 99%; height: 650px;"></div>
    <script type="text/javascript">
    (function() {   // ★ こんなので、くるんでみる
    
        var posts = [];
    <?php while ($the_query->have_posts()) :
        $the_query->the_post();
        $googlemap = get_field('lat');
        if (! $googlemap) {   // マップ住所が登録されていないこともある
            continue;
        }
        $category = get_the_category();
    ?>
        posts.push({
            lat: '<?php echo post_custom("lat")?>',
            lng: '<?php echo post_custom("lon")?>',
            name: '<?php echo post_custom("Name")?>',
            link: '<?php the_permalink();?>',
            title: '<?php the_title(); ?>',
            cat_id: '<?php echo $category[0]->category_nicename; ?>'
        });
    <?php endwhile; // End the loop. Whew. ?>
    
    // ★ これ以降、OpenLayers API を使うように、ばっさりと書き換え
        var map;
        var select;
    
        function display_map() {
    
            // マーカーとツールチップを、店舗情報毎に設定するための overlay
            var overlay = new OpenLayers.Layer.Vector('Overlay', {
                styleMap: new OpenLayers.StyleMap({
                    externalGraphic: '${marker_image}',
                    graphicWidth: 21,
                    graphicHeight: 25,
                    graphicYOffset: -25,
                    cursor: "pointer",
                    title: '${tooltip}',
                })
            });
    
    
            var icon_map = {
                1: "http://dev.openlayers.org/img/marker.png",
                2: "http://dev.openlayers.org/img/marker-green.png",
                3: "http://dev.openlayers.org/img/marker-blue.png",
                4: "http://dev.openlayers.org/img/marker-gold.png",
                5: "http://dev.openlayers.org/img/marker-green.png",
            };
    
            var epsg4326 = new OpenLayers.Projection("EPSG:4326");
            var epsg3857 = new OpenLayers.Projection("EPSG:3857");
    
            // マーカーの生成
            var features = [];
            for (var i in posts) {
                var post = posts[i];
                features.push(new OpenLayers.Feature.Vector(
                        new OpenLayers.Geometry.Point(post.lng, post.lat)
                        .transform(epsg4326, epsg3857), {
                            tooltip: post.title,
                            marker_image: icon_map[ post.cat_id ],
                            post: post,
                        }
                ));
            }
    
            overlay.addFeatures(features);
    
            overlay.events.on({
                'featureclick': function(evt) {
                    toggle_popup(evt.feature);
                },
            });
    
            // マップの生成
            map = new OpenLayers.Map("map");
    
            map.addLayers([new OpenLayers.Layer.OSM(), overlay]);
    
            // マーカーのクリック状態を取得するために、SelectFeature なるものを作る
            select = new OpenLayers.Control.SelectFeature(overlay);
            map.addControl(select);
            select.activate();
    
            // マーカーが含まれる範囲の Bounds と、それに合わせたズーミング
            var bounds = new OpenLayers.Bounds();
            for (var i in posts) {
                bounds.extend(new OpenLayers.LonLat(posts[i].lng, posts[i].lat));
            }
            bounds.transform(epsg4326, epsg3857);
            map.zoomToExtent(bounds);
    
            // ズームの最大値は 16 まで
            if (map.getZoom() > 16) {
                map.zoomTo(16);
            }
        }
    
        // 吹き出しの「×」を押したときの処理
        function close_popup(evt) {
            toggle_popup(this.feature);
        }
    
        // マーカーをクリックしたときに吹き出しの表示を切り替える
        function toggle_popup(feature) {
            if (! feature.popup) {
                var post = feature.attributes.post;
                var content = '<div>' + post.name + '：' + '<a href="' + post.link + '" target="_blank">' + post.title + '</a></div>';
    
                var popup = new OpenLayers.Popup.FramedCloud("featurePopup",
                                    feature.geometry.getBounds().getCenterLonLat(),
                                    new OpenLayers.Size(100, 100),
                                    content,
                                    null, true, close_popup);
                popup.calculateRelativePosition = function() { return "bl"; };
                feature.popup = popup;
                popup.feature = feature;
                map.addPopup(popup);
            } else {
                var popup = feature.popup;
    //          popup.feature = null;
                map.removePopup(feature.popup);
                feature.popup.destroy();
                feature.popup = null;
            }
        }
    
    
        // ページの読み込みが終わったら、地図表示の処理を行う
        window.addEventListener("DOMContentLoaded", display_map);
    
    })();
    </script>
    
        <?php else: ?>
        該当する店舗はありませんでした。
        <?php endif; ?>
    
    <?php else: ?>
    地域を入力してください。
    <?php endif; ?>
    
    <!-- ★ スタイルの調整 -->
    <style>
    /* 地図領域と地図のサイズが合わないとき : Google Maps は API が設定する */
    #map {
        position: relative;
        overflow: hidden;
    }
    /* style.css の指定が影響して、吹き出しが正しく表示されない */
    #map .olPopup img {
        max-width: none;
    }
    </style>
    
    <!--＊＊＊＊＊＊＊＊＊＊＊＊＊　テンプレ－ト編集ここまで　＊＊＊＊＊＊＊＊＊＊＊＊＊-->
    
    
    
    
    
    </main>
    <?php get_sidebar(); ?>
    </div>
    </div>
    <?php get_footer(); ?>
    
    

    スター

  • a-kuma3 2017/05/26 23:00:20

    カテゴリ－はカテゴリ－ＩＤではなくスラッグで取得しているはずなので首をかしげています。

    この認識が間違っているのではないでしょうか。
    カテゴリーの検索条件を設定する部分は、

        // カテゴリーのどれかにチェックが入っていたら、検索条件を追加する
        $cc = $_POST['cc'];
        if (sizeof($cc) > 0) {
            $args['category__in'] = $cc;
        }
    
        $the_query = new WP_Query($args);
    

    で、WP_Query のマニュアルによれば、

    category__in (配列) - カテゴリー ID を使用します。

    とあります。

    スター

  • mocchi 2017/05/26 23:27:35

    ありがとうございます！
    そのあたりをちょっとふまえて見直してみます。
    光明が見えてきました。
    それというのもわざわざ調べてくださったお陰様です！

    スター

  • mocchi 2017/05/27 02:44:04

    マップは表示されませんが、思っているような動作になりました。
    ご指摘の通り、やはりカテゴリ－IDからひろっていました。
    以下のような感じで入力フォ－ムを変えることで、テスト環境と同じ形になりました。
    ありがとうございます。
    
    

    
    <form action="" method="post">
        検索したい地域　<input type="text" name="place" value="<?php echo $place ?>">
        <!-- カテゴリーの指定 -->
        <label><input type="checkbox" name="cc[]" value="5" <?php echo $cc_stat[2] ?>>飲食             </label>
        <label><input type="checkbox" name="cc[]" value="40" <?php echo $cc_stat[3] ?>>家関係           </label>
        <label><input type="checkbox" name="cc[]" value="4" <?php echo $cc_stat[4] ?>>ファッション関係 </label>
        <label><input type="checkbox" name="cc[]" value="61" <?php echo $cc_stat[5] ?>>ペット関係       </label>
        <br>
        <input type="submit" name="send" value="検索">
    </form>
    
    

    ありがとうございます。

    スター

  • mocchi 2017/05/27 04:18:21

    あれから教えていただいた通りのことをやってみると、マップが表示されました！！
    ありがとうございます。
    
    マ－カ－のみが表示されない状態でして、「？？」となっております。
    
    
    上記の入力フォ－ムに対して、以下のような処理でマ－カ－を生成していると思うのですが、表示されないのです
    
    >||
    
    // マーカーとツールチップを、店舗情報毎に設定するための overlay
    var overlay = new OpenLayers.Layer.Vector('Overlay', {
    styleMap: new OpenLayers.StyleMap({
    externalGraphic: '${marker_image}',
    graphicWidth: 21,
    graphicHeight: 25,
    graphicYOffset: -25,
    cursor: "pointer",
    title: '${tooltip}',
    })
    });
    
    var icon_map = {
    1: "https://hogehoge.com/images/1.png",
    2: "https://hogehoge.com/images/2.png",
    3: "https://hogehoge.com/images/3.png",
    4: "https://hogehoge.com/images/4.png",
    5: "https://hogehoge.com/images/5.png",
    
    };
    
    var epsg4326 = new OpenLayers.Projection("EPSG:4326");
    var epsg3857 = new OpenLayers.Projection("EPSG:3857");
    
    // マーカーの生成
    var features = [];
    for (var i in posts) {
    var post = posts[i];
    features.push(new OpenLayers.Feature.Vector(
    new OpenLayers.Geometry.Point(post.lng, post.lat)
    .transform(epsg4326, epsg3857), {
    tooltip: post.title,
    marker_image: icon_map[ post.cat_id ],
    post: post,
    }
    ));
    }
    
    overlay.addFeatures(features);
    
    overlay.events.on({
    'featureclick': function(evt) {
    toggle_popup(evt.feature);
    },
    });
    
    ||<
    
    フム～。。
    
    あと一押し、ヒントをいただけないでしょうか。

    スター

  • a-kuma3 2017/05/27 10:37:00

    このコメントのような感じにしているのだと思います。
    マーカーは、overlay という変数に追加しているのですが、その Layer が Map に追加されてないのがマーカーが表示されない原因です。
    元々、こうなっていたマップの生成のところを、

    <?php
        ...
            // マップの生成
            map = new OpenLayers.Map("map");
    
            map.addLayers([new OpenLayers.Layer.OSM(), overlay]);
    

    以下のようにしてみてください。

    <?php
        ...
            // マップの生成
            map = new OpenLayers.Map("map");
    
            map.addLayers([new OpenLayers.Layer.OSM(
                "OpenStreetMap", 
                // Official OSM tileset as protocol-independent URLs
                [
                    '//a.tile.openstreetmap.org/${z}/${x}/${y}.png',
                    '//b.tile.openstreetmap.org/${z}/${x}/${y}.png',
                    '//c.tile.openstreetmap.org/${z}/${x}/${y}.png'
                ], 
                null
            ), overlay]);
    

    スター

  • mocchi 2017/05/27 13:31:44

    表示できした！！
    ありがとうございます。これでできました！
    全て解決しました。
    a-kuma3さんがいらっしゃらなかったら私ではまったく遠く及ばないことでした。
    本当にありがとうございます。
    ポイントが送信できないのは一時的なことなのでしょうか。

    スター

  • a-kuma3 2017/05/27 13:37:31

    うしっ　（｀・ω・´）ｷﾘｯ
    

    ポイントが送信できないのは一時的なことなのでしょうか。

    ぼく自身がある状態を解除すれば送信可能になるだろうとは思います。
    それは、やろうと思えばできることではあるんですが、やるつもりはないのです。
    
    「表示できした！！」で十分です　:-)

    スター

  • mocchi 2017/05/27 13:50:11

    ありがとうございます。
    それにしても、と言わせていただきたくなるのですが、、それではせめて、解除されたときにはご一報いただけませんでしょうか。
    そこはなんとかグッと目をつぶって、お願いいたします。
    本当にありがとうございました。

    スター

  • mocchi 2017/05/29 02:07:24

    新たな質問でポイントをお渡しできる形がいいですね。
    次のような質問を新たにしようと思っているのですが、それが可能かどうかを教えていただけませんか。
    可能であればそのまま質問を登録させていただき、a-kuma3さんに回答をいただければ嬉しいです。
    下記のような感じで質問しようと思っています。
    
    ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
    
    現在、以下のコ－ドで、取得するpostを条件づけて表示しています。
    >|php|
    $args = Array(
    'post_type' => 'post',
    'posts_per_page' => -1,
    'meta_query' => array(array(
    'key' => 'address',
    'value' => $place,
    'compare' => 'LIKE'
    ),
    ||<
    
    
    
    この条件プラス、カスタムフィ－ルドで設定した値を使って、更に絞り込みをやってみまして、以下のコ－ドでそれは実現しました（カスタムフィ－ルドhogehogeに値があれば表示）。
    >|php|
    $args = Array(
    'post_type' => 'post',
    'posts_per_page' => -1,
    'meta_query' => array(array(
    'key' => 'address',
    'value' => $place,
    'compare' => 'LIKE'
    ),
    
    array(
    'key' => hogehoge",
    'value' => 'null',
    'compare' => '!='
    ),
    )
    );
    
    ||<
    
    ふと、投稿者（author）にカスタムフィ－ルドを設定している場合、そのメタ情報を保持しているpostだけを表示する、ということができないものかと思い、やってみるもののうまくいきません。
    レアなケ－スなのか、ググってもよくわかりませんでした。
    上記コ－ドのようにpostのカスタムフィ－ルドで絞り込むのではなく、投稿者（author）のカスタムフィ－ルドの値あるなしで絞り込むためのコ－ドを教えてください（AND）。
    よろしくお願いいたします。
    
    ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
    質問おわり
    
    
    author meta_queryとかを使ってやってみてるんですが苦戦しておりまして、これそもそもできるのか？という疑問が（笑）。
    これってできることでしょうか。
    できるのならば後学のため質問させていただきたいです。

    スター

  • mocchi 2017/05/29 02:07:58

    コ－ド表示モ－ドにならない。。

    スター

  • a-kuma3 2017/05/29 13:21:09

    やりたいことをイマイチ理解できていませんが、get_user_meta ですかね。

    • 関数リファレンス/get user meta - WordPress Codex 日本語版
    
    
    

    <?php
        echo "Hello, world.";
    

    さて、効いているかな...

    スター

  • mocchi 2017/05/29 15:53:02

    ええ、きっとレアケ－スなんだと思います（笑）。
    質問させていただくのは明日になると思います。
    よろしくお願いします。

    スター

  • a-kuma3 2017/05/29 16:11:57

    答えられるかどうかは、分かりませんよ。
    WordPress どっぷりなのは、rouge_2008 さん向きなような気もします　:-)

    スター

その他の回答

• mocchi

  2017/05/18 01:11:02

  ちなみにマップはこんな感じで表示させていました。

  http://の時はこれで表示できていたのですが、SSLを導入しhttps://になったとたんに表示しなくなりました。。

  
  <script type="text/javascript" src="http://www.openlayers.org/api/OpenLayers.js"></script>
  
  <div id="map" style="width: 80%; height: 400px;"></div>
  <script type="text/javascript">
  window.addEventListener("DOMContentLoaded", function() {
  
      // 緯度、経度
      var lat = 35.658581,
          lng = 139.745433;
  
      // 地図の中心位置
      var epsg4326 = new OpenLayers.Projection("EPSG:4326")
      var epsg3857 = new OpenLayers.Projection("EPSG:3857")
      var pos = new OpenLayers.LonLat(lng, lat).transform(epsg4326, epsg3857);
  
      // 地図
      var map = new OpenLayers.Map("map", {
          layers: [
              new OpenLayers.Layer.OSM()
          ],
          center: pos,
          zoom: 17,
      });
  
      // スケールライン
      map.addControl(new OpenLayers.Control.ScaleLine({bottomOutUnits: "", bottomInUnits: ""}));
  
      // マーカー
      var markers = new OpenLayers.Layer.Markers("Markers");
      map.addLayer(markers);
  
      var size = new OpenLayers.Size(21,25);
      var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
      var icon = new OpenLayers.Icon('http://dev.openlayers.org/img/marker.png', size, offset);
      var marker = new OpenLayers.Marker(pos, icon);
  
      markers.addMarker(marker);
  
  });
  </script>
  

この質問へのコメント

質問の情報

登録日時

2017-05-18 00:01:00

終了日時

2017-05-18 12:39:08

回答条件

1人5回まで

この質問のカテゴリ

• インターネット
• ウェブ制作

この質問に含まれるキーワード

人気の質問

• この英文どうなってますか？ The boy seemed to be waiting for his mother to come.（その少年は母親が来…匿名質問者111日前
• 不定詞の形容詞的用法らしいんですけど、副詞的用法と書いたら✖️ですか？ I want to buy a book to read …匿名質問者111日前
• 日向陽葵という○V女優が好きなのですが似ている○V女優はいますか匿名質問者14時間前
• 共通テストで使われるプログラミング言語は共通テスト特有の言語と聞いたのですが、受験勉強で身につけたプ…匿名質問者114時間前
• 内定してほしいポケモンはいますか？匿名質問者14時間前

メニュー

• 質問一覧
• カテゴリ一覧
• 無料ユーザー登録
• 人力検索はてなトップ

PC版

• お問い合わせ
• ヘルプ
• お知らせ
• はてなトップ