• 締切済み

Google MAPを子ウィンドウで表示

あけましておめでとうございます。 いつもご相談させて頂き、恐縮でございます。 お手数ですが、下記のサイトをご覧ください。 http://horixx.80code.com/03/childwin2.html (AJAX Webアプリケーション アイデア ブックという本 のサンプルです) [東京]などをクリックすると子ウィンドウが立ち上がります。 -------------------------------------------------------- 私は、立ち上がった子ウィンドウに、Google Mapを入れ込みた いとチャレンジをしております。 -------------------------------------------------------- 子ウィンドウは、HTMLなら問題なく動くのですが、 javascriptなどは動作しません。 例:[javascript]をクリックした際、 基データである(http://horixx.80code.com/sample_DD.html) が動くはずですが、動作しません。 本題のgoogleMAPですが、表示すらされません。 なにかコツ、およびチャレンジされた方などいらっしゃいませ んでしょうか。

みんなの回答

  • talepanda
  • ベストアンサー率58% (45/77)
回答No.2

かなり面倒だけどがんばれば出来ます 但し、googleMAPが表示されている元のページそのままでは駄目です。 script要素をinnerHTMLで追加しても、評価はされないので。 <script type="text/javascript"> var code='<script type="text/javascript" src="hoge.js"></'+'script>the html'; function I(){document.getElementById("orz").innerHTML=code;} function D(){document.write(code);} function A(){var e=document.createElement("script");e.setAttribute("type","text/javascript");e.setAttribute("src","hoge.js");document.getElementById("orz").appendChild(e);} </script> <button onclick="I()">innerHTML=</button> <button onclick="D()">write()</button> <button onclick="A()">DOM()</button> <div id="orz"></div> で hoge.jsに alert(1) とでも書いて試してみてください。 そこまでわかれば、どうすれば実現できるかは、わかるかと思います。

horixx
質問者

お礼

ありがとうございます。 チャレンジしてみます。 子ウィンドウそのものに、javascriptの記述をしても動作はしない、 そのため、上記のfunction Aで、javascript用のDOMを作成して あげる必要があるとの認識で進めてみます。

  • fire--
  • ベストアンサー率49% (146/293)
回答No.1

まるで自信ないのですが、 子ウィンドウといってもブラウザとしての別ウィンドウではないから、 その中身は親とまとめてひとつのhtmlですよね。 だとしたら、子の中のhead要素って無視されてしまうのでは?

horixx
質問者

お礼

正月休みで、お返事遅れまして申し訳ありません。 いろいろ試して見たところ、 たしかに、 IEは、ヘッダ情報が無視 FireFOXは、ヘッダを見てくれました。 が、どうもjavascriptは、見てくれない様です。 でもありがとうございます。

関連するQ&A

  • GoogleMapの情報ウィンドウの動的表示

    C#、asp.netで開発しています。 DBから持ってきた情報をGoogleMapの情報ウィンドウに記載したいです。 マーカーがつく場所は動的に変わるため、xmlファイルに出力したのちに表示しようと考えています。 http://mspec.jp/blog/archives/67 こちらのサイトを参考に、javascriptを書いたのですが、setPointMarker()からMarkerSet(lat,lng,text)へ動作しません。 setPointMarkerの「$.ajax({」の部分が動作していないように感じています。 ajaxは特別な記述がないと動かないものでしょうか。 aspxファイルにjqueryを読み込むタグは記載しているのですが、それだけではajaxは動かないのでしょうか。 上記サイトでも、特別ajaxの何かのファイルを読み込んでいる記述が見当たらなかったため、困っています。 api V3からはxmlを読み込むタグがなくなったそうなので、 どのようにして読み込めばいいのかわからず途方に暮れています。 もし、動的なものを出力するのにxml以外で何かいい方法があればそちらも検討します。 どなたかアドバイスお願いいたします。

  • google map吹き出し

    下記google mapをスマホで見ると吹き出しが頻繁に出たり消えたりして見づらいのですが 吹き出しは出しっぱなしでカウントダウンのみ動かす方法ありませんか。 <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <style type="text/css"> div#map-canvas { position: absolute; width: 100%; height: 100%; } </style> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript"> var geocoder, map, marker, infoWindow; function initialize() { geocoder = new google.maps.Geocoder(); var latlng = new google.maps.LatLng(35.710058, 139.810718); var mapDiv = document.getElementById('map-canvas'); var myOptions = { center: latlng, zoom: 8, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(mapDiv, myOptions); google.maps.event.addListener(map, 'click', function(e) { marker = new google.maps.Marker({ position: e.latLng, map: map, draggable: true, title: "Click Me!" }); if(infoWindow) infoWindow.close(); infoWindow = new google.maps.InfoWindow(); var targetDate = Date.parse('2014/07/07 00:00:00'); setInterval ( function() { var now = new Date().getTime(); var diff = targetDate - now; var day = Math.floor ( diff / 86400000 ); diff -= day * 86400000; var hour = Math.floor ( diff / 3600000 ); diff -= hour * 3600000; var minute = Math.floor ( diff / 60000 ); diff -= minute * 60000; var second = Math.floor ( diff / 1000 ); if(infoWindow) infoWindow.setContent ( '七夕まで' + day + '日' + hour + '時間' + minute + '分' + second + '秒' ); },1000); infoWindow.open(map, marker); map.setCenter(e.latLng); }); }; google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <div id="map-canvas"></div> </body> </html>

    • ベストアンサー
    • AJAX
  • Google Map (外部から情報ウィンドウ開く

    Google Maps API v3 において「地図外のHTMLから地図内の情報ウィンドウを開く」ということをやろうとしているのですが、どうにもうまくいきません。 下記コードにおいて、地図外にある「あいうえお商店」や「かきくけこ不動産」をクリックした際、地図内に情報ウィンドウが開くようにするためにはどのようにすればよいでしょうか。 すでに丸3日間悩んでおり、私の力ではどうにもならないと判断したため、皆さまのお力をお借りすることにしました。大変恐れ入りますが、貧弱な知識の私にどうか知恵を与えてやって下さい。どうぞよろしくお願い致します。 深みにはまって抜け出せないコードは以下の通りです。 ---------------------------------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>test</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript" src="//maps.googleapis.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> var currentInfoWindow = null; //最後に開いた情報ウィンドウを記憶 function initialize() { var latlng = new google.maps.LatLng(35.67105, 139.743624); var opts = { zoom: 13, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"), opts); // ***************1件目のデータ*************** var m_latlng1 = new google.maps.LatLng(35.675224, 139.737914); var marker1 = new google.maps.Marker({position: m_latlng1,map: map,icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=1|3CFFF8|000000',title: '港区赤坂3-3-3' }); var contentString1= '</p>あいうえお商店</p></div>'; var infowindow1 = new google.maps.InfoWindow({content: contentString1 }); // ***************1件目のデータ*************** // ***************2件目のデータ*************** var m_latlng2 = new google.maps.LatLng(35.670772, 139.733875); var marker2 = new google.maps.Marker({position: m_latlng2,map: map,icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=2|3CFFF8|000000',title: '港区赤坂5-5-5' }); var contentString2= '</p>かきくけこ不動産</p></div>'; var infowindow2 = new google.maps.InfoWindow({content: contentString2 }); // ***************2件目のデータ*************** google.maps.event.addListener(marker1 , 'click', function() { if (currentInfoWindow) { currentInfoWindow.close(); } infowindow1.open(map,marker1); currentInfoWindow = infowindow1; }); google.maps.event.addListener(marker2 , 'click', function() { if (currentInfoWindow) { currentInfoWindow.close(); } infowindow2.open(map,marker2); currentInfoWindow = infowindow2; }); } function myclick(idx) { google.maps.event.trigger(marker[idx],'click'); } </script> </head> <body onload="initialize()"> <div id="map_canvas" style="width: 700px; height: 500px"></div> 1 <a href="javascript:myclick(0)">あいうえお商店</a></p> 2 <a href="javascript:myclick(1)">かきくけこ不動産</a></p> </body> </html> ---------------------------------------------------------------- 大変恐れ入りますが、どうぞよろしくお願い致します。

  • グーグルマップの吹き出しからのclickが効かない

    http://ideone.com/RzDykQ グーグルマップに吹き出しウインドウを表示させることができるのですが、 そこに配置したフォームからボタンをクリックしてもその処理を $('#send').click(function() のメソッドで受け取ることができません・・・ グーグルマップに吹き出しからではなく、 普通のフォームからやれば受け取ることができるのですが どこが間違えていてどのように記述するれば良いのでしょか?

    • ベストアンサー
    • AJAX
  • Googleマップの利用について

    とあるサイトを参考に以下のコードを実行したところ、「エラー:'}'がありません。」とランタイムエラーが発生してしまいます。 色々試してみたところで、どうも文字コードが問題になっていそうなところまでは分かったのですが、解決方法が分かりません。 google.loadメソッドを使用する際に、読み込むモジュール(?)の文字コードを指定することは出来ないのでしょうか? ----------- コード ---------- // API本体を読み込む google.load('maps', '2'); また現状の解決策として、 <script type="text/javascript" charset="utf-8" src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=****"></script> のようにGoogleMapのスクリプトをロードしていますが、これはgoogle.loadメソッドを使用するのと同等の処理なのでしょうか? 以上、よろしくお願いします。

  • google mapのマーカーについて

    オブジェクトに関わる質問があります。 今ある地図上に複数のマーカーを表示させて地図をクリックすると、ズームされた子ウィンドウが出てきます。 そして、子ウィンドウではマーカーをドラッグする事が可能になっており、親ウィンドウから子ウィンドウへの情報の受け渡しはできたのですが、移動させたマーカーの新しい緯度、経度の情報を更新させて親ウィンドウに引き渡す作業で手間取っております。 それぞれのマーカーはオブジェクになっており、まだオブジェクトの理解が足りないので、もしわかる方がいましたらお願いします。 以下のコードを使ってます // creating a map var map = new GMap2(document.getElementById("map")); var pointsets = [40.9, -74.2, 41.3, -73.8, 41.1, -74.1, 40.9, -74.18, 41.29, -73.79]; var sets = pointsets.split(","); var markerpoints = new Array(sets.length/2); for(var i=0; i<sets.length/2; i++) { markerpoints[i] = new GLatLng(sets[2*i], sets[2*i+1]); } for(var i=0; i<sets.length/2; i++) { map.addOverlay(makeMarker(markerpoints[i])); } function makeMarker(point){ var marker = new GMarker(point, {draggable:true, autoPan:false, bouncy:true}); return marker; } 以上のコードを使うと、マップ上に複数のマーカーが表示されて、それぞれのマーカーはドラッグ可能になります。 移動させたマーカーの新しい情報を更新させていくには、イベントを使えばと思っているのですが、効率のよいやり方はありますでしょうか? お手数ですが、よろしくお願いします

  • 子ウィンドウから子ウィンドウ

    子ウィンドウから文字をクリックして、 同じ大きさの子ウィンドウを開かせたいのですが、 下記のJavaScriptでは子ウィンドウが開きません。 子ウィンドウから子ウィンドウを開かせるには どのようにしたらいいのでしょうか? ご回答宜しくお願い致します。 head内は、 <script type="text/javascript"><!-- function subwin(file){ window.open(file,"subwin","resizable=1, width=600, height=500, scrollbars=yes"); } //--></script> body内の呼び出し部分は、 <a href="ファイルのURL" onclick="subwin('ファイルのURL'); return false;">

  • 親ウィンドウと同時に子ウィンドウを閉じる

    お世話になります。 親ウィンドウからjavascriptにて子ウィンドウを開き、親ウィンドウが 閉じられたら子ウィンドウも閉じると言う処理をしております。 別サーバーにある画面を子ウィンドウとして開いた場合、閉じることができません。 これは、javascriptの仕様でしかたが無いのでしょうか? それとも、別なやり方があるのでしょうか? 1)同一サーバーにある別サイト  同一サーバーにある別サイトを子ウィンドウとして開いた場合、親ウィンドウから  閉じることが可能 2)別サーバーにあるサイト  別サーバーにあるサイトを子ウィンドウとして開いた場合、親ウィンドウから  閉じることができない 環境  Windows2000ServerSP4  IIS5.0  ASP+javascript 親画面  http://pcxxx/siteP/sample.html  同一サーバーの別サイトを開く場合   win = window.open('http://pcxxx/siteA/sample.html', 'newwin');  別サーバーのサイト   win = window.open('http://pcyyy/siteB/sample.html', 'newwin'); どなたかご存知でしたらお教え下さい。 宜しくお願い致します。

  • Facebookでgoogle MAP

    Facebookページで、google MAPの複数マーカー表示を作りました。 しかしサーバーに上げ、ページを表示させようとすると、 このウェブサイトには別の Google Maps API キーが必要です。新しいキーは http://code.google.com/apis/maps/documentation/javascript/v2/introduction.html#Obtaining_Key で作成できます。 という文章が出て、地図が表示されません。 <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=APIキー" type="text/javascript"></script> Facebookではこの表記じゃダメなのでしょうか? ちなみにFacebookページはiframeで作っています。

  • 子ウインドウを開く際、フォームの内容を指定する方法

    よろしくお願いいたします。 たとえば、セレクトボックスを作り <form name="form1" method="post" action="send.cgi"> <select name="option1"> <option value="sample1">サンプル1</option> <option value="sample2">サンプル2</option> <option value="sample3">サンプル3</option> </select> </form> そしてjavascriptにて form1.option1.selectedIndex=2; などとすると、スクリプトからセレクトボックスの選択内容を変化させることができます。ここまでは問題ありません。 さて、このセレクトボックスが別ウインドウにあり、別ウインドウを開く際、特定の選択をした状態で開きたいのですが、それは可能なのでしょうか? まず、親ウインドウから子ウインドウを開きます。 var childWindow = window.open('http://hogehoge.com/sample.html', 'kowindow'); このhttp://hogehoge.com/sample.html(子ウインドウ)に、先ほどのフォーム、セレクトボックスが書かれています。 親ウインドウから、子ウインドウを開く際、セレクトボックスの選択内容を変化させたいのです。 kowindow.form1.option1.selectedIndex=2; みたいな感じですが、これでは動作しません。どうすればいいでしょうか? また子ウインドウに何かスクリプトを埋め込む必要があるでしょうか。 どうぞよろしくお願い申し上げます。

専門家に質問してみよう