質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.52%

  • PHP

    23494questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • JavaScript

    19821questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • API

    1789questions

    APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

  • Ajax

    1289questions

    Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

  • Google API

    646questions

    Googleは多種多様なAPIを提供していて、その多くはウェブ開発者向けのAPIです。それらのAPIは消費者に人気なGoogleのサービス(Google Maps, Google Earth, AdSense, Adwords, Google Apps,YouTube等)に基づいています。

Google Maps JavaScript APIを複数回呼び出してしまってエラーが出てしまう

受付中

回答 1

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 130

cochumo

score 0

前置き

いつもお世話になっております。勉強の為、Google Maps JavaScript APIを使用してwebサービスを作っています。
今回「You have included the Google Maps JavaScript API multiple times on this page. This may cause unexpected errors.」
という「APIを複数回呼び出している」というエラーが発生してしまい意図しない動作をしてしまうので皆様のお知恵を拝借したく存じます。
初学者なもので、ご迷惑をお掛けするかも知れませんがよろしくお願い致します。

実装したい内容

投稿データをDBから最初5件取得し、各種内容(ユーザー,投稿日,投稿コメント,緯度,経度,ズーム,向き)を出力します。
その際に、取得した位置情報を元にGoogle Maps JavaScript APIを使用してストリートビューを各投稿に反映させます。
ここまでは完成しており、今回ページングをページ下部に「もっと見るボタン」を設置して次の5件をそこを押すと表示されるという機能を実装しようとしています。
イメージ説明

問題点

http://sumidai.net/2017/06/24/jquery-ajax-read-next/
上記の記事を参考に実装していましたが、ある程度カタチになってきたのですが、Ajaxでget_data.phpで処理した際と、元々index.phpで処理した際の
Google Maps JavaScript APIが干渉してしまい、
「You have included the Google Maps JavaScript API multiple times on this page. This may cause unexpected errors.」
「複数回呼び出されているよ」と、注意されてしまいました。
イメージ説明

問題のコード

下記のコードを<body>内に記述しています

index.php

  // 投稿の取得

    // もっと見るボタンの準備
    $offset = 0;
    $limit = 5;

    // 論理削除した投稿以外を取得
    $posts = $db->prepare('SELECT SQL_CALC_FOUND_ROWS u.name, p.* FROM users u, posts p WHERE u.id=p.user_id AND p.is_deleted = 0 ORDER BY p.created_at DESC LIMIT ?, ?');
    $posts->bindParam(1, $offset, PDO::PARAM_INT);
    $posts->bindParam(2, $limit, PDO::PARAM_INT);
    $posts->execute();
    $post_ = $posts->fetchAll();

    // 表示していない投稿の件数を取得
    $count = $db->query('SELECT FOUND_ROWS()');
    $data['count'] = $count->fetch(PDO::FETCH_ASSOC);
    $data['count'] = $data['count']['FOUND_ROWS()'] - $limit;
<script type="text/javascript">

  var set = 5;
  var ck = 0;
  var total = <?php echo $data['count'] ?>;
  var offset;

  if (set + total > set) {
    console.log('残り' + total + '件');
    console.log('次の' + set + '件を見る');
  } else {
    $('.more_btn').hide();
  }

  $('#more').click(function() {
    console.log('クリック感知したよ');

    ck ++;
    offset = set * ck;
    console.log(offset);

    if (total >= 0) {
      total -= set;
      console.log(total);
    }

    if (total < set) {
      console.log(total + '件');
    }

    $.ajax({
      url: 'get_data.php', //送信先
      type: 'POST',
      data: { 'offset': offset },
      timeout: 10000,
      dataType: 'text'
    })
    .done(function( data ) {
      $('.add_post').append(data);
      if(total <= 0){
        console.log('0件');
      }else{
        console.log(total + '件');
      }
    });

    if(total <= 0){
      $('#more').hide();
    }

    return false;

  });

</script>


get_data.php

  // もっと見るボタン
  $offset = (int)$_POST['offset'];
  $limit = 5;

  // 論理削除した投稿以外を取得
  $posts = $db->prepare('SELECT u.name, p.* FROM users u, posts p WHERE u.id=p.user_id AND p.is_deleted = 0 ORDER BY p.created_at DESC LIMIT ? OFFSET ?');
  $posts->bindParam(1, $limit, PDO::PARAM_INT);
  $posts->bindParam(2, $offset, PDO::PARAM_INT);
  $posts->execute();
  $post_ = $posts->fetchAll();

  // 表示していない投稿の件数を取得
  $count = $db->query('SELECT FOUND_ROWS()');
  $data['count'] = $count->fetch(PDO::FETCH_ASSOC);
  $data['count'] = $data['count']['FOUND_ROWS()'] - $limit;

index.php,getdata.php共通

<script>

  // グローバルな変数作成
  // var _svp = "";
  var js_post = JSON.parse('<?php echo $php_json; ?>');
  console.log(js_post);

  function initialize() {
    // ループ
    for(let val in js_post) {

      //var fenway = { lat: Number(js_post["latitude"]),lng: Number(js_post["longitude"])};
      var fenway = { lat: Number(js_post[val]["latitude"]),lng: Number(js_post[val]["longitude"])};
      var id = 'pano_list_' + js_post[val]['id'];
      console.log(id);
      console.log(fenway);

      var panorama = new google.maps.StreetViewPanorama(

          document.getElementById(id), {
           position: fenway,
           pov: {
             heading: Number(js_post[val]["heading"]),
             pitch: Number(js_post[val]["pitch"])
          }
      });
    }
  }

</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=[APIKEY]&callback=initialize"></script>

調べて得た情報

https://github.com/tomchentw/react-google-maps/issues/812
https://github.com/kettanaito/react-advanced-form/blob/ca6be457cdd42b05cfc05595ce9d2409dab4a853/examples/third-party/react-google-maps/Map.jsx
仕方のない部分なのかもしれません 追記
https://github.com/mapbox/mapbox-gl-js/issues/7332

補足情報(FW/ツールのバージョンなど)

AWS EC2

PHP 7.0.33 (cli) (built: Jan  9 2019 22:04:26) ( NTS )
Copyright (c) 1997-2017 The PHP Group
Zend Engine v3.0.0, Copyright (c) 1998-2017 Zend Technologies

PHPのフレームワークは使用していません。

bootstrap 4.1.3

必要な情報が足りないようでしたら、言って頂ければ追記致します。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

0

PHPでHTML(JavaScript)を送って実行させるのではなく、JSONでデータだけ送ってJavaScriptでmapを描画するように切り替える必要があります。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/04/13 12:01

    すみません、もう少し詳しく教えて頂けないでしょうか?汗

    キャンセル

  • 2019/04/13 12:23

    <script>要素ごとAjaxで送りつけていますが、データだけ送るべき、というだけの話です。
    PHPで返す部分(getdata.php)を修正し、$('.add_post').append(data);ではなく受け取ったデータでマップを再描画するようなコードを書くということです。

    キャンセル

  • 2019/04/15 23:05

    やってみます!

    キャンセル

同じタグがついた質問を見る

  • PHP

    23494questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • JavaScript

    19821questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • API

    1789questions

    APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

  • Ajax

    1289questions

    Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

  • Google API

    646questions

    Googleは多種多様なAPIを提供していて、その多くはウェブ開発者向けのAPIです。それらのAPIは消費者に人気なGoogleのサービス(Google Maps, Google Earth, AdSense, Adwords, Google Apps,YouTube等)に基づいています。