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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

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

Onsen UI

HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

Q&A

0回答

922閲覧

monaca + onsen ui でons-tabとons-navigatorを組み合わせタブ画面でscriptが使いたいです

tuntunn69rock

総合スコア4

JavaScript

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

Onsen UI

HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

0グッド

0クリップ

投稿2021/12/11 07:41

前提・実現したいこと

マッチングアプリの様なものを作成しており、
tabbarを表示させつつ、各タブからそれぞれ画面遷移させ各ページ(
タブ1
グーグルマップの表示 →プロフィール表示
タブ2
ユーザー検索 → プロフィール表示
タブ3
トーク履歴 → メッセージ送受信画面
タブ4
プロフィール編集

に飛べるようにしたいと思っています。

タブ2、3、4は思い通りのものを作成出来たのですが、タブ1のグーグルマップの表示だけが何度試しても上手く行きません。
①map.htmlを試しにindex.htmlに貼り付けた場合、表示される
②エラーは出ていない
ので呼び出し方がおかしいなど初歩的な部分が原因だと思っています。
どうやったら表示出来るかをご教授戴きたいです。

該当のソースコード

index.html

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"> <script src="components/loader.js"></script> <script src="lib/angular/angular.min.js"></script> <script src="lib/onsenui/js/onsenui.min.js"></script> <script src="lib/onsenui/js/angular-onsenui.min.js"></script> <link rel="stylesheet" href="components/loader.css"> <link rel="stylesheet" href="lib/onsenui/css/onsenui.css"> <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css"> <link rel="stylesheet" href="css/style.css"> </head> <body> <ons-page ng-controller="AppController"> <ons-tabbar position="bottom"> <ons-tab page="home.html" label="ページ1" icon="map" active></ons-tab> <ons-tab page="xx.html" label="ページ2" icon="user"></ons-tab> <ons-tab page="xxx.html" label="ページ3" icon="comment"></ons-tab> <ons-tab page="xxxx.html" label="ページ4" icon="gear"></ons-tab> </ons-tabbar> </ons-page> </body>

home.html

<ons-page> <ons-navigator var="home.nav" page="map.html"></ons-navigator> </ons-page>

map.html

<script> var map; function initMap() { map = new google.maps.Map(document.getElementById("map"), { center: { lat: 35.6811673, lng: 139.7670516 }, zoom: 12 }); } </script> <style> #map { height: 100%; } </style> <ons-page> <ons-toolbar> <div class="center">Google Map Test</div> </ons-toolbar> <div id="map"> <script src="https://maps.googleapis.com/maps/api/js?key=xxxxxxxxxx&callback=initMap" async defer></script></div> </ons-page>

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問