google mapをサイト内にとりこめると知って、
挑戦しています。
一応、googleのサイトにあったjavascriptを埋め込んで、
表示できるようになりました。
その中に、

document.createTextNode("~~~~~~~"));

というのがありまして、
~~~のところに文字を入れると、
googleマップに吹き出しが出てメッセージが出るようになります。
~~~の部分が長文になると、吹き出しが横に長くなってしまいます。
改行したいのですが、どうしたらよいのでしょうか?

このQ&Aに関連する最新のQ&A

A 回答 (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.createElem …
JavaScript : createTextNode
http://www.openspc2.org/JavaScript/reference4/DO …
element.appendChild - 指定要素へ子要素追加 - JavaScriptリファレンス
http://javascriptist.net/ref/element.appendchild …
    • good
    • 0
この回答へのお礼

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

お礼日時:2010/01/15 13:38

試したわけではないのですが、改行したい部分に"\n"(半角)または"<BR>"を入れたらどうでしょうか?



例:
document.createTextNode("一行目\n二行目");

ソースコードを見たわけではないので断言はできませんが、どちらかで可能なことかと思います。
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Q文字+改行コードの置換について

文字+改行コードの置換についてご教授ください。
テキスト内の数字「9」とそれに続く改行コードのみ置換(削除)対象にしています。
全ての改行コードが対象ではないため、下記のようにエディタ(sakuraエディタ)で指定しました。

置換前: 9\r\n
※削除したいため、置換後の欄は空欄にしています。

しかし、この設定だと置換前の文字列を置換対象として認識しません。(検索対象としても)
\r\n だけだと改行コードを認識するので、文字と改行コードのセットを認識していないようです。

指定に誤りがあるのでしょうか。詳しい方ご教授お願いします。

Aベストアンサー

>「9」とそれに続く改行コードのみ置換(削除)
最後に「9」がある文字列の「9」を削除したいことでしょうか?

1あいうえお9 → 1あいうえお
9かきくけこ7 → 9かきくけこ7
さしすせそ999 → さしすせそ99

置換ダイアログの正規表現にチェックを入れます。

最後に「9」+改行コードのみ置換なら
置換前「9\r\n」
置換後「\r\n」

最後に「9」+改行コードがある行を削除するなら
置換前「^.*9\r\n」
置換後「」(空欄)

Qmap = new google.maps.Mapで作ったマップをレスポンシブ化したい

いつもありがとうございます。
Javaで挿入したgooglemap をレスポンシブ対応するにはどうすればいいのでしょうか?

width:100%; height:auto;にすると地図自体が消えてしまいます。

<div id="sample" style="width: 800px; height:600px;">

function initMap() {
 // #sampleに地図を埋め込む
map = new google.maps.Map(document.getElementById('sample'), {
center: center,
zoom: 15 // 地図のズームを指定
});

ざっくりとした質問で恐縮ですが、ヒントになるようなことがありましたらお願い致します。

Aベストアンサー

こんにちは

mapを表示する際には、表示用要素のサイズの基づいて地図のサイズを決めて表示しているはずです。
それなので、表示の際にサイズが無い(高さ0など)と、見かけ上は、地図は表示されなくなります。

mapが表示された後であれば内容があるので、autoでもサイズを確保できる可能性はありますが(マップ内のレイアウトの方法によりますけれど)、表示される前は何もないので、autoなどの指定にすると(特に高さは)0と評価されてしまいます。
ニワトリと卵みたいな関係ですね。

とは言うものの、質問者様には何らかのレイアウトに関してのイメージがおありでしょうから、そのサイズになるように表示要素を前もって指定できるようにしておけば宜しいのではないでしょうか。

例えば、簡単なのは%やvwで指定しておくとか。
%指定等だけですと、画面のプロポーションによっては困ったサイズになってしまうこともあり得るので、max-width、min-widthなども併用しておくといった方法が考えられます。

あるいは、地図の表示にjavascriptを利用しているので、表示の前に地図のサイズもスクリプトで指定するような考え方もあるでしょう。
画面サイズなどから地図のサイズを決めることも可能ですし、地図の縦横比を固定したいとかであれば、width:80%などと指定しておいて、スクリプトからはそのwidthの値を取得して、比率に基づいて高さを設定するとかいったことも可能です。

他にも方法はいろいろあると思いますが、レスポンシブで画像のサイズやレイアウトを制御する際の方法が参考になるのではないかと思います。
http://www.bing.com/search?q=%E3%83%AC%E3%82%B9%E3%83%9D%E3%83%B3%E3%82%B7%E3%83%96+%E7%94%BB%E5%83%8F%E3%82%B5%E3%82%A4%E3%82%BA&qs=n&form=QBRE&pq=%E3%83%AC%E3%82%B9%E3%83%9D%E3%83%B3%E3%82%B7%E3%83%96+%E7%94%BB%E5%83%8F%E3%82%B5%E3%82%A4%E3%82%BA&sc=2-12&sp=-1&sk=&cvid=860216CB8EB84EC6A8C8DE7A75F30526

こんにちは

mapを表示する際には、表示用要素のサイズの基づいて地図のサイズを決めて表示しているはずです。
それなので、表示の際にサイズが無い(高さ0など)と、見かけ上は、地図は表示されなくなります。

mapが表示された後であれば内容があるので、autoでもサイズを確保できる可能性はありますが(マップ内のレイアウトの方法によりますけれど)、表示される前は何もないので、autoなどの指定にすると(特に高さは)0と評価されてしまいます。
ニワトリと卵みたいな関係ですね。

とは言うものの、質問者...続きを読む

Qword置換で改行は置換できますか?

word置換で改行は置換できますか?

 一斉にEnterでの改行されている部分を置換する方法はないでしょうか?
 あればよろしくおねがいします。

Aベストアンサー

検索と置換画面の「置換」タブ画面で [オプション] を選択し、右下にある「あいまい検索」のチェックを外します。
検索する文字列にカーソルを置いて、[特殊文字] ボタン → 段落記号(P) を選択すると、検索する文字列に 「^p」が入力されます。(直接キー入力してもOKです)

置換後の文字列に置換する文字列、特殊文字を入力して置換をしますが、何も指定しないで、「置換」または「すべて置換」を行うと、改行が削除されます。

特殊文字の一覧項目の「段落記号」は[Enter]による改行で、[Shift]+[Enter]による改行は、「任意指定の行区切り(L)」です。
 

QGoogle maps API 吹き出しに画像

下記ページを元に新たにマップを作ろうとしています。

マーカーをクリックした時に現れる“吹き出し”にPicasaの画像をリンクして表示させたくて、試行錯誤しているのですが、上手くいきません。

xmlファイルに吹き出しに表示させるものを追記しないといけないんでしょうか?

よろしくお願い致します。

http://japonyol.net/editor/ds/yokohama-bousai.html

Aベストアンサー

XMLを使って情報ウィンドウに写真を表示するサンプルを作ってみました。
http://googlemaps.googlermania.com/okwave/q7613750.html

サイドバーの作り方はこちらのページにあります。
http://googlemaps.googlermania.com/google_maps_api_v3/ja/map_example_sidebar.html

このあたりを参考にどうぞ。

QWordVBA 置換処理での改行文字の可否

(実際にはExcelのVBAからWordファイルを開いての処理になるのでExcelのVBAで組んでいますが、)
WordのVBAで、置換処理を作成しています。
keyword1 = "検索文字"
keyword2 = "置換文字"
With objSelection.Find
.Text = keyword1
.Forward = True
.MatchWholeWord = True
.Replacement.Text = keyword2
.Execute Replace:=wdReplaceAll
End With
置換処理自体は出来ています。上記処理は置換部分の抜粋です。
しかし行いたいことはタイトルにもあります通り、置換文字中に改行を含めた状態での置換処理です。
長い文字列を置換するだけなら問題ないのですが、改行を含めてしまうと改行文字が別の文字に置き換えられてしまうようです。
置換先でも改行された状態にしたいのですが、これは書き方に問題があるのでしょうか?
もしくは置換処理ではなく、他の方法を取る必要があるのでしょうか?
教えてください。よろしくお願いいたします。

(実際にはExcelのVBAからWordファイルを開いての処理になるのでExcelのVBAで組んでいますが、)
WordのVBAで、置換処理を作成しています。
keyword1 = "検索文字"
keyword2 = "置換文字"
With objSelection.Find
.Text = keyword1
.Forward = True
.MatchWholeWord = True
.Replacement.Text = keyword2
.Execute Replace:=wdReplaceAll
End With
置換処理自体は出来ています。上記処理は置換部分の抜粋です。
しかし行いたいことはタイトルにもあります通り、置換文字中に改行を含めた状態での置換...続きを読む

Aベストアンサー

こんにちは。

>長い文字列を置換するだけなら問題ないのですが、改行を含めてしまうと改行文字が別の文字に置き換えられてしまうようです。

質問の「WordVBA 行の削除」で、偶然に書いたのですが、改行コードの問題で、Excel側は、セルにvbLF が入っているはずですから、

一旦取得した、置換文字を、以下のようにして
keyword2 = Replace(keyword2, vbLf, Chr(11), , , vbBinaryCompare)

置換すればよいのではありませんか?

ちなみに、これが入っているWordテーブルのセルの中で、改行コードの種類が確認できれば、「WordVBA 行の削除」のVBAのほうも可能です。Paragraph 自体の変更はありません。

QGoogle maps api, xmlデータ

mysqlに格納したデータをphpにてxmlデータを生成しました。
xmlデータは、◯◯.phpファイルです。
このデータをHTML5とjavascriptを使ってgoogleマップに表示させるところでつまづいています。

いろいろと参考になりそうなサイトを見てコーディングしているのですが、うまくいきません。

シンプルにマップにデータを表示させるということに関してアドバイスや参考になるサイト等を教えて戴けないでしょうか。

宜しくお願いします。

Aベストアンサー

うまくいきません、だけだとどこが問題かわからないので、もう少し情報を書くようにしましょう。XMLを読み込んでGoogleマップに独自マップとしてデータを登録する、というのは、シンプルにといってもそれなりの作業が必要です。

1. XMLデータの取得。
2. XMLデータをもとに、JavaScriptオブジェクト(XmlDocument)へのパース。
3. XmlDocumentから必要な要素のオブジェクトを取得。
4. Google Maps APIでマーカーを追加するには、まずnew google.maps.LatLngで位置オブジェクトを作成し、それをもとにnew google.maps.Markerでマーカーオブジェクトを作成して組み込む。

Maps API v.3ベースで考えてあります。どこまでできていますでしょうか。これらの処理を実装しないといけないので、シンプルといってもそこそこコードを書かないといけません。

ちなみに、一番引っかかるのが、XMLデータからのパースでしょう。Ajaxを利用して取得するのであれば、responseXMLでパース済みのオブジェクトを取得できます。これが一番簡単なやり方だろうと思います。後は、手順さえわかっていれば難しくはありません。


var map = new google.maps.Map(略);

// Ajaxのコールバック関数
function callback(request){
var xmlDoc = request.responseXML;
var datas = xmlDoc.documentElement.getElementsByTagName("各データの要素");
for (var i = 0; i < datas.length; i++) {
var data = datas[i];
var point = new google.maps.LatLng(data[i].getAttribute("緯度"),data[i].getAttribute("経度"));
var options = {
position: point,
map: map,
title: data[i].getAttribute("タイトル")
};
var marker = new google.maps.Marker(options);
}
}

AjaxでXMLを取得できるなら、コールバック関数での処理はこんな感じになるでしょう。XMLデータの構造などはそれぞれのコードにあわせて修正して下さい。もしAjaxを利用しないということであれば、XMLのパースは別に考えて下さい。

うまくいきません、だけだとどこが問題かわからないので、もう少し情報を書くようにしましょう。XMLを読み込んでGoogleマップに独自マップとしてデータを登録する、というのは、シンプルにといってもそれなりの作業が必要です。

1. XMLデータの取得。
2. XMLデータをもとに、JavaScriptオブジェクト(XmlDocument)へのパース。
3. XmlDocumentから必要な要素のオブジェクトを取得。
4. Google Maps APIでマーカーを追加するには、まずnew google.maps.LatLngで位置オブジェクトを作成し、それをもとにnew google...続きを読む

QフリーソフトYokkaGrepでの置換時の改行作業

フリーソフトYokkaGrepでの置換時の改行作業

「改行 置換」でググると、改行を置換でなくす…という方法はでてくるのですが、
置換する時に改行をつける方法がよくわかりませんでした

やりたいことは

aaaa
bbbb
</body>

という文に

検索文字列  </body>
置換後文字列 [改行]ccc[改行]</body>

最終的に

aaaa
bbbb
ccc
</body>

という文章にしたいです。

YokkaGrepというフリーソフトを使っているのですが
改行の指定方法がわかりません。。。

よろしくお願いいたします

Aベストアンサー

ううーんゴメンナサイ。
いまそのソフトをインストールして試す時間がありません。
YokkaSoftのサイトには掲示板があって活発に書き込みがあるようなので、そこで質問してはどうでしょうか。
下のページからsupportで行けるみたいです。
http://www.yokkasoft.net/

QGoogle maps api v3

https://developers.google.com/maps/articles/phpsqlajax_v3?hl=ja
を参考にコーディングし、いろいろなサイトも調べてながら(手探り)ですが、どうしてもうまく表示されません。

【maps.php】にてxmlデータを生成しました。それを使ってサイトに表示させるというものです。
うまく表示されないというか、画面が真っ白になってしまいます。
アドバイス等ご教示頂ければ幸甚です。

【index.html】

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Maps</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/jacascript">
//<![CDATA[
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(35.66, 139.69),
zoom: 13,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;

// Change this depending on the name of your PHP file
downloadUrl("maps.php", function(data) {
var xml = parseXml(data);
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[[]i].getAttribute("name");
var address = markers[[]i].getAttribute("address");
var tel = markers[[]i].getAttribute("tel");
var email = markers[[]i].getAttribute("email");
var message = markers[[]i].getAttribute("message");
var point = new google.maps.LatLng(
parseFloat(markers[[]i].getAttribute("lat")),
parseFloat(markers[[]i].getAttribute("lng")));
var html = "" + name + " " + address;
var icon = customIcons[[]type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow
});
bindInfoWindow(marker, map, infoWindow, html);
}
});
}


function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}

function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;

request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request.responseText, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}

function parseXml(str) {
if (window.ActiveXObject) {
var doc = new ActiveXObject('Microsoft.XMLDOM');
doc.loadXML(str);
return doc;
} else if (window.DOMParser) {
return (new DOMParser).parseFromString(str, 'text/xml');
}
}

function doNothing() {}

//]]>
</script>

</head>
<body onload="load()">
<div id="map" style="width: 500px; height: 300px"></div>
</body>
</html>

https://developers.google.com/maps/articles/phpsqlajax_v3?hl=ja
を参考にコーディングし、いろいろなサイトも調べてながら(手探り)ですが、どうしてもうまく表示されません。

【maps.php】にてxmlデータを生成しました。それを使ってサイトに表示させるというものです。
うまく表示されないというか、画面が真っ白になってしまいます。
アドバイス等ご教示頂ければ幸甚です。

【index.html】

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Maps</title>
<script src="http://m...続きを読む

Aベストアンサー

まず、<script type="text/jacascript">ではなくて<script type="text/javascript">です。

JavaScriptに markers[[]i] という書式はないです。
正しくは、markers[i]. です。

あと、間違いではないですが、mapTypeId: 'roadmap' の部分は、
mapTypeId : google.maps.MapTypeId.ROADMAP のが望ましいです。


少しコードを変えましたが、ほぼそのままのコードで動くように調整しました。
IE9(windows7), chrome で確認済みです。
http://googlemaps.googlermania.com/tmp/okwave_qa7606484/xml_sample.html


Google Maps APIに関する質問でしたら、こちらもどうぞ。
https://groups.google.com/group/google-maps-api-japan1

QMacOS10.6 エクセル2008 改行コード 置換方法

MacOS10.6 にてExcel2008を使用しています。
いま処理しようとしているデータのセル中に改行が含まれており、これらを置換にて一括消去をしたいのですが改行コードの入力方法がわかりません。
Windowsでしたら「Ctrl+J」で検索文字列の欄に入力できるようなのですがMacで行うと変な文字がでて当然ながら置換はできません。

セル中で「Control+Option+Return」にて改行を入力する事はできますが、これを上記の置換の検索文字列欄で行うと最終セルまで移動してしまうだけで置換はされません。

大量のデータで、しかも今後定期的な作業が必要となる為に途方にくれてます。
どなたか検索置換にて「検索文字列欄」に改行コードを入力する方法ご存じでしたら教えてください。
お願いいたします。

Aベストアンサー

残念ながらExcel2008はVBAが搭載されていないようです。

えっ!VBAがない?
http://officetanaka.net/excel/mac/tips02.htm

QGoogle maps API V3 ルート検索

Google maps API V3 のルート検索で、出発地と目的地のマーカー(アイコン)を独自のものにするには、どのように記述すればよろしいでしょうか?

デフォルトの設定では、出発地が“A”、目的地が“B”となっています。

以下、テストサンプルです。

http://itohiki119.iinaa.net/bousai/test.html

よろしくお願い致します。

Aベストアンサー

>>No.2 お礼

※関数の外(グローバルコード)に記述

// ラインオブジェクト
var lineObj = new google.maps.Polyline({
strokeColor: '#00FF00',
strokeOpacity: 0.5,
strokeWeight: 5
});
// 出発地マーカーオブジェクト
var startMarker = new google.maps.Marker({
icon: 'http://itohiki119.iinaa.net/bousai/icon/F_red_kage.png'
});
// 目的地マーカーオブジェクト
var endMarker = new google.maps.Marker({
icon: 'http://maps.google.co.jp/mapfiles/ms/icons/firedept.png'
});

function func(response) {
var routes = response.routes[0];
lineObj.setPath(routes.overview_path);
lineObj.setMap(map);

var legs = routes.legs[0];
startMarker.setPosition(legs.start_location);
startMarker.setMap(map);

endMarker.setPosition(legs.end_location);
endMarker.setMap(map);

map.fitBounds(routes.bounds); // 追記(自動的に...)
}
// 終了タグ直前にでも置く
</script>

>>No.2 お礼

※関数の外(グローバルコード)に記述

// ラインオブジェクト
var lineObj = new google.maps.Polyline({
strokeColor: '#00FF00',
strokeOpacity: 0.5,
strokeWeight: 5
});
// 出発地マーカーオブジェクト
var startMarker = new google.maps.Marker({
icon: 'http://itohiki119.iinaa.net/bousai/icon/F_red_kage.png'
});
// 目的地マーカーオブジェクト
var endMarker = new google.maps.Marker({
icon: 'http://maps.google.co.jp/mapfiles/ms/icons/firedept.png'
});

function func(respon...続きを読む


人気Q&Aランキング