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

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

新規登録して質問してみよう
ただいま回答率
85.50%
WordPress

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

PHP

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

5420閲覧

googlemapが描画されません

yukko

総合スコア21

WordPress

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

PHP

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2016/05/18 07:26

こちらの質問に関連したことなのですが、質問の内容が変わってしまったので改めてご教授願います。

下記のような表示をcategory-スラッグ.phpにしたいと思っております。
イメージ説明

WordPressとプラグインを使ってお店紹介サイトを作る方法というサイトが一番イメージに近いと思い、
ヘッダー.phpに下記を追加し

php

1<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

「category-スラッグ」に下記を入力しました。

php

1<div id="map" style="width: 550px; height: 620px;"></div> 2<script type="text/javascript"> 3 google.maps.event.addDomListener(window, 'load', function() { 4 var mapdiv = document.getElementById( 'map' ); 5 var myOptions = { 6 zoom: 15, 7 center: new google.maps.LatLng( 35.68971, 139.69168 ), 8 mapTypeId: google.maps.MapTypeId.ROADMAP, 9 scaleControl: true 10 }; 11 var map = new google.maps.Map( mapdiv, myOptions ); 12 13 var marker = []; 14 var infowindow = []; 15 16<?php $m=0; $m1=0; $m2=0; $i=0; $i2=0; ?> 17 18<?php while (have_posts()) : the_post(); ?> 19 20 marker[<?php echo $m++; ?>] = new google.maps.Marker({ 21 icon: 'http://maps.google.co.jp/mapfiles/ms/icons/blue-pushpin.png', 22 position: new google.maps.LatLng( <?php echo post_custom("Map_lat")?>,<?php echo post_custom("Map_lng")?> ), 23 map: map, 24 title: '<?php the_title(); ?>' 25 }); 26 infowindow[<?php echo $i++; ?>] = new google.maps.InfoWindow({ 27 content: '<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>', 28 size: new google.maps.Size( 50, 30 ) 29 }); 30 google.maps.event.addListener( marker[<?php echo $m1++; ?>], 'click', function() { 31 infowindow[<?php echo $i2++; ?>].open( map, marker[<?php echo $m2++; ?>] ); 32 }); 33<?php endwhile; // End the loop. Whew. ?> 34 var markerCluster = new MarkerClusterer( map, marker ); 35 }); 36</script>

ですが、googlemapが全く描画されない状態です。エラーコードもなく、サイズ分の枠(CSSで指定したborder)のみの真っ白な状態です。
出力されたページのソースを見たところ、情報自体は入っています。(各記事の情報とリンク)

googlemap系のプラグインは全て停止している状態です。

間違っている点などがありましたら、ご教授願います。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2016/05/18 07:33

具体的に出力されたHTMLを質問文に追記いただいたほうが回答を得られやすいと思います。
Lhankor_Mhy

2016/05/18 10:24

MarkerClusterer.jsを読みこんでいるコードがなさそうなんですが、実際のコードには記述されているんでしょうか?
yukko

2016/05/18 10:41

>keiさん 確かにそうですね。次回から気をつけます。 >Lhankor_Mhyさん 1から検証している際に気づき、MarkerClustererはとりあえず必要のない箇所なので削除しています。
Lhankor_Mhy

2016/05/18 10:55

var mapdiv = document.getElementById( 'map' ); の前にalertとか挿入してテストしてみるとどうなります? エラーは出ないけど動作しないとなると、イベント自体が起きていないような気がするんですが。
yukko

2016/05/18 11:03

1から検証していって解決しました。お付き合いくださりありがとうございます。
guest

回答2

0

「category-スラッグ」に挿入するコードを書き換えました。
参照したサイトはGoogle Maps JavaScript API v3の使い方まとめ (サンプルコード付き)です。
ここを参照して1から書き直しました。

css

1.map-embed 2{ 3 max-width: 100% ; 4 height: 0 ; 5 margin: 0 ; 6 padding: 0 0 56.25% ; 7 8 overflow: hidden ; 9 10 position: relative ; 11 top: 0 ; 12 left: 0 ; 13} 14 15.map-embed > div 16{ 17 position: absolute ; 18 top: 0 ; 19 left: 0 ; 20 21 width: 100% ; 22 height: 100% ; 23 24 margin: 0 ; 25 padding: 0 ; 26} 27 28.map-embed img 29{ 30 max-width: none ; 31} 32

php

1<div class="map-embed"> 2 <div id="map-canvas"></div> 3</div> 4 5<script type="text/javascript"> 6var canvas = document.getElementById( 'map-canvas' ) ; 7 8var latlng = new google.maps.LatLng( 35.681298 , 139.766247 ); 9 10var mapOptions = { 11 zoom: 10 , // ズーム値 12 center: latlng , // 中心座標 [latlng] 13}; 14 15var map = new google.maps.Map( canvas , mapOptions ) ; 16var markers = [] ; 17var infowindows = []; 18 19<?php $m=0; $m1=0; $m2=0; $i=0; $i2=0; ?> 20 21<?php while (have_posts()) : the_post(); ?> 22 23 markers[<?php echo $m++; ?>] = new google.maps.Marker({ 24 icon: 'http://maps.google.co.jp/mapfiles/ms/icons/blue-pushpin.png', 25 position: new google.maps.LatLng( <?php echo post_custom("Map_lat")?>,<?php echo post_custom("Map_lng")?> ), 26 map: map, 27 title: '<?php the_title(); ?>' 28 }); 29 infowindows[<?php echo $i++; ?>] = new google.maps.InfoWindow({ 30 content: '<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>', 31 maxWidth: 250 , 32 }); 33 google.maps.event.addListener( markers[<?php echo $m1++; ?>], 'click', function() { 34 infowindows[<?php echo $i2++; ?>].open( map, markers[<?php echo $m2++; ?>] ); 35 }); 36 37<?php endwhile; // End the loop. Whew. ?> 38</script> 39

具体的にどこが上手くいってなかったのか、自分ではよくわからなかったのですが、とりあえずこれで「各記事に入っているカスタムフィールドの『経度』(Map_lat)『緯度』(Map_lng)をmap上に描画し、ピンを立てて、クリックすると記事へのリンクがでてくる」ということができました。

お付き合いくださりありがとうございます!

投稿2016/05/18 11:15

yukko

総合スコア21

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2016/05/18 11:41

何はともあれうまくいってよかったです、おめでとうございます。 すごく気になってしまったので、コード比較して色々調べてみたのですがおそらく var markerCluster = new MarkerClusterer( map, marker ); が原因だと思います。 せっかく上手くいっているので今更確認する必要はありませんが http://kwski.net/api/1044/ ここをみると使い方が違うみたいでしたので、参考までに
yukko

2016/05/18 11:44

自分の代わりに比較してくださり、ありがとうございます。(自分で比較してもサッパリだったので;) 結局そこだったんですね…。 一応javascriptの勉強になったのでよかったです。 いずれMarkerClustererも必要になると思いますので、参考サイトもありがとうございます。
guest

0

ベストアンサー

google maps apiを使用する場合APIキーを取得する必要があります。
http://www.ajaxtower.jp/googlemaps/charset/index1.html
こちらの記事等を参考にAPIキーを取得して再度試してみてください。

補足:上記のサイトのスクリーンショットは古いものになっていて現行のものとはかなり違います。
ですので上記サイトだけでなくいくつかのサイトを見ながら進めて見て下さい。

投稿2016/05/18 07:32

編集2016/05/18 07:34
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yukko

2016/05/18 07:53

そのサイトはすでに見ていて、何度か試したんですが、APIを取得して入れると「Oops! Something went wrong.This page didn't load Google Maps correctly. See the JavaScript console for technical details.」とMapに表示され、全てのgooglemapが表示されなくなります。 多分、APIの取得方法のやり方が間違っているのかもしれませんが…。 やっぱりこのサイトの情報が古いものなんですね。新しい情報が載っているサイトを参考にしながら、もう少し頑張ってみます。
退会済みユーザー

退会済みユーザー

2016/05/18 08:20 編集

APIを取得した際に利用を許可するドメインの設定をされたと思うのですが動作確認の際のドメインと違っていたりしませんか? サイトのスクリーンショットは古いですが、つい先月もここの手順でAPIキーを取得してgoogle mapsを表示するサイトを作ったので紹介されている手順自体には問題ないかと思います。 「See the JavaScript console for technical details.」とある通りchromeのデベロッパーツール等でjavascriptのエラーを確認してみてはどうでしょうか。 一旦マーカー関連の部分をコメントアウトして単純にマップのみが表示されるか確認してみるのもいいと思います。
yukko

2016/05/18 11:02

APIは結局有効にならなかったのですが、なんとか描画できました。 1から検証することは当然かなとは思っていたのですが、chromeのデベロッパーツールのことを失念していて、非常に助かりました! 他にも指摘してくださった方々、ありがとうございました! 自分の回答欄にソースを記述しておきます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問