失礼いたします。

Google maps V3 をタブメニューの中で表示させたいのですが、初期状態がdisplay=”none”のため、うまく表示できません。

Mapのタブメニューを初期状態で開いている display=”list-item” の状態だとうまく表示できています。


・初動
display:none
  ↓
・Map呼び出し前にjsにて強制表示
display:block
  ↓
Mapのtilesloadedイベント完了後に
display:none

のような流れで回避できるようですが、javascript の知識がないのでたいへん困っております。

現在

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false" …
<script type="text/javascript">
google.maps.event.addDomListener(window, 'load', function() {
var mapdiv = document.getElementById('map_canvas');
var myOptions = {
zoom: 17,
center: new google.maps.LatLng(緯度, 経度),
mapTypeId: google.maps.MapTypeId.ROADMAP,
scaleControl: true,
};
var map = new google.maps.Map(mapdiv, myOptions);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(緯度, 経度),
map: map,
title: 'タイトル'
});
});
</script>

となっております。

たいへんお手数ですが、どなたかご教授頂けると助かります。

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

A 回答 (3件)

タブメニューとのことですが、display=”none”だとうまくいかないみたいですので、かわりに



・ visibility:hidden; を用いる
・ 表示位置にoffsetをかけて画面外に置く
・ z-indexで重ね順を制御する

などの方法に変えれば、たしか大丈夫だったと思います。
visibility:hidden/visible;を使えばdisplay=”none”とほぼ同じでいけるのでは?

この回答への補足

ありがとうございます。
jQueryのタブメニューを使用しております。
visibility:hidden/visible; を使用する場合、
そちらのjsファイルを編集すればよいということでしょうか?

補足日時:2010/12/28 06:12
    • good
    • 0

jQueryのタブメニューといってもいろいろなのがありますけど、タブが選ばれ表示された時のコールバック関数を指定出来るタイプのライブラリーをお使いなら、


google.maps.event.addDomListener(window, 'load', function() {})
の代わりに、そのコールバック関数で、Google Mapの初期化をしてあげればよいと思います。
    • good
    • 0

「Google maps API V2」 の方を使えば、初期状態がdisplay=”none”


でもうまくいくんですけど、V3にこだわるんですよね。

この回答への補足

ご指摘ありがとうございます。
キー取得の関係で、可能であればV3でできればと考えております。

補足日時:2010/12/24 19:28
    • good
    • 0

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

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

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と評価されてしまいます。
ニワトリと卵みたいな関係ですね。

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

Qvar now = +new Dateの +は何?

var now = +new Dateの意味を教えてください
・現在時刻を取得?
・「 = +」の意味は? 「+=」みたいな短縮表記した演算子?
・「new Date」や「Date.now()」とは何が違うのでしょうか?

Aベストアンサー

+は単項プラス演算子です。

var now1 = +new Date();
var now2 = new Date();
alert(typeof now1);
alert(typeof now2);

で何となく分かると思いますが、+を付けることで数値に変換しています。


【JavaScript】単項 + 演算子で数値にする at softelメモ
http://www.softel.co.jp/blogs/tech/archives/4396

QGoogle Scriptの別シートの参照

現在、アクティブなスプレッドシートと同じシート名で、
別のスプレッドシートの同じシート名を
参照したいのですが、
getRangeで、リファレンスエラーになります。

var mySS = SpreadsheetApp.getActiveSpreadsheet();
mySS.getSheets()[j].activate();

var ss_copyFr = SpreadsheetApp.openById(GetID);
var ss_copyTo = SpreadsheetApp.getActiveSpreadsheet();

var sheet_copyFr = ss_copyFr.getSheetByName(name);
var sheet_copyTo = ss_copyTo.getSheetByName(name);

var d = sheet_copyFr.getRange('A1').getValues();
             ~~~~~~~~~~~~~~~~~~~~~~~~~~
何か、
よい解決策は、ありますでしょうか?

よろしくお願いします。

現在、アクティブなスプレッドシートと同じシート名で、
別のスプレッドシートの同じシート名を
参照したいのですが、
getRangeで、リファレンスエラーになります。

var mySS = SpreadsheetApp.getActiveSpreadsheet();
mySS.getSheets()[j].activate();

var ss_copyFr = SpreadsheetApp.openById(GetID);
var ss_copyTo = SpreadsheetApp.getActiveSpreadsheet();

var sheet_copyFr = ss_copyFr.getSheetByName(name);
var sheet_copyTo = ss_copyTo.getSheetByName(name);

var d = sheet_copyFr.ge...続きを読む

Aベストアンサー

>どの様な、スクリプトを記述すれば、
>実現するでしょうか?

質問文にあったスクリプトと基本的には大差ないと思いますよ。

var ss_copyFr = SpreadsheetApp.openById( コピー元のID );
var ss_copyTo = SpreadsheetApp.openById( コピー先のID );

var sheet_copyFr = ss_copyFr.getSheetByName( シート名 );
var sheet_copyTo = ss_copyTo.getSheetByName( シート名 );

var d = sheet_copyFr.getRange( 範囲指定 ).getValues();
sheet_copyTo.getRange( 範囲指定 ).setValues(d);

こんな感じでできるはずです。

QGoogle Apps Scriptの日付の比較

日付の比較を行うには、

どのようにしたらよろしいでしょうか?

比較対象セルには、
yyyy/mm/dd表示形式が設定されています。

単純に、d1 == d2
だと、できません。

よろしくお願いします。

Aベストアンサー

前に確か回答したと思いますが……。

2つのセルに日付のフォーマットが設定されているのでしたら、それをもとにDateオブジェクトを作成し、そこからgetTimeでミリ秒換算した値を取り出して引き算すればいいです。得られた結果を1日のミリ秒数で割れば日数が得られます。

function testfunc(e) {
var sheet = SpreadsheetApp.getActiveSheet(); // とりあえずアクティブシートを指定
var r1 = sheet.getRange(1, 1); // 1つ目のセル
var r2 = sheet.getRange(2, 1); // 2つ目のセル
var d1 = new Date(r1.getValue()); // Dateを作成
var d2 = new Date(r2.getValue()); // Dateを作成
var dt = Math.abs(d1.getTime() - d2.getTime()); // ミリ秒数値を引き算
var d = dt / (1000 * 60 * 60 * 24); // 1日のミリ秒数で割り算
Logger.log(d + "日 "); // ログに出力
}

前に確か回答したと思いますが……。

2つのセルに日付のフォーマットが設定されているのでしたら、それをもとにDateオブジェクトを作成し、そこからgetTimeでミリ秒換算した値を取り出して引き算すればいいです。得られた結果を1日のミリ秒数で割れば日数が得られます。

function testfunc(e) {
var sheet = SpreadsheetApp.getActiveSheet(); // とりあえずアクティブシートを指定
var r1 = sheet.getRange(1, 1); // 1つ目のセル
var r2 = sheet.getRange(2, 1); // 2つ目のセル
var d1 = new Date(...続きを読む

QGoogle Apps Scriptでのスプレッドシート運用について

複数人でスプレッドシート利用して業務管理を行おうとしています。
初心者のため色々なサイトやテンプレをコピペしながらスクリプトを作成しましたが、
エラーがでてしまうので、スクリプト記述をご教示いただきたいです。

管理表はスプレッドシートの列にいくつか項目を設けており、
A列:進捗ステータス、B列:担当者に対して処理を行いたいです。

①選択しているセルのA列が「完了」でない、かつ、B列に必ず担当者が記載されている
→スクリプトを実行すると、A列に「完了」と入力し、担当者欄を青にする
→「完了しました」のメッセージボックスを出す
②A列が「完了」になっている、もしくは選択しているセルがグレー
→メッセージボックス「完了しています」
③それ以外
→「処理できません」

①~③の処理をスクリプトで処理しようとコピペ等で作成しました。
追加メニューの自動処理から実行する形になります。
-----------------------------------------------
function finished(){

var sheet = SpreadsheetApp.getActiveSheet();
var range = sheet.getActiveRange();
var contents = sheet.getRange(i,1).getValues()

if(i = 1; contents[i][0] == '' && contents[i][2] != ''){ //処理①
sheet.getRange(i, 1).setValue('完了');
sheet.getRange(i, 2).setBackgroundRGB(0, 0, 255);
Browser.msgBox('完了しました');
}else if(contents[i][0] == '完了){ //処理②
Browser.msgBox('完了しています');
}else{ //処理③
Browser.msgBox('処理できません。');
}
}

//シートを開いたら実行
function onOpen() {
var sheet = SpreadsheetApp.getActiveSpreadsheet();

//カスタムメニュー「自動処理」作成
var subMenu = [
{name: '完了処理', functionName: 'finished'},
];

sheet.addMenu('自動処理', subMenu);

}
-----------------------------------------------
理解もできていないままつぎはぎで記述しているのでエラーばかりです。。。
またグレーRGB(242, 242, 242), RGB(217, 217, 217), RGB(192, 192, 192)を取得したいのですが、取得方法がわからず記載できてません。
また複数人で同時に処理を行う場合もありますので、重複しないようにする方法はありますでしょうか?
ご教示いただけますと幸いです。よろしくお願いいたします。

複数人でスプレッドシート利用して業務管理を行おうとしています。
初心者のため色々なサイトやテンプレをコピペしながらスクリプトを作成しましたが、
エラーがでてしまうので、スクリプト記述をご教示いただきたいです。

管理表はスプレッドシートの列にいくつか項目を設けており、
A列:進捗ステータス、B列:担当者に対して処理を行いたいです。

①選択しているセルのA列が「完了」でない、かつ、B列に必ず担当者が記載されている
→スクリプトを実行すると、A列に「完了」と入力し、担当者欄を青にす...続きを読む

Aベストアンサー

補足に回答します。

A列が空、B列が空ではない場合、処理①に入ってしまうため、処理②になりません。

対応するには以下のようにしてください
・処理①と処理②の順序を変える
または
・処理①の条件にグレー以外という条件を加える
→if(finishCell.getValue() == '' && personCell.getValue() != '' && !(finishCell.getValue() == '完了' || activeColor == glay1 || activeColor == glay2 || activeColor == glay3))

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


人気Q&Aランキング

おすすめ情報