概要

WordPressでGoogleAPIを使って値を取得しようとしたところ、以下の通りクロスドメイン問題が発生しましたので解決策を教えて頂きたいです。

※以下、APIキーの部分はhogeに変換してます

環境

・Windows8.1
・Apache 2.4
・PHP 7.2

エラー

Failed to load https://maps.googleapis.com/maps/api/place/findplacefromtext/json?key=hoge&input=%E6%8A%98%E5%B0%BE&inputtype=textquery&language=ja&fields=formatted_address%2Cgeometry%2Cid%2Cname%2Cplace_id%2Cplus_code: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access.

コード（投稿本文）

<input type="button" id="btn" value="計算" onclick="btnClick();" />

<div>
<script src="https://maps.google.com/maps/api/js?v=3.33&key=hoge&libraries=places"></script>
</div>

<div>
<script>
function btnClick() {
 jQuery(function($){
  console.log("a");
    $.get("https://maps.googleapis.com/maps/api/place/findplacefromtext/json", {key: "hoge", input: "北九州", inputtype:     "textquery", language: "ja", fields: "formatted_address,geometry,id,name,place_id,plus_code"}
, function(data, status){
        alert("Data: " + data + "\nStatus: " + status);
    });
  console.log("b");
 });
}
</script>
</div>

試したこと

httpd.confに以下を追加してApacheを再起動してみましたが変わらずでした。

<Location />   
    Header set Access-Control-Allow-Headers "Content-Type"
    Header set Access-Control-Allow-Origin "*"
</Location>

いろいろググっても解決策が分からず、初めてこちらを利用させていただきました。
よろしくお願い致します。

解決策

「は？何で質問なのに解決策？」って思うと思いますが、まずは落ち着いてください。
この質問のあと、自己解決し、回答を投稿しようとしたのですが、以下の事象（バグ？）により回答ができなかったため、暫定的にこちらに書いてます。
回答としての投稿が可能になり次第、こちらから転記します。
事象：（ツイートにまとめました）https://twitter.com/reo3313/status/1053272336818786306

原因

GoogleのAPIはサーバ用とクライアント用の2種類あり、今回はWordPress投稿内のためクライアント側APIを利用しないといけなかった（サーバ側のAPIを利用していた）。
※厳密にはクライアント側はAPIというかjsライブラリ
参考：https://developers.google.com/maps/documentation/javascript/places#find_place_requests

解決後コード

※地図表示は利用してないですが、地図オブジェクトが必要なのでダミーの地図オブジェクトを作ってます。

<input id="btn" type="button" value="計算" />
<div><script src="https://maps.google.com/maps/api/js?v=3.33&key=hoge&libraries=places"></script></div>
<div><script>
var map;
var service;
var infowindow;
document.getElementById("btn").addEventListener("click", function(){
  var mapCenter = new google.maps.LatLng(-33.8617374,151.2021291);
  map = new google.maps.Map(document.getElementById('map'), {
    center:mapCenter,zoom:15
  });
  var request = {
    query: 'Museum of Contemporary Art Australia',
    fields: ['photos', 'formatted_address', 'name', 'rating', 'opening_hours', 'geometry'],
  };
  service = new google.maps.places.PlacesService(map);
  service.findPlaceFromQuery(request, callback);
});
function callback(results, status) {
  if (status == google.maps.places.PlacesServiceStatus.OK) {
    for (var i = 0; i < results.length; i++) {
      var place = results[i];
      console.log(results[i]);
    }
  }
}
</script></div>

お騒がせしました。
以上です。