- ベストアンサー
Google Maps情報ウィンドウのサイズ調整
my--の回答
情報ウィンドウ（InfoWindow）はデザイン的にある程度の大きさが必要みたいで maxWidthでの設定にも限界があるようです。簡単にそれなりのことができるぶん 融通が利かなくなるのかもしれない。 で、好きに扱えるものを貼り付けるためにOverlayViewてのが用意されてます。 実装にはそこそこスキルが必要で、見付かる資料はすこし難しいと思うのですが 簡単なサンプルを置いておくので、遊んでみて下さい。 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Google Maps JavaScript API V3 カスタムオーバーレイ サンプル</title> <script src="http://maps.google.com/maps/api/js?sensor=false"></script> <script> // マップにオーバーレイ要素を追加： mapObject.addOverlay( LatLng, string|DOMNode ) 戻り値：OverlayViewオブジェクト google.maps.Map.prototype.addOverlay = function (latLng, contents) { var overlay = new google.maps.OverlayView; overlay.contents = contents; overlay.latLng = latLng; overlay.setMap(this); return overlay; }; // オーバーレイ要素の作成と挿入 google.maps.OverlayView.prototype.onAdd = function () { var pane = this.getPanes().floatPane; var container = pane.appendChild(document.createElement('div')); var contents = this.contents; if (typeof contents === 'string') container.innerHTML = contents; else if (contents.nodeType === 1) container.appendChild(contents); container.className = 'map-overlay'; container.style.position = 'absolute'; this.container = container; }; // オーバーレイ要素の配置更新 google.maps.OverlayView.prototype.draw = function () { var position = this.getProjection().fromLatLngToDivPixel(this.latLng); var container = this.container; container.style.left = position.x + 'px'; container.style.top = position.y + 'px'; }; // カスタム オーバーレイここまで function initialize(data) { var mapOption = { zoom: 8, center: new google.maps.LatLng(35.389050, 137.779541), mapTypeId: google.maps.MapTypeId.SATELLITE }; var map = new google.maps.Map(document.getElementById('map'), mapOption); google.maps.event.addListenerOnce(map, 'tilesloaded', function () { var mapBounds = map.getBounds(); for (var i = 0, len = data.length; i < len; i++) { var obj = data[i]; var markerOption = { position: new google.maps.LatLng(obj.lat, obj.lng), map: map }; var marker = new google.maps.Marker(markerOption); var latLng = marker.getPosition(); map.addOverlay(latLng, obj.text); mapBounds.extend(latLng); } map.fitBounds(mapBounds); }); } </script> <style> #map { width: 600px; height: 400px; } .map-overlay { border: 1px solid; background-color: #fff; font-size: small; white-space: nowrap; } </style> </head> <body> <div id="map"></div> <script> var data = [ { "lat": 35.681353, "lng": 139.766350, "text": "東京" }, { "lat": 35.170721, "lng": 136.881752, "text": "名古屋" }, { "lat": 34.985443, "lng": 135.757778, "text": "京都" }, { "lat": 34.733501, "lng": 135.500436, "text": "新大阪" } ]; initialize(data); </script> <p>参考：<a href="http://code.google.com/intl/ja/apis/maps/documentation/javascript/overlays.html#CustomOverlays">Google Maps JavaScript API V3 カスタム オーバーレイ </a></p> </body> </html>
関連するQ&A
- google mapsの情報について
例えば、google mapsで「警察」と検索すると警察の場所がズラッとマップ上に表示され、「◯◯警察」「TELL」「住所」等が表示されますよね。 このgoogle mapsの情報をエクセルやopenoffice等で一覧にしたいのですが、どういった方法がありますか？ アドバイスご教示いただければと思います。
- 締切済み
- その他([技術者向] コンピューター)
- google maps 吹き出しカウントダウン
google maps api v3の情報ウィンドウの吹き出しの表示に、 添付画像のようなカウントダウンを表示したいのですが、 自分のレベルでは吹き出しに文字を表示することしかできません。 どなたか吹き出しの表示に添付画像のようなカウントダウンを表示する方法 知りませんでしょうか。
- ベストアンサー
- AJAX
- Google mapsのスライドの仕組みを教えて
大きな画像のある一部分だけを表示させ、滑らかなに移動するものが作りたいです。 Google mapsのスライドの仕組みと同じものです。Google mapsはAjaxを使っていますが、 非同期でダウンロードはしません。事前にクライアントにあるものだけを使いますので、 そこまでがいりません。ただのJavaScriptレベルの話しだと思います。 <div>のabsoluteの座標をずらせば、なめらかに動きますが、見えている範囲が同じなので、 これはなしですよね。 iframeを使うのもなしです。Google mapsは使っていませんよね。 どなたかアドバイスしていただける方はいないでしょうか。
- ベストアンサー
- JavaScript
- Google Mapsのスクリプトが動かない
こんにちは。 http://www.geekpage.jp/web/google-maps-api/v3/geocoder-0.php Google Maps APIを勉強しようとして、上記に書かれたプログラムをテキスト保存して、ローカルで実行しました。 そうすると、IEではzero_resultsとメッセージが表示され表示がされません。これは、どこがおかしいのでしょうか？ よろしくお願いいたします。
- ベストアンサー
- JavaScript
- google maps apiについて
現在HPをリニューアルしています。 旧サイトと新サイトは同じサーバー、同じドメインを使用しています。 旧サイトのデータはFTP内にはありません。 所在地マップに、GoogleMapを使用しています。 そこで、下記のようなエラーが出ます。 このウェブサイトには別の Google Maps API キーが必要です。新しいキーは http://code.google.com/apis/maps/signup.html で作成できます。 Google Maps API サーバーでリクエストが拒否されました。リクエスト内で指定した「sensor」パラメータには「true」または「false」のいずれかを指定する必要があります。 次に上記で指定されている http://code.google.com/apis/maps/signup.html にて、URLを指定して、APIを生成ボタンを押す 次にJavaScript Maps API の例で表示された <script src="http://maps.google.com/maps?file=api&v=2&sensor=true_or_false&key=*********************************" type="text/javascript"></script> をエラーが表示されるページに貼り付ける ここまでの作業をおこなっております。 ただ、これで正しいのかが分かりません。 詳しい方からのご助言頂けますでしょうか？
- 締切済み
- HTML
- Google maps api v3と印刷について
お世話になります。 Google maps api v3を使用して、WEBサイトに地図をアップしたのですが、 お客様から印刷すると地図の表示がおかくしくなると指摘されました。 印刷プレビューから表示がおかしくなるとの事です。（その方はWinXP IE8） いろいろ原因を探したのですがよく分からず、こちらでお力をお貸し頂ければと思います。 こちらで分かった事といえば、印刷時、設定用紙の半分もしくは3分の2より下に地図が 配置されていると、表示がおかしくなるということです。 （1枚目に地図が全部配置されているのに、2枚目にも地図の下部のみが移ってしまい、地図の直後にあるコンテンツを隠してしまう。その時、1枚目の地図もおかしい等） （ただし、地図を設定用紙の半分より上に配置すると地図等は問題なく表示・印刷される。ポリゴンも隠れない） この現象は私が作成したmapだけでなく、他のサイトのGoogle mapsでも同じ現象のような気がします。（たまたまでしょうか？） 回避方法等、どうぞお力をお貸しくださいませ。 <script type="text/javascript"> <!-- google.maps.event.addDomListener(window, 'load', function() { // 地図の設定 var mapOptions = { zoom: 16, center: new google.maps.LatLng(30.622401694889774, 138.72735120224), mapTypeId: google.maps.MapTypeId.ROADMAP, scaleControl: true }; var mapObj = new google.maps.Map(document.getElementById('gmap'), mapOptions); // 作成するポリゴン外枠座標の配列 var points = [ new google.maps.LatLng(30.62244094020011, 138.7270232439041), new google.maps.LatLng(30.62266551021649, 138.7274872660637), new google.maps.LatLng(30.6226175438582, 138.7275274991989), new google.maps.LatLng(30.62263062559512, 138.72755163908005), new google.maps.LatLng(30.622401694889774, 138.72773402929306), new google.maps.LatLng(30.6224191372523, 138.72777426242828), new google.maps.LatLng(30.622251254355135, 138.72789764404297), new google.maps.LatLng(30.62193729058848, 138.7273102402687), new google.maps.LatLng(30.622377711635124, 138.72697496414184), new google.maps.LatLng(30.622410416071524, 138.72704201936722) ]; // ポリゴンのオプションを設定 var polygonOptions = { path: points, strokeWeight: 2, strokeColor: "#ff0000", strokeOpacity: 0.5, fillColor: "#ff0000", fillOpacity: 0.3, title:"ポリゴン" }; // ポリゴンを設定 var polygon = new google.maps.Polygon(polygonOptions); polygon.setMap(mapObj); // クリック処理・吹き出しのコメント設定 google.maps.event.addListener(polygon, 'click', function() { new google.maps.InfoWindow({ content: '品川testホテル<br>〒141-0001<br>東京都品川区', maxWidth : 200, position: new google.maps.LatLng(30.622401694889774, 138.72735120224) }).open(mapObj); }); //polygonのみ最初から吹き出しを表示させる（擬似的にクリックイベントを発生させる） google.maps.event.trigger(polygon,'click'); }); //--> </script> 【CSS】 #gmap { width: 630px; height: 300px; margin-left: 30px; border: #ccc 1px solid; } ※緯度・軽度は正確ではありません。申し訳ありません。 ※地図の前後にはfloatが掛かったコンテンツがあります。（clearfixで解除済み） ※専門用語はよく分からないので、出来るだけ分かるように記載頂けると幸いです。
- 締切済み
- その他（プログラミング・開発）
- Google Maps API V3
Google Maps API V3 でXMLのデータがかなり多いので XMLから取り出すデータをgoogleマップで表示するデータのみ 取り出してマーカを表示したい場合どのようにすればいいのでしょうか
- ベストアンサー
- AJAX
- Google Maps V3のズームの規制
現在htmlにはhead内に <script type="text/javascript"src="http://maps.googleapis.com/maps/api/js?key=123456&sensor=false"></script> <script language="JavaScript" type="text/javascript" src="v3.js"></script> v3スクリプト内に //functionコード function mapload() { var latlng = new google.maps.LatLng(123,456); var opts = { zoom: 16, center: latlng, //マップタイプHYBRID（航空写真＋地図）ROADMAP（地図）SATELLITE（航空写真）TERRAIN（地形） mapTypeId: google.maps.MapTypeId.ROADMAP, mapTypeControlOptions: { mapTypeId: [ google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.TERRAIN ] } }; //IDコード var map = new google.maps.Map (document.getElementById("map"),opts); //Marker var LatLng = new google.maps.LatLng(123,456); var contentString = 'ここです！'; var infowindow = new google.maps.InfoWindow({ content: contentString }); var image = new google.maps.MarkerImage ('アイコンURL', new google.maps.Size(30, 30), new google.maps.Point(0,0), new google.maps.Point(15, 20)); var shadow = new google.maps.MarkerImage ('アイコン影画像URL', new google.maps.Size(30, 30), new google.maps.Point(0,0), new google.maps.Point(15, 20)); var marker = new google.maps.Marker({ position: LatLng, map: map, title: "ここです！",icon: image,shadow: shadow }); google.maps.event.addListener(marker, 'click', function() { infowindow.open(map, marker); }); } と記載し、html内のスクリプトのとこに表示しています。 表示される地図のズームを規制したいと考え、mapType.maxZoom = 19; mapType.minZoom = 2;のようなものを記入しても何も変化しません。 上記スクリプトの表記のどこに何を入れれば規制できるのでしょうか。 追伸、google.maps.MapTypeId.TERRAINと地図と地形のみ表示指定しているのですが、実際は、地図と航空地図になります。
- ベストアンサー
- JavaScript
- Google AJAX API のmapsのロードとＩＥでの表示について
いつもお世話になっています。 Google AJAX APIについて質問です。 デベッロッパーガイドに従って以下のようにスクリプトを書いたのですが IEのみエラーが出て表示されません。 (IE7でも表示はされましたが、不安定でした） <html> <head> <script type="text/javascript" src="http://www.google.com/jsapi?key=登録したAPIキー"></script> <script type="text/javascript"> google.load("maps", "2"); function initialize() { var map = new google.maps.Map2(document.getElementById("map")); map.setCenter(new google.maps.LatLng(37.4419, -122.1419), 13); } google.setOnLoadCallback(initialize); </script> </head> <body> <div id="map" style="width: 400px; height: 400px"></div> <div id="searchcontrol"></div> </body> </html> なぜIEだけが表示されないのか、エラーが出るのかわかる方いらっしゃいましたらよろしくお願いします。
- 締切済み
- JavaScript
- 非常に困ってます。Google mapsの作成
およびスタイルシートの活用 メモ帳にて 以下のソースコードにて試したのですがIEで右側しか表示されないで困ってます。多少いじってます。 このソースコードでmapを表示できるよう指摘をお願いします。 とても長いですが自力ではもう分からなくて手つかずです。 <!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>１マップ</title> <style type="text/css"> <!-- h2 { text-align:left; font-size:25px } p { margin-top:0px; text-align:justify; text-justify:distribute; line-height:15pt; font-size:16px; color:black } .text1div { border-style:solid; border-width:4px; border-color:#ffffff; padding:3px; width:330px; height:325px; border:solid 0px; overflow:auto; background-color:white darkblue darkblue white; scrollbar-base-color: #ffffff; scrollbar-highlight-color:#009999; position:absolute; left:410px; top:70px } P.text1 { text-align:justify; text-justify:distribute; line-height:120%; font-size:15px } --> </style> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></scr ipt> <script type="text/javascript"> function initialize() { var latlng = new google.maps.LatLng(座標); var opts = { zoom: 13, center: latlng, scaleControl: true, mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map(document.getElementById("map_canvas"), opts); var marker = new google.maps.Marker({position: latlng,map: map }); var infowindow = new google.maps.InfoWindow({content:'＊＊＊＊＊',position: latlng }); infowindow.open(map); </script> </head> <body onload="initialize()"> <h2>My Maps</h2> <div id="map_canvas" style="width:400px; height:300px"></div> <DIV CLASS="text1div"><P CLASS="text1"> マップです。<BR> ＊＊市＊＊区＊条＊＊丁目＊番＊号<BR> Tel ＊＊＊-＊＊＊-＊＊＊<BR><BR> <DIV> <DIV align="center"> <form><input type="button" name="OK" value=" Close " onClick="window.close()"></form> </DIV> </body> </html>
- 締切済み
- CSS
お礼
ありがとうございます！ こういうのを探していました。 参考にさせていただきます。