Ajaxに既に作られたgoogleMapを挿入したい

Ajaxは非同期通信の設定にしてあります。
ソースコードを見ればわかると思いますが、ボタンが設置してあり、ポップアップが出てきます。
それをGoogleMapにしたいのですが、やりかたがよくわかりません。
ソースコードを２つ（AjaxとgoogleMap）のコードを残しておきます。
ご教授の程よろしくお願いします。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0.1//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" Content="text/html;charset=Shift_JIS"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>非同期通信テスト</title> <script type="text/javascript">  </script> </head> <body> <h1>非同期通信テスト</h1> <form> <input type="button" value="ファイル読み込み" onClick="loadText()"> </form> </body> </html>

↑Ajax

↓googleMap

<html lang="ja"> <head> <meta charset="UTF-8"> <script src="https://maps.google.com/maps/api/js?sensor=true&language=ja"></script> <title>googlemapの練習</title> <style> body { width: 100%; height: 100%; } #map{ width:100%; height:100%; } </style> </head> <body> <div id="map"></div> <script> var latlng = new google.maps.LatLng(35.66, 139.69); var options = { zoom: 15, center: latlng, maptypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById('map'), options);

        var marker = new google.maps.Marker({
        	position:map.getCenter(),
        	map:map
        });
    </script>
</body>

</html>

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

回答1件

GoogleMapsのHTMLが別ファイルに存在するのでしたら、iframeで読み込んでしまえば良いかなと思いました。

html
1<html>
2<head>
3<meta http-equiv="Content-Type" Content="text/html;charset=utf-8">
4<meta http-equiv="Content-Script-Type" content="text/javascript">
5
6<title>非同期通信テスト</title>
7
8<script type="text/javascript">
9<!--
10
11function loadText(){
12  document.getElementById('gmap').contentDocument.location.replace('test2.html');
13  document.getElementById('gmap').style.display = 'block';
14}
15
16
17// -->
18</script>
19
20</head>
21<body>
22
23<h1>非同期通信テスト</h1>
24
25<form>
26<input type="button" value="ファイル読み込み" onClick="loadText()">
27</form>
28
29<iframe id="gmap" src="" style="display:none;"></iframe>
30
31</body>
32</html>
33