サブウィンドウの操作

Question

前提・実現したいこと

地図を同時に複数開けて、検索バーでの入力内容や検索ボタンの押下を連動させて、表示させる地図を連動させようとしております。
今のところ以下３つの地図を別ウィンドウで起動させてウィンドウオブジェクトを取得して、値の受け渡し等を行うつもりです。

現在、

• 地理院（leafletで作成したhtmlファイル等で構成）
• Open Street Map(leafletで作成したhtmlファイル等で構成）
• Googleマップ(ホームページのURLから）

の３つの地図を開きたいです。

流れとしては
地理院のhtmlを起動する→onloadでjsのwindow.openで後の２つの地図のウィンドウを起動
という感じです。

あまりHTML・js等に関する知識がないので、初歩的なことかもしれませんが、教えていただけるとありがたいです。

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

メインの地理院からOpen Street Mapは普通に開けて、値の受け渡し等もできました。
ですが、Googleマップだけは別ウィンドウで開くもののウィンドウ名が反映されなければ、ウィンドウサイズもウィンドウオブジェクトも取得できないような感じです。

該当のソースコード

function open_sub_map(){
    //open street map
    window.open('./sub_map_openstreet.html','Open Street Map','width=50,height=50,scrollbars=yes,status=yes,menubar=yes');
    //Google
    var window_width = window.parent.screen.width/2;
    var window_height = window.parent.screen.hight;
    var google_url ='https://www.google.com/maps/@35.690921,139.700258,15z';
    window.open(google_url,"Google Map",'scrollbars=yes,resizable=yes,status=yes,wigth='+window_width+',height='+window_height+',top=0,left='+window_width);
　　
}

読み込ませているほかのJSファイルで

　var g = window.open(google_url,"Google Map",'scrollbars=yes,resizable=yes,status=yes,wigth='+window_width+',height='+window_height+',top=0,left='+window_width);

　でオブジェクトを取得しようとしています。

試したこと

　var g = window.open("","Google Map");

でオブジェクトを取得しようとしましたが、ダメでした。

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

Answer 1

クロスドメインなのでJavaScriptからアクセスできません。別ウィンドウにする意図はわかりませんが、GoogleMapsAPIを使ったhtmlを呼び出すようにしてみてはいかがでしょう。

【window.open - Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Window/open#FAQ

異なった生成元（ドメイン名）からウィンドウ（あるいは、フレーム）にロードされるスクリプトは、別ウィンドウ（あるいは、フレーム）のプロパティ、または、別の異なった生成元（ドメイン名）由来の HTML オブジェクトの取得も設定もできません。

Comments

[退会済みユーザー]

なるほど、、、クロスドメインですか。勉強になります。
私個人で使うものならGoogleAPIを使用したいところですが、社内でつかうものなので、どうしようかなぁという感じです。
でもわかりました。とりあえず、別ウィンドウでの呼び出しは無理ってことですね。ありがとうございます。