wordpressにgooglmapのAPIキーを登録したのに表示されない場合の解決策(決定版!)

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

Google MAPS APIが7/16有料化?地図を埋め込んでいるサイトは要確認!

Google Map APIを使うのは止めました!

ポチッ☆とクリックお願いします!
↓ ↓ ↓

  • にほんブログ村 IT技術ブログ ホームページ・サイト制作支援へ

コメントは受け付けていません。

サブコンテンツ

TOP