Google MapのAPIを利用して、ストリートビューを貼り付けて自動回転させる、というのをしたいのですが、うまく動作しません。APIを使うのは初めてで、オブジェクト指向はぼんやりしか理解していないというレベルのものです。
ちなみにこちらがサンプルです。
http://jsfiddle.net/6GBkh/
まず手順ですが、
- Googleのdeveloper consoleにアクセスする
https://console.developers.google.com/apis/library?project=streetview-rotation2 - Google Maps JavaScript APIにアクセスする
- ドメインなどを登録してAPIキーを取得
そして、このように書きました。
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key={AIzaSyAlp9kp2C2W86aPfIop1M-hxO4MNjJ7wxs}"></script>
<script>
var panorama;
function initialize() {
var fenway = new google.maps.LatLng(33.8085037,132.8172208);
var panoramaOptions = {
position: fenway,
pov: {
heading: 4,
pitch: 10
}
};
panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'),panoramaOptions);
var i = 0;
window.setInterval(function () {
panorama.setPov({
heading: i,
pitch: 10,
zoom: 1
});
i += 0.1;
}, 10);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>このようなコードを書いていますが、ページをロードするとこのように表示されます。
Chromeのコンソールには、
Google Maps API error: InvalidKeyMapError https://developers.google.com/maps/documentation/javascript/error-messages#invalid-key-map-error_.bb @ js?key={AIzaSyAlp9kp2C2W86aPfIop1M-hxO4MNjJ7wxs}:32
原因は何かわかりますか？
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
checkベストアンサー
0
エラーメッセージの通り、「{AIzaSyAlp9kp2C2W86aPfIop1M-hxO4MNjJ7wxs}」というキーが正しくないから表示されないのだと思います。
【エラー メッセージ | Google Maps JavaScript API | Google Developers】
https://developers.google.com/maps/documentation/javascript/error-messages?hl=ja#deverrorcodes
InvalidKeyMapError
API をロードするスクリプト要素に含まれる API キーが見つかりません。正しい API キーを使用していることをご確認ください。Google Developers Console では、新しい API キーを作成することができます。
勘なのですが、参考にされたページなどに下記の様に書かれていたのではないでしょうか。
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key={取得したAPIキー}"></script>その場合下記のように書くことで今出ている警告は消えると思います。
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAlp9kp2C2W86aPfIop1M-hxO4MNjJ7wxs"></script>投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう！
- ただいまの回答率 88.36%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
質問への追記・修正、ベストアンサー選択の依頼
kei344
2016/05/28 18:34
コードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「</>」ボタンを押すとコードブロックになります。また、エラーは画像だけでなくテキストで書いてください。コンソールにもエラーが出ているはずなので、それもテキストで追記ください。
Lhankor_Mhy
2016/05/28 19:15
うろ覚えですが、GoogleAPIのキーに{}という記号はつかなかったと思うんですが。key=AIzaSyAlp9kp2C2W86aPfIop1M-hxO4MNjJ7wxsってやるとどうなります？
samlife
2016/05/28 20:53
できました！
そこかよ〜、といった感じですね笑
{ } はサンプルのサイトで便宜上入れてただけということですね。
助かりました、ありがとうございます！