

### 概要

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](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.

### コード（投稿本文）

[code]

    <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>
    
[/code]

### 試したこと

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

[code]

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

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

* * *

## 解決策

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

### 解決後コード

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

[code]

    <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>
    
[/code]

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


CC BY-SA 4.0
2018-10-19T05:08:10.290
49434
2018-10-19T13:39:20.273
2018-10-19T13:39:20.273
30583
30583
question
php apache wordpress
WordPressでクロスドメインエラー