質問編集履歴
1
質問内容を変更
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
|
|
1
|
+
GoogleMapのiframe埋め込みでピンが表示されないので、表示させたい。
|
body
CHANGED
|
@@ -1,62 +1,26 @@
|
|
|
1
|
-
|
|
1
|
+
現在とある店舗のサイト作成をしているのですが、なぜがiframeの埋め込みでピンが表示されません。
|
|
2
|
-
＜エラー内容＞
|
|
3
|
-
|
|
2
|
+
既存のコードファイルのどこかに不具合があるのかもしれませんが、一から私が対応しているものでないため、そのような記述がどこにあるのか、そもそもAPIではなくiframeのMapピンを消すコードがあるのかも、調べた限りでは詳しいものは出てきませんでした。
|
|
4
3
|
|
|
4
|
+
今回はもともとGoogleMapAPIで地図を表示させて入りましたが、課金制なり、支払い設定をしていないためMapがエラー表示できちんと表示されていないので、急遽iframeの埋め込みで対応することになりました。
|
|
5
|
-
|
|
5
|
+
サイトに埋め込んでいるMapのコードは下記です。（PHPでCSVを書く店舗ごとに<?=urlencode($q)?>で読み取って表示させているため以下の記述のみ）
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
<
|
|
9
|
-
<
|
|
10
|
-
<script src="../../test/js/jquery.magnific-popup.min.js"></script>
|
|
11
|
-
```HTML
|
|
12
|
-
<div class="movie">
|
|
13
|
-
<div class="line"><hr><hr></div>
|
|
14
|
-
<h2>タイトル</h2>
|
|
15
|
-
<ul class="movie_box">
|
|
16
|
-
<li>
|
|
17
|
-
<div class="movie_list" data-mfp-src="https://www.youtube.com/embed/wHqGbkdIEao?rel=0&loop=1&playlist=wHqGbkdIEao">
|
|
18
|
-
<iframe class="popup-iframe" width="100%" src="https://www.youtube.com/embed/M7lc1UVf-VE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
|
|
19
|
-
</div>
|
|
20
|
-
<div class="text">
|
|
21
|
-
<h3>サブタイトル ♯1</h3>
|
|
22
|
-
<p>動画詳細</p>
|
|
23
|
-
</div>
|
|
24
|
-
</li>
|
|
25
|
-
<li>
|
|
26
|
-
<div class="movie_list" data-mfp-src="https://www.youtube.com/embed/lMuKvq_fG5Q?rel=0&loop=1&playlist=lMuKvq_fG5Q">
|
|
27
|
-
<iframe class="popup-iframe" width="100%" src="https://www.youtube.com/embed/M7lc1UVf-VE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
|
|
28
|
-
</div>
|
|
29
|
-
<div class="text">
|
|
30
|
-
<h3>サブタイトル ♯2</h3>
|
|
31
|
-
<p>動画詳細</p>
|
|
32
|
-
</div>
|
|
33
|
-
</li>
|
|
34
|
-
</ul>
|
|
35
|
-
</div><!--/movie-->
|
|
7
|
+
```PHP
|
|
8
|
+
<iframe src="https://www.google.com/maps/embed?pb=<?=urlencode($q)?>" width="350" height="216" frameborder="0" style="border:0;" allowfullscreen=""></iframe>
|
|
9
|
+
<p><a href="https://www.google.com/maps/place/?q=<?=urlencode($q)?>" target="_blank"><img src="images/btn_map.png" alt="大きな地図を見る（Google Map）" width="256" height="16"></a></p>
|
|
36
10
|
```
|
|
37
|
-
|
|
11
|
+
＜埋め込み手順＞
|
|
12
|
+
Googleで住所と店舗名を検索しピンポイントで地図を表示させ、共有ボタンから地図を埋め込む→サイズをカスタマイズで350*216へ変更しコピー→CSVファイルにsrc="https://www.google.com/maps/embed?pb=ここのみ貼り付け"→テストサーバーへアップし確認。
|
|
13
|
+
|
|
14
|
+
＜起きている現象＞
|
|
15
|
+
・埋め込んだ地図にピンが表示されない
|
|
16
|
+
・左上の拡大地図を表示で遷移してもピンが表示されない。
|
|
17
|
+
・同じiframeのULRで別のサイトで埋め込み（PHPで読み込みではなく単純にHTMLにそのまま貼り付け）で試してみると問題なく表示される。※ここが一番不思議です。ピンを消すJSが入っているのか、PHPでのCSV読み込みがダメなのか、、、？
|
|
18
|
+
|
|
19
|
+
＜改善したい症状＞
|
|
20
|
+
・埋め込んだ際に赤いピンを表示させたい。
|
|
21
|
+
・拡大表示した際にもピンを表示させたい。
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
どなたか解決策、もしくはiframeの埋め込みでピンを消す方法を知っていたら教えていただきたいです（こちらで同じようなことをしている可能性があるため）。詳しい内容を記載しているサイトでも大丈夫ですが、公式含め大抵見ました。
|
|
25
|
+
|
|
38
|
-
|
|
26
|
+
よろしくお願い致します。
|
|
39
|
-
position: relative;
|
|
40
|
-
}
|
|
41
|
-
.movie_list::after{
|
|
42
|
-
content: "";
|
|
43
|
-
display: block;
|
|
44
|
-
position: absolute;
|
|
45
|
-
width: 100%;
|
|
46
|
-
height: 100%;
|
|
47
|
-
top: 0;
|
|
48
|
-
```
|
|
49
|
-
```jQuery
|
|
50
|
-
<script>
|
|
51
|
-
$(function(){
|
|
52
|
-
$('.movie_list').magnificPopup({
|
|
53
|
-
type: 'iframe',
|
|
54
|
-
disableOn: 500, //ウィンドウ幅が500px以下だったらモーダル表示させずにリンク先へ遷移
|
|
55
|
-
mainClass: 'mfp-fade',
|
|
56
|
-
removalDelay: 200,
|
|
57
|
-
preloader: false,
|
|
58
|
-
fixedContentPos: false
|
|
59
|
-
});
|
|
60
|
-
});
|
|
61
|
-
</script>
|
|
62
|
-
```
|