オ-プンストリ-トマップを使い、Wordpressのサイト上にマップを表示していましたが、SSLを導入し、URLがhttps:になったとたんにマップが表示されなくなりました。

原因をググったところ、SSLサイトにhttpのコンテンツは埋め込めない、ということのようでした。
さらにググってみると、過去質問に同様の問題をかかえてらっしゃる方がいて、しかも解決できたとのことで参考にしています。
http://q.hatena.ne.jp/1360288279

が、回答の、更にコメントまで読むと詳しい方法が記載されているのですが、その解決のための方法が古くなっているようで同じ解決策がとれないでいます。
(ファイルをダウンロ-ドしてきて解凍しても、フォルダに「lib」というディレクトリがありませんし、Bing.jsも見当たりません)

この問題の解決方法を教えていただけませんでしょうか。
もちろん他の解決方法でも構いません。
よろしくお願いいたします。

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2017/05/18 00:01:00
  • 終了:2017/05/18 12:39:08
id:ykhpno1

ちなみにマップはこんな感じで表示させていました。
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>

ベストアンサー

id:a-kuma3 No.1

a-kuma3回答回数4523ベストアンサー獲得回数18802017/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://web.archive.org/web/20160606011821im_/http://trac.osgeo.org/openlayers/chrome/common/extlink.gif 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)でもメンテはされているようです(約一名?)。

ふーむ (´・ω・`)

他10件のコメントを見る
id:ykhpno1

マップは表示されませんが、思っているような動作になりました。
ご指摘の通り、やはりカテゴリ-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>

ありがとうございます。

2017/05/27 02:44:04
id:ykhpno1

あれから教えていただいた通りのことをやってみると、マップが表示されました!!
ありがとうございます。

マ-カ-のみが表示されない状態でして、「??」となっております。


上記の入力フォ-ムに対して、以下のような処理でマ-カ-を生成していると思うのですが、表示されないのです

>||

// マーカーとツールチップを、店舗情報毎に設定するための 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);
},
});

||<

フム~。。

あと一押し、ヒントをいただけないでしょうか。

2017/05/27 04:18:21

その他の回答(0件)

id:a-kuma3 No.1

a-kuma3回答回数4523ベストアンサー獲得回数18802017/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://web.archive.org/web/20160606011821im_/http://trac.osgeo.org/openlayers/chrome/common/extlink.gif 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)でもメンテはされているようです(約一名?)。

ふーむ (´・ω・`)

他10件のコメントを見る
id:ykhpno1

マップは表示されませんが、思っているような動作になりました。
ご指摘の通り、やはりカテゴリ-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>

ありがとうございます。

2017/05/27 02:44:04
id:ykhpno1

あれから教えていただいた通りのことをやってみると、マップが表示されました!!
ありがとうございます。

マ-カ-のみが表示されない状態でして、「??」となっております。


上記の入力フォ-ムに対して、以下のような処理でマ-カ-を生成していると思うのですが、表示されないのです

>||

// マーカーとツールチップを、店舗情報毎に設定するための 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);
},
});

||<

フム~。。

あと一押し、ヒントをいただけないでしょうか。

2017/05/27 04:18:21

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません