• ベストアンサー
※ ChatGPTを利用し、要約された質問です(原文:google マップ サイズ変更)

google マップ サイズ変更

このQ&Aのポイント
  • Windowsのサイズ変更によりGoogleマップの表示サイズも変化させる処理を行いたいです
  • ローカルではFirefox、Opera、IE6で実現できますが、HPにアップロードするとOpera以外では地図サイズが変化しません
  • アドバイスをいただける方がいらっしゃいましたら、よろしくお願いいたします

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

  • ベストアンサー
  • takoashi
  • ベストアンサー率39% (21/53)
回答No.2

> どうやら、yahooジオシティーズが原因かと思われます。 これ気になりますね。 文字コードの関係とかじゃないかな… 広告のコードがなにか影響してるとか。 解決方法がないことはないはずです。 > いろいろ勉強が必要で、役に立つ文献をいろいろ探したのですが、 > ・入門 Ajax (単行本) > 以外にもし、何かあれば嬉しいです。 prototype.jsなどのライブラリのソースコードを読んでみるといいと思います。 細かな動作がどのようになっているかがわかれば理解が深まります。

全文を見る
すると、全ての回答が全文表示されます。

その他の回答 (1)

  • takoashi
  • ベストアンサー率39% (21/53)
回答No.1

その方法ではうまくウインドウサイズが取得できないことがあります。 map.checkResize(); を使うとうまくいきます。

gonchin01
質問者

お礼

ありがとうございます。 どうやら、yahooジオシティーズが原因かと思われます。 他のウェブでupしたら動作しました・・・。初めて使いましたが、制限があるのですね・・・。 ですが、ご指摘ももっともかと思われます。 いろいろ勉強が必要で、役に立つ文献をいろいろ探したのですが、 ・入門 Ajax (単行本) 以外にもし、何かあれば嬉しいです。

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • グーグルマップのサイズが変更できない

    ここでの質問じゃなかったらすみません; 以下のようにグーグルマップを使用しています。 google.load('maps', '3.0', {other_params: 'sensor=false'}); google.load('jquery', '1.3.2'); google.setOnLoadCallback(function() {   jQuery(document).ready(function($) {     var latlng = new google.maps.LatLng(35.658632, 139.745411);     var options = {       zoom: 2,       center: latlng,       mapTypeId: google.maps.MapTypeId.ROADMAP     }     map = new google.maps.Map($('#mapCanvas').get(0), options); 略   }); }); これで普通にマップが表示されるのですが #mapCanvas { width: 100%; height: 300px; border: 1px solid #cecece; margin: 0; padding: 0;} このCSSでheightを100%にすると、マップが線のようになってしまいます。 横は自動でサイズ変更されるのですが、縦だけ300pxのように指定しないと画面が 見れません。 本家グーグルマップのように画面全体に表示したいのですが、どうすればよいので しょうか、どなたかご教示願います。

    • ベストアンサー
    • AJAX
  • javascriptで画像サイズをウィンドウのサイズに合わせて表示する方法

    javascriptを最近はじめてみました。 しかしどうも慣れないためか、最後の一歩で思うように動いてくれません。 基本的にやりたい事はウインドウサイズに合わせて画像サイズを変更できるようにしたいと思ってます。 何とかいろいろ調べて、下記のスクリプトまで来たんですが (確かこのサイトの他の方への回答からほぼ活用) これでは画面が表示されるときにスクリプトが適用されません。 その後ウィンドウのサイズ変更をすると適用してくれるのですが。 なにやらとても簡単な事で上手く動いてくれないのかもしれませんが、 どうしてもできそうにありません。 どなたかお分かりの方がいましたらご教授願えると大変助かります。 よろしくお願いします。 以下、javascript↓ <body style="overflow:hidden" bgcolor="#ffffff" leftmargin="0" marginheight="0" marginwidth="0" topmargin="0"> <img src="test.JPG" id="backgroundID" style="position:absolute;top:0px;left:0px;z-index:0;" onload="setSize()"> <div style=" color: black; font-size: medium; font-family: serif; visibility: visible; display: block; position: absolute; z-index: 1; top: -1px; left: 0"> <script type="text/javascript"> var imgObj = document.getElementById('backgroundID'); var imgSize = {w:0, h:0} window.onresize = setImg; window.onscroll = function() { var t, l; if (document.documentElement.scrollTop) { t = document.documentElement.scrollTop; l = document.documentElement.scrollLeft; } else if (document.body.scrollTop) { t = document.body.scrollTop; l = document.body.scrollLeft; } else { return; } imgObj.style.top = t + 'px'; imgObj.style.left = l + 'px'; } function setSize() { imgSize.w = imgObj.width; imgSize.h = imgObj.height; } function setImg() { var wh, pW, pH, c; wh = getWindowSize(); pW = wh.w / imgSize.w; pH = wh.h / imgSize.h; if (pW > 0 || pH > 0) { c = (pW > pH) ? pW : pH; imgObj.style.width = parseInt(imgSize.w * c + 1) + 'px'; imgObj.style.height = parseInt(imgSize.h * c + 1) + 'px'; } else { imgObj.style.width = imgSize.w + 'px'; imgObj.style.height = imgSize.h + 'px'; } } function getWindowSize() { var wh = {w:0, h:0}; if (document.body.clientWidth) { wh.w = document.body.clientWidth wh.h = document.body.clientHeight; } else if(document.documentElement.clientWidth) { wh.w = document.documentElement.clientWidth; wh.h = document.documentElement.clientHeight; } else if(window.innerWidth) { wh.w = window.innerWidth; wh.h = window.innerHeight; } return wh; } </script> </body>

  • ウィンドウサイズの変更を滑らかに取得したい

    <html> <head> <script type="text/javascript"> function test(){ width = document.body.clientWidth; height = document.body.clientHeight; document.getElementById("haba").value=width; document.getElementById("takasa").value=height; } </script> </head> <body onload="window.setInterval('test()',1);"> 幅<input size="20" type="text" id="haba"/> 高さ<input size="20" type="text" id="takasa"/> </body> </html> -------------------------------------------------------------- 以上のような、ブラウザのウィンドウサイズを取得する コードを書いたのですが、滑らかに高さと幅が取得出来ずに困ってます。 イメージとしては、ウィンドウサイズをマウスで変更すると 高さと幅の数値がもっと滑らかに細かく変化するように したいのです。 どなたか回答お願いします。

  • jqfloat.jsを複数の画像に適用したい

    javascriptで7枚の画像をブラウザの中にランダム配置で表示させ、 さらにjQueryのjqfloat.jsで画像をふわふわ動かす、というものを作っています。 ランダム配置まではうまくいったのですが jqfloatが7枚のうち1枚にしか適用されず困っております。(最後のid='fuwa'のところ) jsの勉強を始めたばかりでスクリプトの書き方が変だったりするかもしれませんが… どなたか対処法を教えていただけませんでしょうか。 どうぞよろしくお願い致します! <script type="text/javascript"><!-- $(document).ready(function() { $('#fuwa').jqFloat({ width: 50, height: 50, speed: 2500 }); }); var images = [ {img : "1.png" , url : "http://1.com"}, {img : "2.png" , url : "http://2.com"}, {img : "3.png" , url : "http://3.com"}, {img : "4.png" , url : "http://4.com"}, {img : "5.png" , url : "http://5.com"}, {img : "6.png" , url : "http://6.com"}, {img : "7.png" , url : "http://7.com"} ]; images.sort(function(){return Math.random() - Math.random();}); function getBrowserWidth ( ) { if ( window.innerWidth ) { return window.innerWidth; } else if ( document.documentElement && document.documentElement.clientWidth != 0 ) { return document.documentElement.clientWidth; } else if ( document.body ) { return document.body.clientWidth; } return 0; } function getBrowserHeight ( ) { if ( window.inneHeight ) { return window.innerHeight; } else if ( document.documentElement && document.documentElement.clientHeight != 0 ) { return document.documentElement.clientHeight; } else if ( document.body ) { return document.body.clientHeight; } return 0; } Imgn=7; for (i=0; i < Imgn; i++){ xpx = 50+Math.floor(Math.random() * (window.innerWidth -280)) + 1; ypx = 30+Math.floor(Math.random() * (window.innerHeight -300)) + 1; thumbs="<div style='position:absolute;left:"+ xpx +"px;top:"+ ypx +"px;' id='fuwa'><a href='"+images[i].url+"'><img src='"+images[i].img+"'></a></div>"; document.write(thumbs); } </script>

  • ページの縦幅を取得する際の問題

    ページの縦幅は書き込まれる情報量によって動的に変わります。この縦幅を取得する良い方法がないか探していたところ、Lightboxの関数でまさしく探していたものがありました。 function getPageSize(){ var xScroll, yScroll; if (window.innerHeight && window.scrollMaxY) { xScroll = document.body.scrollWidth; yScroll = window.innerHeight + window.scrollMaxY; } else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac xScroll = document.body.scrollWidth; yScroll = document.body.scrollHeight; } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari xScroll = document.body.offsetWidth; yScroll = document.body.offsetHeight; } var windowWidth, windowHeight; if (self.innerHeight) { // all except Explorer windowWidth = self.innerWidth; windowHeight = self.innerHeight; } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode windowWidth = document.documentElement.clientWidth; windowHeight = document.documentElement.clientHeight; } else if (document.body) { // other Explorers windowWidth = document.body.clientWidth; windowHeight = document.body.clientHeight; } // for small pages with total height less then height of the viewport if(yScroll < windowHeight){ pageHeight = windowHeight; } else { pageHeight = yScroll; } // for small pages with total width less then width of the viewport if(xScroll < windowWidth){ pageWidth = windowWidth; } else { pageWidth = xScroll; } arrayPageSize = new Array(pageWidth,pageHeight) return arrayPageSize; } この関数を実行すると配列[0]に横幅、配列[1]に縦幅が返ってきます。しかしページ内にCSSでposition: absoluteで位置を指定したオブジェクトがあると、それを認識できないのか求める数値とは違う(小さい)ものが返ってきてしまいます。これはどのようにして対応すればよいのでしょうか?

  • 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 api プログラミング

    javascript google map api どなたか助けてください マップを作成しているのですが、どうしてもわからないところがあります。 下のソースコードの中にテーブルがあるのですが、そこに、検索を押したときの マーカーの場所の詳細を表示させたいのですがどうやっても表示できません。 どなたかプログラミングにお詳しい方教えてください! よろしくお願いします。 <!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/> <meta http-equiv="content-type" content="text/html; charset=UTF-8n"/>  <title>練習</title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=geometry&sensor=false&region=jp"></script> <script language="JavaScript" src="gcode_com.js"></script> <script language="JavaScript" src="gcode.js"></script> <script language="JavaScript" src="GoogleMapsCustomMapType.js"></script> <!link href="http://code.google.com/apis/maps/documentation/javascript/examples/standard.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=ja"></script> <script type="text/javascript"> <!-- var geocoder; var map; function initialize() { geocoder = new google.maps.Geocoder(); var latlng = new google.maps.LatLng(36.370324,138.65968); var myOptions = { zoom: 10, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP, mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}, navigationControl: true, navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL}, scaleControl: true } map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); } function codeAddress() { var address = document.getElementById("address").value; // var zm = document.getElementById("zm").value; geocoder.geocode( { 'address': address}, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { map.setCenter(results[0].geometry.location); // document.write( alert ( zoom ) ); var marker = new google.maps.Marker({ map: map, position: results[0].geometry.location }); } else { alert("Geocode was not successful for the following reason: " + status); } }); } // --> </script> </head> <body onload="initialize()" background=""> <center> <font size=5>練習</font> <div id="map_canvas" style="width: 1000px; height: 600px; border: 1px solid Gray;"></div> </center> <div> キーワード: <input id="address" type="textbox" size="30" value="ここにキーワードを入力してください"> <!input id="zm" type="textbox" size=2 value="8n"> <input type="button" value="検索" onclick="codeAddress()"> </div> <table width="400" height="200" border="1" align="left"> <tr> <td width="150" height="50">緯度</td> <td width="150" height="50">経度</td> <td width="800" height="50">住所</td> </tr> <tr> <td width="150" height="25"></td> <td width="150" height="25"></td> <td width="800" height="25"></td> <tr> <td width="150" height="25"></td> <td width="150" height="25"></td> <td width="800" height="25"></td> </tr> <tr> <td width="150" height="25"></td> <td width="150" height="25"></td> <td width="800" height="25"></td> </tr> <tr> <td width="150" height="25"></td> <td width="150" height="25"></td> <td width="800" height="25"></td> </tr> <tr> <td width="150" height="25"></td> <td width="150" height="25"></td> <td width="800" height="25"></td> </tr> <tr> <td width="150" height="25"></td> <td width="150" height="25"></td> <td width="800" height="25"></td> </tr> </table> </body> </html>

  • ウィンドウサイズを取得して、phpで使いたい

    フォルダ内の画像を配列にして、imgタグを書き出すように、phpを書きました。 imgタグでwidth、heightを指定することで無理やり縮小させて表示し、 ライトボックスを使って元のサイズで開くようにしています。 できればああしたいこうしたい、というのはたくさんあるのですが、 とりあえず、 画像がウィンドウサイズより大きいときはライトボックスを使わないようにしたいのです。 javascriptでこのように、ウィンドウサイズを得ることはできました。 var winw = document.body.clientWidth; var winh = document.body.clientHeight; たとえば、$window_wにwinwを代入し、 このようなことをしたいのですが、なにか方法がないでしょうか。 $imgは、画像のパスがずらずら並んだ配列です。 $widthは画像サイズ、 $thumbは縮小させたいサイズで、別に定義しています。 ~前略~ if ($width>$window_w){ print "<a href=\"$img[i]\"><img src=\"~~.jpg\" width=\"$thumb\"></a>"; } ~後略~

    • ベストアンサー
    • PHP
  • サイドバー付きGoogle Mapについて

    初めまして~ Google maps api v3 初心者です。 どうかよろしくお願いいたします。 How to本でも紹介されているソースを元に サイドバー付き地図を作っています。 サイドバーをclickからmouseoverに変更し mouseoverで情報ウィンドウを表示し clickで、リンクに飛ばそうとしています。 が、サイドバーの<li>を作る過程で リンク先のURLを読み込むことができません。 手でリストを作っておいて、 clickでリンクへ飛んで mouseover時に情報ウィンドウ表示でも構いません。 どなたかお力添えをお願いいたします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> <!-- body { background-color: #ffffff; font-size: 11px; font-family: "メイリオ", "Hiragino Kaku Gothic Pro", "MS Pゴシック ", Arial, sans-serif; text-align: left; } #myInfo img{ width:200px;height:160px;border:none; } #myInfo span{ font-size:16px;font-weight:bold; } #myInfo a{ font-size:12px; } --> </style> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> var stationList = [ {"latlng":[43.40559401552279,141.4347595785141],name:"厚田公園",myStr:"http://www.hokudai.ac.jp/",myImg:""}, {"latlng":[43.40450276438633,141.43127270679474],name:"厚田公園キャンプ場"}, ] var infoWnd, mapCanvas; function initialize() { var mapDiv = document.getElementById("map_canvas"); mapCanvas = new google.maps.Map(mapDiv); mapCanvas.setMapTypeId(google.maps.MapTypeId.ROADMAP); infoWnd = new google.maps.InfoWindow(); //■地図上にマーカーを配置していく var bounds = new google.maps.LatLngBounds(); var station, i, latlng; for (i in stationList) { //■マーカーを作成 station = stationList[i]; latlng = new google.maps.LatLng(station.latlng[0], station.latlng[1]); bounds.extend(latlng); var marker = createMarker( mapCanvas, latlng, station.name,station.myStr,station.myImg ); //■サイドバーのボタンを作成 createMarkerButton(marker); } //■マーカーが全て収まるように地図の中心とズームを調整して表示 mapCanvas.fitBounds(bounds); } function createMarker(map, latlng, title,myStr,myImg) { //■マーカーを作成 var marker = new google.maps.Marker({ position : latlng, map : map, title : title,   content:myStr, content:myImg }); //■マーカーがクリックされたら、情報ウィンドウを表示 google.maps.event.addListener(marker, "click", function(){ infoWnd.setContent('<div id="myInfo"><span>' + title + "</span><br><a href="+myStr+ ">"+"<img src="+myImg+"><br>"+"詳細を開く</a>"+ "</title></div>"); infoWnd.open(map, marker); }); return marker; } function createMarkerButton(marker) { //■サイドバーにマーカ一覧を作る var ul = document.getElementById("marker_list"); var li = document.createElement("li"); var title = marker.getTitle(); li.innerHTML = title; ul.appendChild(li); //■サイドバーがクリックされたら、マーカーを擬似クリック ★clickをmouseoverに改変 google.maps.event.addDomListener(li, "mouseover", function(){ google.maps.event.trigger(marker, "click"); }); } google.maps.event.addDomListener(window, "load", initialize); </script> <style type="text/css"> <!-- #map_canvas { width: 75%; height: 500px; float: left; } ul#marker_list { padding:0; margin: 0; width: 23%; height: 500px; float: right; } ul#marker_list li { list-style: none; border: 1px solid #ccc; cursor: pointer; background-color: #eeeeee; } --> </style> </head> <body> <DIV align="center"> <TABLE> <TR> <TD width="600" valign="top"> <DIV id="map_canvas" style="width:600px; height:400px;float: left" align="left"></DIV> </TD> <TD width="250" valign="top" align="left"> <ul id="marker_list" style="width:250px;float: right; font-size:13px;"></ul> </TD> </TR> </TABLE> </DIV> </body> </html>

  • Googleマップを航空写真で、45度にしない方法

    Googleマップを航空写真で、ホームページに埋め込んでいます。 かなり拡大しているので、地域として自動で45度写真になってしまいます。 これを、平面のまま、切り替えられなくしたいのです。 どなたか、教えてください。 以下のようなJavaScriptを、見つけて使っています。 LatLngは、適当に入れてあります。 ------------------------------------------------------------- var myLatLng = new google.maps.LatLng(35.000000,139.000000); //地図を表示 var myMap = new google.maps.Map(document.getElementById('map'), { zoom: 20, center: myLatLng, mapTypeId: google.maps.MapTypeId.SATELLITE, scaleControl: false, scrollwheel: false, mapTypeControl: false }); ------------------------------------------------------------- 以上、よろしくお願いします。 あまり詳しくないので、加筆していたがけると、助かります。

このQ&Aのポイント
  • 庭にイノシシが掘った穴が広範囲に存在し、土地が凸凹しているため歩きにくく、水たまりもできます。土の水はけも悪い状態です。グランドカバーとしてシロツメクサやタイムを植える予定ですが、土に何を足すべきか悩んでいます。
  • 今まで凹んだ所とその周りに赤玉土、腐葉土、花と野菜の土、バーミキュライト、もみ殻をミックスして均しましたが、水はけの改善はどうなるのか不安です。砂を入れるべきかも検討しています。
  • 庭の土地がイノシシの穴で凸凹しており、水はけが悪く、歩きにくい状態です。グランドカバーとしてシロツメクサやタイムを植える予定ですが、土には何を足せば良いのか悩んでいます。水はけの改善を考える際には砂の使用も検討しています。しかし、女性一人での作業で予算も限られているため、ユンボを使った掘削などは難しいです。
回答を見る

専門家に質問してみよう