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

###前提・実現したいこと
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が表示されません。

エラーメッセージ無

###該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="UTF-8">
5<title>address api</title>
6<meta name="description" content="web api weather">
7<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=yes">
8<link rel="stylesheet" href="css/web_api_weather/address_api.css">
9<link rel="stylesheet" href="css/font-awesome.min.css">
10</head>
11<body>
12
13  <div id="map"></div>
14
15  <button id="btn_map">map</button>
16  
17  <div id="map_area"></div>
18
19  
20<!---------   jQuery    ----------------------->
21<script src="jQuery_base/jquery-3.2.1.min.js"></script>
22<script src="jQuery_base/jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>
23<script src="js/web_api_weather/address_api.js"></script>
24  
25</body>
26</html>

CSS
1#map {
2  width: 500px;
3  height: 500px;
4}

Js
1
2//ボタンidを取得
3  var button_map = document.getElementById("btn_map");
4//ボタンをクリックした場合発動
5  button_map.addEventListener("click",function(){
6
7    //問題なくコンソールに表示されます
8    console.log("OK");
9    
10　　//scriptタグ追加エリアのidを取得
11    var map_area = document.getElementById("map_area");
12    
13    //クリック後インスペクターにて下記scriptタグの追加を確認しました。
14    map_area.innerHTML = '<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDSCHWLpdeARXPbY5m4tGmyTk80YG_3agA&callback=initMap"></script>';
15    
16    //No,2  単独で表示されましたので問題ないと考えています
17    function initMap() {
18    var myLatLng = {lat: 35.6920455, lng: 139.7292123};
19
20    var map = new google.maps.Map(document.getElementById('map'), {
21      zoom: 8,
22      center: myLatLng
23    });
24
25      
26  var marker = new google.maps.Marker({
27      position: myLatLng,
28      map: map,
29      title: 'Hello World!'
30    });
31    
32    
33  };
34    //問題なくコンソールに表示されます
35    console.log("OKOK");
36  });

###試したこと
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はそういう仕様のため私が試したい方法で対応するのは難しいのでしょうか？

Js
1// style.visibilityの制御の時
2  var map = document.getElementById("map");
3  map.style.visibility = "hidden";
4
5  var button_map = document.getElementById("btn_map");
6
7  button_map.addEventListener("click",function(){
8    map.style.visibility = "visible";
9    console.log("OK");
10
11});

Js
1// style.displayの制御の時
2  var map = document.getElementById("map");
3  map.style.display = "none";
4
5  var button_map = document.getElementById("btn_map");
6
7  button_map.addEventListener("click",function(){
8    map.style.display = "block";
9    console.log("OK");
10
11});

###補足情報(言語/FW/ツール等のバージョンなど)
Fire foxを使用し勉強中です。

Lhankor_Mhy

2018/01/10 13:16

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

C.Darrenport

2018/01/10 22:52

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

行動規範の内容に同意します

回答1件

ベストアンサー

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

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

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

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="UTF-8">
5<title>address api</title>
6<meta name="description" content="web api weather">
7<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=yes">
8<style type="text/css">
9    #map{width: 500px;height: 500px;}
10</style>
11</head>
12<body>
13
14  <div id="map"></div>
15
16  <button id="btn_map">map</button>
17
18  <div id="map_area"></div>
19  
20</body>
21</html>
22
23<script>
24    function initMap() {
25        var myLatLng = {lat: 35.6920455, lng: 139.7292123};
26
27        var map = new google.maps.Map(document.getElementById('map'), {
28            zoom: 8,
29            center: myLatLng
30        });
31        
32        var marker = new google.maps.Marker({
33            position: myLatLng,
34            map: map,
35            title: 'Hello World!'
36        });
37
38    }
39
40    //ボタンidを取得
41    var button_map = document.getElementById("btn_map");
42    //ボタンをクリックした場合発動
43    button_map.addEventListener("click",function(){
44
45        //問題なくコンソールに表示されます
46        console.log("OK");
47
48        　　//scriptタグ追加エリアのidを取得
49        var map_area = document.getElementById("map_area");
50        var map_js = document.createElement('script');
51        map_js.type = 'text/javascript';
52        map_js.src = "https://maps.googleapis.com/maps/api/js?key=AIzaSyDSCHWLpdeARXPbY5m4tGmyTk80YG_3agA&callback=initMap"
53        map
54        map_area.appendChild(map_js);
55    });
56    //問題なくコンソールに表示されます
57    console.log("OKOK");
58
59</script>
60

投稿2018/01/10 14:12

編集2018/01/11 13:06

sousuke

総合スコア3828

C.Darrenport

2018/01/11 12:32

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

C.Darrenport

2018/01/11 13:19

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