###前提・実現したいこと
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を使用し勉強中です。
回答1件
あなたの回答
tips
プレビュー