wordpressにgooglmapのAPIキーを登録したのに表示されない場合の解決策(決定版!)
2016年の6月頃からgooglemapでAPIキーが必須になりましたが、
自分はwordpressでACF(advuanced Custom Fields)を使ってお客さんが登録できるようにしています。
そこで、apiキーをまず取得するために、
(1)APIキーを取得します。
(2)APIキーが有効になっているか確認します。
(3)APIキーを他人が勝手にソースからコピーして使われないようにドメインの制限を掛けます。
(4)functions.phpに以下を記載します。(登録画面でもmapが表示するようにするため)
function my_acf_google_map_api( $api ){ $api['key'] = 'ここに自分が作成したAPIキーを入れる'; return $api; } add_filter('acf/fields/google_map/api', 'my_acf_google_map_api');
(5)実際にmapを表示したい場所に、以下を記載する
<?php if( get_field('ここに自分がACFで作成したgooglemapのフィールド名を入れる') ) { $googlemap = get_field('ここに自分がACFで作成したgooglemapのフィールド名を入れる'); ?> <script src="//maps.google.com/maps/api/js?key=ここに自分が作成したAPIキーを入れる"></script> <div id="googlemaps" style="width:100%; height:400px;"></div> <script type="text/javascript"> google.maps.event.addDomListener(window,"load",function(){ var mapdiv=document.getElementById("googlemaps"); var myOptions = { zoom:17, center:new google.maps.LatLng("<?php echo $googlemap['lat']; ?>","<?php echo $googlemap['lng']; ?>"), mapTypeId:google.maps.MapTypeId.ROADMAP, scaleControl:true }; var map=new google.maps.Map(mapdiv,myOptions); var marker=[]; var infowindow=[]; marker[0]=new google.maps.Marker({ position:new google.maps.LatLng("<?php echo $googlemap['lat']; ?>","<?php echo $googlemap['lng']; ?>"), map:map, title:"<?php echo $googlemap['address']; ?>" }); }); </script> <?php } ?> <a href="http://maps.google.com/maps?q=<?php echo $location['ここに自分がACFで作成したgooglemapのフィールド名を入れる']; ?>+<?php the_field('ここに自分がACFで作成したgooglemapのフィールド名を入れる'); ?>" target="_blank">Googleマップで開く</a>
これで、ちゃんと表示されるようになるはずです。
※ちなみに、headerとかに、別にgooglemapAPIの読み込みをすると、エラーになります。2重に読み込みしないように注意してください。
※参考:
https://qiita.com/Haruka-Ogawa/items/997401a2edcd20e61037
関連記事はこちら!
スポンサーリンク