• ベストアンサー

javascriptの基本的なことだと思います。google map

google mapをサイト内にとりこめると知って、 挑戦しています。 一応、googleのサイトにあったjavascriptを埋め込んで、 表示できるようになりました。 その中に、 document.createTextNode("~~~~~~~")); というのがありまして、 ~~~のところに文字を入れると、 googleマップに吹き出しが出てメッセージが出るようになります。 ~~~の部分が長文になると、吹き出しが横に長くなってしまいます。 改行したいのですが、どうしたらよいのでしょうか?

質問者が選んだベストアンサー

  • ベストアンサー
  • think49
  • ベストアンサー率59% (285/482)
回答No.2

そのコードを見てみないことには正確に言えませんが、とりあえず。 createTextNodeメソッドはテキストノードを作るメソッドなので、そこで改行を宣言することは出来ません。 改行を宣言するには createElement() でbr要素ノードを作ってください。 NG: document.body.appendChild(document.createTextNode("test\ntest")); OK: var node = [document.createTextNode('test'),document.createElement('br'),document.createTextNode('test')]; for(var i=0,max=node.length;i<max;i++){ document.body.appendChild(node[i]); } 「JavaScript DOM」で検索すると関連情報が見つかります。 HTMLの予備知識があればDOMは比較的理解しやすいと思います。 document.createElement - 指定タグでのエレメント作成 - JavaScriptリファレンス http://javascriptist.net/ref/document.createElement.html JavaScript : createTextNode http://www.openspc2.org/JavaScript/reference4/DOM/createTextNode/index.html element.appendChild - 指定要素へ子要素追加 - JavaScriptリファレンス http://javascriptist.net/ref/element.appendchild.html

takeetakee
質問者

お礼

すみません、回答遅くなりました。 その後、 DOMについて理解を進めまていろいろな事ができるようになりました。 DOMの勉強に時間がかかったため、当質問内容の部分について作成を見送りました。どうもありがとうございました。

その他の回答 (1)

  • benelli
  • ベストアンサー率51% (78/152)
回答No.1

試したわけではないのですが、改行したい部分に"\n"(半角)または"<BR>"を入れたらどうでしょうか? 例: document.createTextNode("一行目\n二行目"); ソースコードを見たわけではないので断言はできませんが、どちらかで可能なことかと思います。

関連するQ&A

  • google map について

    google map が表示されません。 全く表示されないのですがどの部分が悪いのでしょうか? サイトは作ってもらいました。 新たに自分で新しいページを作ろうとしています。 作ってもらったサイトにあったマップを新しいページにも貼りたいため ソースを見て、キーの載ってる部分、javascriptの部分、地図を表示させる部分、のタグをコピーしましたが、全く何も表示されない状態です。

  • グーグルマップのピンの立て方

    お世話様です。 グーグルマップにピンを立てたいと思います。 そこをクリックすると吹き出しが出て 文字が出て、写真を表示したいと思います。 そのようにするにはどうすればいいでしょうか?

  • グーグルマップをHPに加えましたが、吹き出しからリンクする方法がわかり

    グーグルマップをHPに加えましたが、吹き出しからリンクする方法がわかりません。 よくグーグルマップの吹き出しの文字にリンクが張ってあり、目的の場所に移動できますが、 どうやればいいのでしょうか。初心者なのでよろしくお願いします。

    • ベストアンサー
    • HTML
  • グーグルマップAPIで右クリックで吹き出し

    お世話になっております。 グーグルマップAPIを使ってサイトを作成しています。 右クリックをして、吹き出しを出すにはどうしたらよろしいでしょうか? 以下のようなスクリプトがあるのですが、全く反応しません。 google.maps.event.addListener(map, "rightclick", function() { infowindow.setContent(contentString); infowindow.open(map,marker); document.getElementById("result").innerHTML += "<br>rightclickイベント発生:"+(new Date()); 上記ではなく、rightclickの部分をclickにすると動きますが、右クリックで動作させたいのです。 できれば、その吹き出しの中にフォームを作りたいと思っています。 よろしくお願い致します。

  • Googleマップ

    日記にGoogleマップのURLを貼り付けて飛ぶと、 どうしても吹き出しが消えてしまいます。 http://maps.google.com/maps/ms?ie=UTF8&hl=ja&msa=0&msid=108195582852458022341.000443d83e2af87084713&ll=35.169371,136.954472&spn=0.015541,0.025599&z=16&iwloc=000455ac8da81b486ecb0 上の方の様にリンクして飛んでも吹き出しが開いた状態にしたい場合、どうしたらいいのでしょうか? 伝わりにくい質問でスミマセン。 一応調べましたがイマイチわかりませんでした。 よろしくお願いします!

  • グーグルマップの吹出しは複数可能?

    グーグルマップを自分のサイトに設置しようとしています。 マーカーをクリックすると吹き出しが出ますが 他のマーカーをクリックすると吹出しが消えて2つ表示ができません。 吹出しでなくてもいいのですが 吹出し見たいのを複数常時表示することはできますか? お忙しいところ是非教えていただければと思います。 よろしくお願いします。

  • Google Map API2 openInfoWindowHtmlのmaxWidth

    Google Map API2で、openInfoWindowHtmlを使って吹き出しを作ってます。 ドキュメントなどを見ると、maxWidthプロパティで吹き出しの幅を変えられることになっているのですが、いろいろやってみても幅が変わらないようです。 サンプルソース function seeAt(lat, lng, title, body, size) { var point = new GLatLng(lat, lng) map.setCenter(point, size); var html="<b>"+title+"</b><p>"+body+"</p>"; var marker = new GMarker(point); map.addOverlay(marker); map.openInfoWindowHtml(point, html, {maxWidth:400}); } という関数を作っておいて、 <a href="javascript:void(0);" onclick="seeAt(35.55, 139.78, '羽田空港', '', 13);">羽田空港発</a> といった感じで、呼び出します。 地図移動やマーカー、吹き出しや中の文字列はちゃんと表示されるんですが、幅設定だけができません。

  • Googleマップの埋め込みテクニック

    サイトの交通案内などにGoogleマップを活用する企業は多いですね、 ↓この会社のように、吹き出しに単に住所を掲示するだけではなく、 http://www.emix.ne.jp/company.html ↓この会社のように、企業名、住所、電話などの諸情報を吹き出しに埋める方法はありますか? http://www.gco.co.jp/ja/riyo/access.html それとも、会社自体が大きいところじゃないとそういうことはできないでしょうか?

  • 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
  • グーグルマップで開くようにするにはどうすればいいで

    アンドロイド携帯から、食べログの赤丸で囲った部分の 「地図アプリで見る」を押した場合 グーグルマップで開くようにするにはどうすればいいですか? 以前に 「何で開きますか?」 みたいなメッセージ時の際に、 間違いでブラウザで開くを選択し、「ずっと」を選択してから グーグルマップに変える方法がわかりません。 携帯側の設定を変えればいいのでしょうか? XperiaのZ3を使っています。

専門家に質問してみよう