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

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

ただいまの
回答率

91.25%

  • JavaScript

    11840questions

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

  • HTML5

    3001questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • Ajax

    837questions

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

  • Google Map

    263questions

    Google Mapは、Google社がオンラインで提供している地図・ローカル検索サービスです。GIS(Geographic Information System:地理情報システム)の中の「WebGIS」に該当します。地図・航空写真・地形の表示方式があり、それぞれユーザーが縮尺を調整して表示させることができます。地域の情報サービスを検索する機能やルート検索の機能も搭載されています。

javascriptによるgoogle map 表示制御について

解決済

回答 1

投稿

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

C.Darrenport

score 5

前提・実現したいこと

javascriptを利用して、ボタンをクリックすると、
google mapが表示されるようにしたいです。
ご教授願います。
<背景>
ajaxでgoogle mapのデータ(経度・緯度)を取得後、その情報を基に
google mapを表示させたく、まずgoogle mapをアクション後(クリック後)表示させようとしていましたが、
解決出来ず、質問させて頂きました。

発生している問題・エラーメッセージ

該当コードの
No,1  HTMLにGoogle Maps JavaScript APIをロードするためにscriptタグを追加
No,2  google mapを表示させるための関数function initMap()
はconsole.log("OK"),console.log("OKOK")が作動している事より
問題なく作動していると思うのですが、
google mapが表示されません。

エラーメッセージ無

該当のソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>address api</title>
<meta name="description" content="web api weather">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=yes">
<link rel="stylesheet" href="css/web_api_weather/address_api.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
</head>
<body>

  <div id="map"></div>

  <button id="btn_map">map</button>

  <div id="map_area"></div>


<!---------   jQuery    ----------------------->
<script src="jQuery_base/jquery-3.2.1.min.js"></script>
<script src="jQuery_base/jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>
<script src="js/web_api_weather/address_api.js"></script>

</body>
</html>
#map {
  width: 500px;
  height: 500px;
}
//ボタンidを取得
  var button_map = document.getElementById("btn_map");
//ボタンをクリックした場合発動
  button_map.addEventListener("click",function(){

    //問題なくコンソールに表示されます
    console.log("OK");

  //scriptタグ追加エリアのidを取得
    var map_area = document.getElementById("map_area");

    //クリック後インスペクターにて下記scriptタグの追加を確認しました。
    map_area.innerHTML = '<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDSCHWLpdeARXPbY5m4tGmyTk80YG_3agA&callback=initMap"></script>';

    //No,2  単独で表示されましたので問題ないと考えています
    function initMap() {
    var myLatLng = {lat: 35.6920455, lng: 139.7292123};

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 8,
      center: myLatLng
    });


  var marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      title: 'Hello World!'
    });


  };
    //問題なくコンソールに表示されます
    console.log("OKOK");
  });

試したこと

a、google map API を直接HTMLに書き込んだ場合、google mapが表示されたため、
function initMap()、scriptタグは問題ない事を確認済みです。
b、No,a で表示させた下記コードのようにgoogle mapをjavascriptのstyle.visibilityで操作した場合google mapが表示されましたが、style.displayで操作した場合mapの枠しか表示されませんでした。
google mapはそういう仕様のため私が試したい方法で対応するのは難しいのでしょうか?

// style.visibilityの制御の時
  var map = document.getElementById("map");
  map.style.visibility = "hidden";

  var button_map = document.getElementById("btn_map");

  button_map.addEventListener("click",function(){
    map.style.visibility = "visible";
    console.log("OK");

});
// style.displayの制御の時
  var map = document.getElementById("map");
  map.style.display = "none";

  var button_map = document.getElementById("btn_map");

  button_map.addEventListener("click",function(){
    map.style.display = "block";
    console.log("OK");

});

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

Fire foxを使用し勉強中です。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • Lhankor_Mhy

    2018/01/10 22:16

    コールバックが実行できていないのではないかと思います。確認したいのでエラーメッセージをご提示ください。

    キャンセル

  • C.Darrenport

    2018/01/11 07:52

    webブラウザのコンソール画面を見てもエラーメッセージがなく、ボタンクリック直後のconsole.log("OK")と各関数発動後のconsole.log("OKOK")が表示されるのみになってしまいます。

    キャンセル

回答 1

checkベストアンサー

+2

そもそもinnerHTMLってscriptタグ追加して動かないのでは?
こんな感じではどうです?

    var map_js = document.createElement('script');
    map_js.type = 'text/javascript';
    map_js.src = 'https://maps.googleapis.com/maps/api/js?key=xxx&callback=initMap'
    map_area.appendChild(map_js);

私はできましたが…initMapをclickのコールバックに書いたままではありませんか?
提示のサンプルではinitMapはグローバルから見えてないと思います。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>address api</title>
<meta name="description" content="web api weather">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=yes">
<style type="text/css">
    #map{width: 500px;height: 500px;}
</style>
</head>
<body>

  <div id="map"></div>

  <button id="btn_map">map</button>

  <div id="map_area"></div>

</body>
</html>

<script>
    function initMap() {
        var myLatLng = {lat: 35.6920455, lng: 139.7292123};

        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 8,
            center: myLatLng
        });

        var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            title: 'Hello World!'
        });

    }

    //ボタンidを取得
    var button_map = document.getElementById("btn_map");
    //ボタンをクリックした場合発動
    button_map.addEventListener("click",function(){

        //問題なくコンソールに表示されます
        console.log("OK");

          //scriptタグ追加エリアのidを取得
        var map_area = document.getElementById("map_area");
        var map_js = document.createElement('script');
        map_js.type = 'text/javascript';
        map_js.src = "https://maps.googleapis.com/maps/api/js?key=AIzaSyDSCHWLpdeARXPbY5m4tGmyTk80YG_3agA&callback=initMap"
        map
        map_area.appendChild(map_js);
    });
    //問題なくコンソールに表示されます
    console.log("OKOK");

</script>

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/01/11 21:32

    innerHTMLの箇所にご教授頂きましたコードを書き込みましたが、下記エラーが発生してしまいました。
      ※srcのkeyの箇所はmykeyを記入済みです。
    uncaught exception: InvalidValueError: initMap is not a function

    申し訳ありませんが、追加でご教授願います。

    キャンセル

  • 2018/01/11 22:19

    回答有難うございます。
    mapの表示/経度・緯度の更新が出来ました。
    initMapをclickのコールバックに書いたままでした。
    申し訳ありませんでした。
    丁寧な回答で非常に助かりました。

    キャンセル

  • 2018/01/11 22:23

    良かったです!b

    キャンセル

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

ただいまの回答率

91.25%

関連した質問

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

  • JavaScript

    11840questions

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

  • HTML5

    3001questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • Ajax

    837questions

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

  • Google Map

    263questions

    Google Mapは、Google社がオンラインで提供している地図・ローカル検索サービスです。GIS(Geographic Information System:地理情報システム)の中の「WebGIS」に該当します。地図・航空写真・地形の表示方式があり、それぞれユーザーが縮尺を調整して表示させることができます。地域の情報サービスを検索する機能やルート検索の機能も搭載されています。