- 締切済み
googleのカスタム検索
googleのカスタム検索をホームページに設置しようと思っています。 アカウント取得して、設置しようとしているのですが、 ボタンを画像にしたり、ボックスの幅を変更できないのでしょうか? <div id="cse-search-form" style="width: 100%;">Loading</div> <script src="http://www.google.com/jsapi" type="text/javascript"></script> <script type="text/javascript"> google.load('search', '1'); google.setOnLoadCallback(function() { var customSearchControl = new google.search.CustomSearchControl('011829881965112279581:kkxhjvjwxl4'); customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET); var options = new google.search.DrawOptions(); options.enableSearchboxOnly("http://xxx.com"); customSearchControl.draw('cse-search-form', options); }, true); </script> <link rel="stylesheet" href="http://www.google.com/cse/style/look/default.css" type="text/css" /> 色々調べたのですが、イマイチ要領を得ることができませんでした。 教えてくださいお願いします。
- みんなの回答 (1)
- 専門家の回答
みんなの回答
- 4017B
- ベストアンサー率73% (1306/1777)
関連するQ&A
- Googleカスタマイズ検索のtargetについて
Googleカスタマイズ検索を自作のWEBにつかってます。 ちなみにここから作成できるものです。 http://www.google.co.jp/cse/ そして、作成されたソースはコレです。 <div id="cse" style="width: 220px;">Loading</div> <script src="http://www.google.com/jsapi" type="text/javascript"></script> <script type="text/javascript"> google.load('search', '1', {language : 'ja'}); google.setOnLoadCallback(function() { var customSearchControl = new google.search.CustomSearchControl('検索エンジン ID'); customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET); customSearchControl.draw('cse'); }, true); </script> これでWEBページ内で検索結果を表示することはできるのですが、検索結果をクリックしたら新しいウィンドウで開きます。 target="_blank"で開いてしまうということです。 新しいウィンドウで開かないようにする、つまり target="_self"もしくは target="_parent"にする方法はないでしょうか? 自分はjavascriptなどほとんどわかりませんが、それでなんとかなるお答えでも頑張って理解するので、ご教授いただければ幸いです。
- ベストアンサー
- JavaScript
- Google 自サイト検索結果 オーバーレイ表示で検索実行をjsからsubmitしたい
Googleの提供する検索窓を自サイトに設置しWEB2.0風にページ上に オーバーレイさせて結果を表示する"カスタム検索"について質問です。 以下がそのサービスが吐き出すコードです。(idっぽいのは一部XXXとかにしています) <form action="" id="searchbox_XXX:XXXcwe" onsubmit="return false;"> <div> <input type="text" name="q" size="40"/> <input type="submit" value="検索"/> </div> </form> <script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=searchbox_cwe&lang=ja... <div id="results_xxx:xxxcwe" style="display:none"> <div class="cse-closeResults"> <a>× 閉じる</a> </div> <div class="cse-resultsContainer"></div> </div> <style type="text/css"> @import url(http://www.google.com/cse/api/overlay.css); </style> <script src="http://www.google.com/uds/api?file=uds.js&v=1.0&key=xxx-xxx... type="text/javascript"></script> <script src="http://www.google.com/cse/api/overlay.js" type="text/javascript"></script> <script type="text/javascript"> function OnLoad() { new CSEOverlay("xxx:xxx", document.getElementById("searchbox_xxx:xxx"), document.getElementById("results_xxx:xxx")); } GSearch.setOnLoadCallback(OnLoad); </script> これで"検索"をクリックするとオーバーレイ表示されます。 これを"検索"ボタンクリックではなくjavascriptのsubmitで実行したいのです。 例えば <script language="javascript"> function submitG() { document.myForm.submit(); } </script> ↑submitG()を実行しても検索結果を表示してくれません。 submit自体は実行しているようなのですが。。 どなたか分かる方お願いします。
- ベストアンサー
- JavaScript
- 検索フォームで大変困ってます
今select boxを用意したマルチな検索フォームを作ってます。 現在困ってる内容は検索した後に、文字化けを起こしてしまいます。 色々調べてみたのですが原因がわからず困っております。 どなたか分かるかたがいらっしゃいましたら教えて頂きたく思います。 また間違ってる箇所の指摘と出来れば解答も頂ければ助かります。 よろしくお願いします。 <script type="text/javascript" charset="ja"> function dosearch() { var sf=document.searchform; var submitto = sf.sengines.options[sf.sengines.selectedIndex].value + escape(sf.searchterms.value); window.location.href = submitto; return false; } </script> <div class="search"> <form name="searchform" onSubmit="return dosearch();"> <input type="text" name="searchterms"> <input type="image" alt="検索" width=30 height=30 src="Search.png" style="vertical-align:-10px;> </form> </div> <div class="select"> <form name="searchform" onSubmit="return dosearch();"> <select name="sengines"> <option value="http://www.google.com/search?q=" selected>Google</option> <option value="http://search.yahoo.co.jp/search?p=">Yahoo</option> <option value="http://www.bing.com/search?q=">Bing</option></select> </form> </div>
- ベストアンサー
- HTML
- フォームの中でgoogleマップAPIの表示がずれてしまいます。教えてください
フォームの中でgoogleマップAPIの表示がずれてしまいます。教えてください こんにちは、よろしくお願いします <HEAD> <script src="http://maps.google.com/maps?file=api&v=2&key=googleマップキー" type="text/javascript" charset="utf-8"></script> </HEAD> <FORM> <div id="default-open"> <a href="javascript:;" onclick="document.getElementById('default-close').style.display='block'; document.getElementById('default-open').style.display='none';"> オプションを追加する</a> </div> <div id="default-close" style="display: none;"> <a href="javascript:;" onclick="document.getElementById('default-open').style.display='block'; document.getElementById('default-close').style.display='none';"> 閉じる</a><br> <div id="map" style="width:300px; height:300px; margin-left: 0px; margin-top:0px;"> <script type="text/javascript"> //<![CDATA[ if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(36.033333, 139.15), 8); } //]]> </script> </div> </FORM> 「オプションを追加する」をクリックしたら、javascriptで下側にgoogleマップAPIが現れるといったコンテンツを作っています マップの表示はできるのですが、中のマップの表示がどうしてもずれたような感じになってしまいます 灰色の帯のようなものがマップの周囲に出てきて、きちんと読み込まれて無いように見えます <div id="default-close">の外側に出すときちんと表示できるので、CSSで制御できないかと頑張ってみましたがうまくできません 上側の<div>タグで細工したのがずれる原因ではないかと思うのですが・・・ 誰かこの問題について分かる方はいないでしょうか
- ベストアンサー
- JavaScript
- 自作Googleの検索ボックスの薄い文字の作り方(サンプル付き)
いつも勉強させていただいております。 今回は質問をさせていただけないでしょうか。 よろしくお願いします。 http://hochi.yomiuri.co.jp/ Google Custom Searchという薄い文字があると思います。 結構おしゃれで、自分のHPにも付けようと思っています。 ソースをみると下記のようになっています。 <!-- Google CSE Search Box Begins --> <form id="searchbox_004729702764462794933:_lbkzyf7pac" action="http://hochi.yomiuri.co.jp/contents/cse/searchResults.htm"> <label for="q">サイト内検索</label> <input name="q" id="q" type="text" size="20" /> <input type="submit" name="sa" value="探す" /> <input type="hidden" name="cx" value="004729702764462794933:_lbkzyf7pac" /> <input type="hidden" name="cof" value="FORID:9" /> </form> <script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=searchbox_004729702764462794933%3A_lbkzyf7pac"></script> <!-- Google CSE Search Box Ends --> "searchbox_004729702764462794933:_lbkzyf7pac"の文字列は何か登録をしないと、もらえないのでしょうか? 他のHPを見ても、この文字列だけ違っているようです。 ご存知の方がいたら教えていただければと思います。
- ベストアンサー
- ホームページ作成ソフト
- Google Maps API の IE表示
一部のIEでGoogle Maps APIがうまく作動しません。 Safari/FF/IE8 では表示されます。 以下の処理は一通り試しました。 http://maps.google.com/support/bin/answer.py?hl=ja&answer=21849# よろしくお願いいたします。 ■HTML … <link href="style.css" rel="stylesheet" type="text/css" media="screen, print "/> <link rel="stylesheet" type="text/css" href="map.css" media="screen, print "/> <script type="text/javascript" src="gmap.js"></script> <script src="http://maps.google.com/maps?file=api&v=2&key=●●●" type="text/javascript"></script> … <div id="canvas"></div> … ■JavaScript // JavaScript Document window.onload = function() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("canvas")); var point = new GLatLng(●緯度●, ●経度●) var marker = new GMarker(point); GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml('<img src="●●●.gif"><br/><div id="gma">〒●●●-●●●<br/>●●●<br/><br/>TEL:●●●</div><img src="●●●.jpg">')}); map.addOverlay(marker); map.addControl(new GLargeMapControl()); map.addControl(new GScaleControl()); map.addControl(new GMapTypeControl()); map.setCenter(point, 15); map.openInfoWindowHtml(point, '<img src="●●●.gif"><br/><div id="gma">〒●●●-●●●<br/>●●●<br/><br/>TEL:●●●</div><img src="●●●.jpg">'); } };
- ベストアンサー
- JavaScript
- Javascriptの変数の中に変数を代入するには
Google chart というAPIがあります。これを利用して株価Chartを作ります。 https://google-developers.appspot.com/chart/interactive/docs/gallery/candlestickchart 末尾にGoogle Chartのソースを記載していますが このvar data内の ['Mon', 20, 28, 38, 45], ['Tue', 31, 38, 55, 66], ['Wed', 50, 55, 77, 80], ['Thu', 77, 77, 66, 50], ['Fri', 68, 66, 22, 15] の部分を変更することによりローソクチャートが引けます。 一方、 <script type="text/javascript"> var chart; chart = "<div id='chart'></div>"; document.write("" + chart + ""); </script> と記載すると ['Mon', 20, 28, 38, 45], ['Tue', 31, 38, 55, 66], ['Wed', 50, 55, 77, 80], ['Thu', 77, 77, 66, 50], ['Fri', 68, 66, 22, 15] のような株価変数が取得できるjavascriptを作成しました。 この2つを組み合わせると、株価チャートが引けることとなります。 ************************ 現在の苦境状況 ************************ Google chart APIに、下記のように「document.write("" + chart + ""); または "" + chart + "";または + chart + ;」を代入してみたのですが、チャートは表示されません。 変数の中に変数を入れたことが原因と思いますが、どのようにすればいいかアドバイス願います。 <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> var chart; chart = "<div id='chart'></div>"; google.load("visualization", "1", {packages:["corechart"]}); google.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ document.write("" + chart + ""); ], true); var options = { legend:'none' }; var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div')); chart.draw(data, options); } </script> </head> <body> <div id="chart_div" style="width: 900px; height: 500px;"></div> ************************ GoogleChart ************************ <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("visualization", "1", {packages:["corechart"]}); google.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Mon', 20, 28, 38, 45], ['Tue', 31, 38, 55, 66], ['Wed', 50, 55, 77, 80], ['Thu', 77, 77, 66, 50], ['Fri', 68, 66, 22, 15] ], true); var options = { legend:'none' }; var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div')); chart.draw(data, options); } </script> </head> <body> <div id="chart_div" style="width: 900px; height: 500px;"></div>
- ベストアンサー
- JavaScript
- JSの記述を別ファイルに移す
下記のHTML内の <script type="text/javascript">~</script> をtest.jsとして別ファイルに移す場合にどのように、記述するればよいのでしょうか。単純にコピペしたのですがうまくいきません。 初歩的だとは思いますが、ご指導をお願いします。 --------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <link href="css/style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/Draggable.js"></script> </head> <body> <div id="test1" class="test"></div> <div id="test2" class="test"></div> <script type="text/javascript"> var test1 = new Draggable("test1"); var test2 = new Draggable("test2"); </script> </body> </html>
- ベストアンサー
- JavaScript
- 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
- ブログのHTMLを、教えてください。
私のブログのHTMLを、評価ソフトでチェックしましたら、下記の2点を重大なミスと指摘されました。 どのように、修正すればいいのか分かりませんので、お分かりでしたら教えてください。 (1)下記につきまして、「</meta>に対応する開始タグ<meta>が見つかりません」と指摘されました。 <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /></meta> (2)下記につきまして、「<style>を<div>~</div>内に書くことはできません」と指摘されました。ご存知のように <style type="text/css">以下は グーグルアドセンス ですから、分解はできないと思います。 <div class="side">もし何かお調べ事がありましたら、下記より検索して下さい</div> <div class="kensaku"> <style type="text/css"> @import url(http://www.google.com/cse/api/branding.css); </style> <div class="cse-branding-bottom" style="background-color:#999999;color:#000000"> <div class="cse-branding-form"> <form action="http://www.google.co.jp/cse" id="cse-search-box"> <div> <input type="hidden" name="cx" value="partner-pub-5204993401304693:kui1sxf5o9l" /> <input type="hidden" name="ie" value="Shift_JIS" /> <input type="text" name="q" size="25" /> <input type="submit" name="sa" value="検索" /> </div> </form> </div> 尚、ここHTMLの範囲ではご判断できないようでしたら、著作権で保護されいると思われますので、個別にご必要な限りお知らせいたします。 宜しくお願いいたします。
- 締切済み
- その他(ソフトウェア)