googleMapで情報ウィンドウの表示が崩れる| OKWAVE

グーグルマップについて教えてください。

【やりたいこと】グーグルマップとストリートビューを連動するところまではできました。しかし、地図をクリックして取得されるデータをマーカーが出るように設定し所までは良かったのですが、そのマーカーをクリックしても必要なデータが表示されません。どの様にしたらいいでしょうか？ソースは下記の通りです。 var map; var myPano; var panoClient; var currentLatLng = new GLatLng(35.6829, 139.7653); window.onload = function() { load(); loadd(); setEvent(); } function load() { map = new GMap2(document.getElementById("mymap"),{draggableCursor:"crosshair"}); map.setCenter(new GLatLng(35.6829, 139.7653), 8); 　　 map.addControl(new GMapTypeControl()); 　　 map.addControl(new GLargeMapControl3D()); 　　 streetview = new GStreetviewOverlay(); 　　 map.addOverlay(streetview); map.addControl(new GOverviewMapControl(new GSize(200,200))); } function loadd() { 　　　　myPano = new GStreetviewPanorama(document.getElementById("pano")); GEvent.addListener(map,"click", function(overlay,point) { currentLatLng=point; myPano.setLocationAndPOV(currentLatLng); map.setCenter(currentLatLng); }); } function createGMarker(title, html, lat, lng) { var infoObj = new Object(); infoObj.title = title; var gpObj = new GLatLng(lat, lng); var marker = new GMarker(gpObj, infoObj); map.addOverlay(marker); GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(html); }); }

googleMapでアイコン変更すると情報ウィンドウが開かない

お世話になります。タイトルのとおりでマーカークリックで情報ウィンドウが表示される作りなんですが、オリジナルのアイコンに変更するとエラーで開かなくなってしまいます。以下のプログラムで何か問題があるのでしょうか。わかる方がいらっしゃいましたら教えて下さい。お願いします。 var map function startUp(){ map = new GMap2(document.getElementById("map")); // DBに登録した位置データを元にマーカー作成 GDownloadUrl("load.php", function(doc, stat){ eval("load=" + doc); for(var i=0; i<load.data.length; i++){ var icon = new GIcon(); // データ区分ごとにマーカーを変える switch(load.data[i].kbn){ case "0": icon.image = "img/blue.gif"; break; case "1": icon.image = "img/green.gif"; break; case "2": icon.image = "img/red.gif"; break; default: } icon.iconSize = new GSize(20,34); icon.shadow = "http://www.google.com/mapfiles/shadow50.png"; icon.shadowSize = new GSize(37,34); icon.iconAnchor = new GPoint(8,34); var mk = makeMarker(load.data[i], icon); map.addOverlay(mk); } }); } function makeMarker(data, icon){ var point = new GLatLng(data.lat, data.lng); var marker = new GMarker(point, icon); GEvent.addListener(marker, "click", function(){ marker.openInfoWindowHtml("表示テスト"); } return marker; }

googlemap api で複数マーカー表示

複数のマーカー表示は最初できてたんですが、住所から座標を取得してマーカーを複数表示ができません。。 <script type="text/javascript"> function load() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); //地図を作成 map.setCenter(new GLatLng(35.969115,139.372559), 8); //地図を表示（(中心の緯度,経度),縮尺） map.addControl(new GSmallMapControl()); //マップコントローラを付ける map.addControl(new GMapTypeControl()); //マップタイプコントローラを付ける map.addControl(new GScaleControl()); //スケールコントローラを付ける map.removeMapType(G_HYBRID_MAP); //マップタイプコントローラから地図+写真を削除する map.enableScrollWheelZoom(); //マウスホイールによるズーム処理を有効化 //マーカー追加プログラム function addMarker(lat,lng,html) { var geocoder = new GClientGeocoder(); geocoder.getLatLng ( lat, function(point) { var marker = new GMarker(new GLatLng(point,lng)); //マーカー生成 GEvent.addListener(marker,"mouseover",function(){marker.openInfoWindowHtml(html);});//マーカーにマウスが当たると情報ウィンドウを表示する map.addOverlay(marker); //マーカーをオーバレイ表示する } ); } //マーカー追加 addMarker("横浜市",'<p>html</p>'); addMarker("東京都",'<p>html</p>'); } } </script> </head> <body onload="load()" onunload="GUnload()"> 中略・・・初心者なもので、、、ご回答お願いいたします。

googleMapでアイコン変更すると情報ウィンドウが開かない

お世話になります。（javascriptカテゴリで同じ質問を出しましたが回答が得られなかったのでこちらへも書きました）タイトルのとおりでマーカークリックで情報ウィンドウが表示される作りなんですが、オリジナルのアイコンに変更するとエラーで開かなくなってしまいます。以下のプログラムで何か問題があるのでしょうか。わかる方がいらっしゃいましたら教えて下さい。お願いします。 var map function startUp(){ map = new GMap2(document.getElementById("map")); // DBに登録した位置データを元にマーカー作成 GDownloadUrl("load.php", function(doc, stat){ eval("load=" + doc); for(var i=0; i<load.data.length; i++){ var icon = new GIcon(); // データ区分ごとにマーカーを変える switch(load.data[i].kbn){ case "0": icon.image = "img/blue.gif"; break; case "1": icon.image = "img/green.gif"; break; case "2": icon.image = "img/red.gif"; break; default: } icon.iconSize = new GSize(20,34); icon.shadow = "http://www.google.com/mapfiles/shadow50.png"; icon.shadowSize = new GSize(37,34); icon.iconAnchor = new GPoint(8,34); var mk = makeMarker(load.data[i], icon); map.addOverlay(mk); } }); } function makeMarker(data, icon){ var point = new GLatLng(data.lat, data.lng); var marker = new GMarker(point, icon); GEvent.addListener(marker, "click", function(){ marker.openInfoWindowHtml("表示テスト"); } return marker; }

googlemapsAPIでマーカー表示されない

googlemaps APIを使ったマッシュアップサイトを作る練習を本を見ながらやっていますが、本のとおりプログラミングしても地図は表示されるのですがマーカーが表示されません。 (アップロードする前にfirefoxで確認) とりあえずv2で製作しています。マーカーを表示させる方法を教えてください。下記がjavascriptファイルです。よろしくお願いします。 var map window.onload = function() { load(); } function load() { if (GBrowserIsCompatible()) { map = new GMap2(document.getElementById("mymap")); map.setCenter(new GLatLng(35.6829, 139.7653), 13); } } function _d(id, htmlTxt) { document.getElementById(id).innerHTML = htmlTxt; } function createDiv(id,left,top) { var outDiv; outDiv =document.createElement('div'); outDiv.id = id; document.body.appendChild(outDiv); var tgdStyle = document.getElementById(id).style; tgdStyle.position = "absolute"; tgdStyle.left = left + "px"; tgdStyle.top = top + "px"; tgdStyle.background = "white"; } function removeDiv(id) { var outDiv = document.getElementById(id); document.body.removeChild(outDiv); } function varChk(target,type) { { return typeof(target) == type ? true : false; } } function load() { if (GBrowserIsCompatible()) { map = new GMap2(document.getElementById("mymap")); map.setCenter(new GLatLng(35.6829, 139.7653), 5); map.addControl(new GScaleControl()); map.addControl(new GLargeMapControl()); map.addControl(new GOverviewMapControl(new GSize(128,128))); } } function createGMarker(title, html, lat, lng) { var infoObj = new Object(); infoObj.title = title; var gpObj = new GLatLng(lat, lng); var marker = new GMarker(gpObj, infoObj); map.addOverlay(marker); GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(html); }); }

GoogleMAPの切り替えについて

Javascriptのエラーについて質問させてください。１つのページで、２種類のGoogleMAPを切り替えたいと思っています。しかし、以下のように記述したところ「"offsetwidth"はnullまたはオブジェクトではありません。」とエラー表示されてしまいます（確認ブラウザ：IE6、FireFOX3、Safari、Googlechorome）。一体、何がマズイのかさっぱりわからなくなり、困り果てて質問しています。どうかお力をお貸しください。宜しくお願いします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="stylesheet" href="style_sheet.css" type="text/css"> <title>マップテスト</title> <script src="http://maps.google.com/maps?file=api&v=2&key=グーグルマップAPIキー" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ function load() { if (GBrowserIsCompatible()) { //エリア１マップ用設定開始。 var map = new GMap2(document.getElementById("map")); //コントロール追加表示。右下縮小図とコントロールバー。 map.addControl( new GSmallMapControl() ); map.addControl( new GOverviewMapControl() ); //店舗のマーカー表示 var point1 = new GLatLng(座標,座標); map.setCenter(point1, 10); var point2 = new GLatLng(座標,座標); map.setCenter(point2, 10); var point3 = new GLatLng(座標,座標); map.setCenter(point3, 10); //アイコンのための宣言 var icon = new GIcon(); // アイコン画像のURL icon.image = "./img/hoge.png"; // アイコン画像のサイズ icon.iconSize = new GSize(50, 25); // アイコンの表示場所 con.iconAnchor = new GLatLng(32, 0); // マーカーの表示 map.addOverlay( new GMarker(point1, icon) ); map.addOverlay( new GMarker(point2, icon) ); map.addOverlay( new GMarker(point3, icon) ); //デフォルトの表示 map.setCenter(new GLatLng(座標,座標), 10); } } function load2() { if (GBrowserIsCompatible()) { //エリア２マップ用設定開始。 var map2 = new GMap2(document.getElementById("map")); //コントロール追加表示。右下縮小図とコントロールバー。 map2.addControl( new GSmallMapControl() ); map2.addControl( new GOverviewMapControl() ); //店舗のマーカー表示 var point21 = new GLatLng(座標,座標); map2.setCenter(point21, 10); var point22 = new GLatLng(座標,座標); map2.setCenter(point22, 10); var point23 = new GLatLng(座標,座標); map2.setCenter(point23, 10); var point24 = new GLatLng(座標,座標); map2.setCenter(point24, 10); //アイコンのための宣言 var icon2 = new GIcon(); // アイコン画像のURL icon2.image = "./img/hoge2.png"; // アイコン画像のサイズ（横幅/縦幅） icon2.iconSize = new GSize(50, 25); // アイコンの表示場所 icon2.iconAnchor = new GLatLng(32, 0); // マーカーの表示 map2.addOverlay( new GMarker(point21, icon2) ); map2.addOverlay( new GMarker(point22, icon2) ); map2.addOverlay( new GMarker(point23, icon2) ); map2.addOverlay( new GMarker(point24, icon2) ); //デフォルトの表示 map2.setCenter(new GLatLng(座標,座標); 12); } } //]]> </script> </head> <body onload="load()" onunload="GUnload()"> <a href="#" onclick="load()">エリア１</a>｜ <a href="#" onclick="load2()">エリア２</a>｜  <div id="map" style="width:700px;height:350px;"></div> </body> </html>

Googlemap apiでFFとNNでマーカーの表示が出ないのですが、どこが間違っていますか？

Googlemap でマーカーの吹き出しに指定のHtmlを表示するように書いたつもりなのですが、IEとオペラでは意図どうりに表示されるのですがFFとNNではマーカーが表示されません。 javascriptはあまり得意ではないのでわかりやすく説明して頂けると他助かります。 //<![CDATA[ function load() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(43.05578, 141.353257), 15); map.addControl(new GLargeMapControl()); map.addControl(new GMapTypeControl()); kyaba =[ [141.353075, 43.053673, "ダミー", "ダミー2", "ダミー3"], [141.352919, 43.054167, "ダミー", "ダミー2", "ダミー3"] ]; for (i = 0; i < kyaba.length; i++){ point = new GPoint(kyaba[i][0], kyaba[i][1]); dada = "<p>" + kyaba[i][2] + "</p>" + "<p>" + kyaba[i][3] + "</p>" + "<p>" + kyaba[i][4] + "</p>"; createMarker(point, dada); function createMarker(point,msg){ var marker = new GMarker(point); map.addOverlay(marker); GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(msg); }); } } } } //]]> </script>

Google Mapsからxmlファイルの読み込み

お世話になっております。質問はタイトルの通りです。javascriptのソースを以下のようになります。ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー var map; function initialize() { if (GBrowserIsCompatible()) { map = new GMap2(document.getElementById("map_canvas")); map.setCenter(new GLatLng(34.5927356,135.50753655), 5); GEvent.addListener(map, "click", clickAction); } } function downloadData(){ GDownloadUrl("http://○○/yahoolocaltest2.php", function dispData(data, statusCode){ var xml = GXml.parse(data); var markers = xml.documentElement.getElementsByTagName("marker"); for (var i = 0; i < markers.length; i++) { var lats = markers[i].getElementsByTagName("lat"); var lngs = markers[i].getElementsByTagName("lng"); var names = markers[i].getElementsByTagName("name"); var lat = parseFloat(GXml.value(lats[0])); var lng = parseFloat(GXml.value(lngs[0])); var name = GXml.value(names[0]); map.addOverlay(createMarker(lat, lng, name)); } }); } function createMarker(lat, lng, name) { var marker = new GMarker(new GLatLng(lat, lng)); var html = "<p>" + name + "</p>"; GEvent.addListener(marker, "click", function(){ marker.openInfoWindowHtml(html); }); return marker; } ーーーーーーーーーーーーーーーーーーーーーーーーーーーーー動けない所： function downloadData()の所には”yahoolocaltest2.php”というファイルを読み込みたいですが、マーカがでないです。 xmlデータは”~~.php”なんですが、実行結果は以下のようなxmlデータに整いました。 <?xml version='1.0' encoding='UTF-8' ?> <markers> <marker> <lat>35.2570706</lat> <lng>140.3977072</lng> <name>千葉県いすみ市</name> </marker> <marker> <lat>35.6766300</lat> <lng>139.7425472</lng> <name>東京都千代田区</name> </marker> <marker> <lat>35.6785042</lat> <lng>139.7415028</lng> <name>東京都千代田区</name> </marker> </markers> この結果は"~~.xml"という名前の保存したら、表示できますが。”~~.php”の形式なら表示できないです。全くの新人なんですが、ご指導をお待ちしております。ありがとうございます。

googlemapでの位置の表示

現在、googlemapを用いて、テーマパークだけを表示させるプログラムを作ってます。今作っているプログラムは位置情報を読み込む際にxmlファイルから読み込んでいるのですが、xmlファイルの位置情報をランダムに取得して表示させたりすることは出来るのでしょうか？下のxmlファイルでしたら、お台場と東京タワーだけ表示みたいな形で… ↓xmlファイル <markers> <marker lat="35.62882" lng="139.777508" html="お台場" label="お台場" n="1"/> <marker lat="35.658632" lng="139.745411" html="東京タワー" label="東京タワー" n="1"/> <marker lat="35.729539" lng="139.718172" html="サンシャイン60" label="サンシャイン60" n="1"/> <marker lat="35.660423" lng="139.729204" html="六本木ヒルズ" label="六本木ヒルズ" n="1"/> <marker lat="35.7174" lng="139.771347" html="上野動物園" label="上野動物園" n="1"/> <marker lat="35.715491" lng="139.794669" html="花やしき" label="花やしき" n="1"/> <marker lat="35.741964" lng="139.647941" html="としまえん" label="としまえん" n="1"/> <marker lat="35.717588" lng="139.276707" html="東京サマーランド" label="東京サマーランド" n="1"/> </markers> ↓xmlの読み込み部分のjavascript // ===== XML呼出 ===== function readMap(url) { var request = GXmlHttp.create(); request.open("GET", url, true); request.onreadystatechange = function() { if (request.readyState == 4) { var xmlDoc = GXml.parse(request.responseText); var markers = xmlDoc.documentElement.getElementsByTagName("marker"); map.getInfoWindow().hide(); map.clearOverlays(); for (var i = 0; i < markers.length; i++) { var lat = parseFloat(markers[i].getAttribute("lat")); var lng = parseFloat(markers[i].getAttribute("lng")); 　 var points = new GLatLng(lat,lng); var html = markers[i].getAttribute("html"); var label = markers[i].getAttribute("label"); var n = markers[i].getAttribute("n"); var marker = createMarker(points,label,html,n); map.addOverlay(marker); } なんかいい工夫はあるのでしょうか？やり方も教えていただけると助かります。何かいい方法がありましたらご教授お願いします。。

GoogleMap APIマーカーマネージャーとXMLの読み込み

Google Codeのページ http://code.google.com/intl/ja/apis/maps/documentation/overlays.html#Marker_Manager に載っていたマーカーマネージャーを使用し、さらにGDownloadUrlでXMLを読み込んで http://code.google.com/intl/ja/apis/maps/documentation/services.html 地図を作成しようとしております。現在記述は以下のようになっています。 ----- var map = null; var mgr = null; var batch = []; function setupMap() { if (GBrowserIsCompatible()) { map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(35.66332844365397,139.7321891784668),16); map.addControl(new GLargeMapControl()); map.enableDoubleClickZoom(); window.setTimeout(setupMarkers, 0); } } function getMarkers() { GDownloadUrl("○○○.xml", createMap); return batch; } function createMap(data) { var xml = GXml.parse(data); var markers = xml.documentElement.getElementsByTagName("marker"); for (var i = 0; i < markers.length; i++) { var name = markers[i].getAttribute("name"); var lat = parseFloat(markers[i].getAttribute("lat")); var lng = parseFloat(markers[i].getAttribute("lng")); var markeropts = new Object(); markeropts.title = name; var marker = new GMarker(new GPoint(lng,lat), markeropts); batch.push(marker); // ※1 } return batch; } function setupMarkers() { mgr = new MarkerManager(map); mgr.addMarkers(getMarkers(), 14); mgr.refresh(); } ----- いろいろと検証の結果、XMLの読み込みはうまくいっており、※1のところでbatchにはちゃんとpushされていることは確認したのですが、最終的にマーカーは表示されません。 function getMarkersが function getMarkers() { var batch = []; var markeropts = new Object(); markeropts.title = "六本木"; var marker = new GMarker(new GPoint(35.66332844365397,139.7321891784668), markeropts); batch.push(marker); return batch; } の時はマーカーがちゃんと表示されたことも確認しております。どこがおかしいのでしょうか？また、根本的に間違っているor他にいい方法があるのであればご教示ください。よろしくお願い致します。

googleMapでアイコンを変更すると、情報ウインドウがでなくなる。

googleMapでアイコンを変更すると、情報ウインドウがでなくなる。下記のようにデフォルトアイコンのマーカーと、アイコンを変更したマーカーをgoogleMapに表示しております。 var map = new GMap2(document.getElementById("map_canvas")); map.setCenter(new GLatLng(41.7724,140.72628), 12); var markerIcon1 = new GIcon(); markerIcon1.image = "./green.png"; markerIcon1.iconAnchor = new GPoint(16, 32); var opt1 = {icon:markerIcon1,clickable:true}; var marker1 = new GMarker(new GLatLng(41.75886,140.703535), opt1); var marker2 = new GMarker(new GLatLng(41.79672,140.757179), {clickable:true}); map.addOverlay(marker1); map.addOverlay(marker2); marker1.bindInfoWindowHtml("てすと１<br />",{maxWidth:200}); marker2.bindInfoWindowHtml("てすと２<br />",{maxWidth:200}); するとデフォルトアイコンのマーカーはクリックした際に情報ウインドウが表示されるのですが、アイコン画像を変更したほうのマーカーはクリックしても情報ウインドウが表示されず、「エラー: b is undefined　ソースファイル: http://maps.gstatic.com/intl/ja_ALL/mapfiles/193c/maps2.api/main.js　行: 1224」というエラーが表示されてしまいます。アイコン画像を変更したマーカーでは情報ウインドウは表示できないのでしょうか？

GoogleMapを複数表示させたい

GoogleMap　を　API　で２つ表示させて、それぞれの地図にマーカーをひとつずつつけたいです。マーカーをつけて吹き出すをだすまではできたのですが、マップをもうひとつ増やすにはどのように記述すればよいでしょうか？現在のソースは以下です -------------------------------------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <style type="text/css"> #Gmap{ width:500px; height:500px; } </style> <script src="http://maps.google.com/maps?file=api&v=2&key=http://maps.google.com/maps?file=api&v=2&key=" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> //<![CDATA[ function load() { if (GBrowserIsCompatible()) { //地図を作成 var map = new GMap2(document.getElementById("Gmap")); map.setCenter(new GLatLng(35.675845,139.744763), 15); //マーカーを作成 var marker = new GMarker(new GLatLng(35.675845,139.744763)); //マーカーをクリックしたら、吹き出しの中に写真を表示する GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml("テキストが入ります"); }); //マーカーを地図上に配置 map.addOverlay(marker); //縮尺移動のコントロールを設置 map.addControl(new GLargeMapControl()); //地図衛星写真切り替えボタンを表示 map.addControl(new GMapTypeControl()); //縮尺表示 map.addControl(new GScaleControl()); } } //]]> </script> </head> <body onload="load()" onunload="GUnload()"> <div id="Gmap"></div> </body> </html> -------------------------------------------------------- よろしくお願いいたします

Google Maps：同マップ内でそれぞれのアイコンの表示・非表示を切り替えるには

いつもお世話になっております。 Google Mapsを利用し、同マップ内でそれぞれのアイコンの表示・非表示を切り替えたいという要望を受けたのですが、やりかたがわからず途方に暮れています。 - 要望 ------------------------------------------- 1.Google Maps内にカテゴリ1～6に属する、デザインがちがうアイコンをそれぞれ3つずつ表示。 2.このアイコンを、カテゴリ群ごとにボタンか何かで表示・非表示を切り替える。 -------------------------------------------------- [1]に関してはできたのですが、[2]のやり方がわかりませんでした。代替案として、カテゴリごとにGoogle Mapsを読み込むhtmlを変えて iframe内で表示するというのを出したのですが、 “同マップ上でアイコンだけ表示したり消したり”したいとのことでした。 [1]を実現するのに使用したコードが下記になります。 (※マーカーの関するスクリプトだけ外部ファイル化し、bodyにonloadでcreateMapを読み込んでいます) ----------------------------------------------------- function createMap() { var map = new GMap2(document.getElementById("map")); map.addControl(new GLargeMapControl()); map.addControl(new GOverviewMapControl()); map.setCenter(new GLatLng(緯度, 経度), 13); var icon = new GIcon(); icon.image = "marker.png"; icon.shadow = "shadow.png"; icon.iconSize = new GSize(20, 34); icon.iconAnchor = new GPoint(10, 34); icon.infoWindowAnchor = new GPoint(7, 1); var icon2 = new GIcon(); icon2.image = "marker2.png"; icon2.shadow = "shadow.png"; icon2.iconSize = new GSize(20, 34); icon2.iconAnchor = new GPoint(10, 34); icon2.infoWindowAnchor = new GPoint(7, 1); var point001 = new GLatLng(緯度, 経度); var marker001 = new GMarker(point001, icon); map.addOverlay(marker001); GEvent.addListener(marker001, 'click', function() { marker001.openInfoWindowHtml('<div style="width: 300px">吹き出し<\/div>'); }); var point002 = new GLatLng(緯度, 経度); var marker002 = new GMarker(point002, icon2); map.addOverlay(marker002); GEvent.addListener(marker002, 'click', function() { marker002.openInfoWindowHtml('<div style="width: 300px">吹き出し<\/div>'); }); } ---------------------------------------------- ここまで方法について、ご存じの方がいらっしゃったら教えていただきたいです。よろしくお願いいたします！

Google Map API2 openInfoWindowHtmlのmaxWidth

Google Map API2で、openInfoWindowHtmlを使って吹き出しを作ってます。ドキュメントなどを見ると、maxWidthプロパティで吹き出しの幅を変えられることになっているのですが、いろいろやってみても幅が変わらないようです。サンプルソース function seeAt(lat, lng, title, body, size) { var point = new GLatLng(lat, lng) map.setCenter(point, size); var html="<b>"+title+"</b><p>"+body+"</p>"; var marker = new GMarker(point); map.addOverlay(marker); map.openInfoWindowHtml(point, html, {maxWidth:400}); } という関数を作っておいて、 <a href="javascript:void(0);" onclick="seeAt(35.55, 139.78, '羽田空港', '', 13);">羽田空港発</a> といった感じで、呼び出します。地図移動やマーカー、吹き出しや中の文字列はちゃんと表示されるんですが、幅設定だけができません。

GoogleMapAPI - デフォルト表示したマーカーから緯度経度を取得できない

最近googleMapを利用しデータベースと連携してコミュニケーションツールを作れないかとあれこれ本やネットで調べた知識でがんばっているのですが、行き詰まってしまったのでどなたかお知恵をお貸し下さい。 ◇前提・googleMapのページアクセス時に　ＤＢに登録済みのマーカー情報（緯度・経度・場所名称）を基に　複数のマーカーを表示する　※ＤＢとのデータ中継はＰＨＰを使用。ここでは省略。 ◇問題点・表示された複数のマーカーのうちどれかをクリックしたとき　そのマーカーに付随するデータをフォーム上に表示したいが、　ＤＢへの問い合わせに必要なクリックしたマーカーの緯度経度が　取得できない。以下抜粋 ------------------------------------------------- // 登録済みマーカーをデフォルト表示 GDownloadUrl("load.php", function(doc, stat){ var load = doc.parseJSON(); for(var i=0; i<load.data.length; i++){ var point = new GLatLng(load.data[i].lat, load.data[i].lng); var marker = new GMarker(point); map.addOverlay(marker); // クリックしたマーカーに該当する情報を表示 GEvent.addListener(marker, "click", function(){ //*** ここで緯度経度を取得 **** } } }); ------------------------------------------------- http://oshiete1.goo.ne.jp/qa2559818.html 上記ページの質問に対する回答の方法も試しましたが、エラーが出てしまい解決できませんでした。プログラム素人な上、不慣れな分野にて行き詰まってます。どうかお助け下さい。

googleMapのマーカーがうまく表示されません

googleMapを使って地図を表示させていますが、MarkerやopenInfoWindowといった関数の部分が上手く表示されません。具体的なスクリプトはこんな感じです。 <!DOCTYPE html PUBLIC "-//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>Google Maps JavaScript API Example</title> <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAREfirLNOQkMPltS0MtM_aRT2vOvOMLA6ksVZJNRPEoKnAz-wSxSLgFyYzSPMTRAqy1S4fTvUnXKX-g" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ function load() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(35.689488, 139.691706), 20); map.addControl(new GLargeMapControl()); map.centerAndZoom(new GPoint(35.689488, 139.691706), 20); //マーカー var marker=new GMarker(new GPoint(35.689488, 139.691706)); map.addOverlay(marker); 　　　　　　　　//吹き出し var msg="ここです"; map.openInfoWindowHtml(map.getCenterLatLng(),msg); } } //]]> </script> </head> <body onload="load()" onunload="GUnload()"> <div id="map" style="width: 500px; height: 500px"></div> 　　<script type="text/javascript"> </body> </html> どなたかご教授くださると助かります。宜しくお願いいたします。

ストリートビューでマーカークリックするとエラー

マップとストリートビューを並べて表示させるページを作成しています。マップをクリックしたら、その箇所のストリートビューを表示させたいのですが、マーカーをクリックすると NULLまたはオブジェクトではありません。エラーがでてしまいます。マーカーにオブジェクトが含まれてないから等かんがえていますが・・・。 var map; var panorama; function load() { if (GBrowserIsCompatible()) { map = new GMap2(document.getElementById("map")); map.addControl(new GMapTypeControl()); map.addControl(new GLargeMapControl()); map.setCenter(new GLatLng(35.658517, 139.745493), 16); GEvent.addListener(map, "click", moveCenter); var street = new GStreetviewOverlay(); map.addOverlay(street); var option = { latlng:spoint }; var scontainer = document.getElementById("street"); panorama = new GStreetviewPanorama(scontainer, option); var spoint = new GLatLng(35.658517, 139.745493); panorama.setLocationAndPOV(spoint); } } function moveCenter(overlay, point){ map.panTo(point); panorama.setLocationAndPOV(point); panorama.show(); } ちなみに下記のページを参照しています。 http://www.ajaxtower.jp/googlemaps/gstreetviewpanorama/index3.html これに現状下記のようにマーカーをつけています。 marker = new GMarker(map.getCenter()); // マーカーコントロール作成 map.addOverlay(marker); // マーカー表示 GEvent.addListener(marker,"mouseover",onMarkerMouseMove); // マーカークリックイベント設定 marker.openInfoWindowTabsHtml(mtabs); // フキダシ表示 ----- function onMarkerMouseMove(){ // マーカーにマウス移動 marker.openInfoWindowTabsHtml(mtabs); // フキダシ表示 } なにか他に参考になるページか、マーカークリック時のストリートビューのエラー回避で参考になるものがあればうれしいです。

Googlemapb api　複数のマーカー表示に

基礎的なことかもしれませんが、結構調べたりしても分からなかったので、教えてほしいです。 Googlemap api を使った複数のマーカー表示を$getJSON（jQuery)を使用しようして表示させたいのですが、表示できません。どこがおかしいか教えてください。【HTML】 1.<!DOCTYPE html> 2.<html> 3.<head> 4.<meta charset="UTF-8"> 5.<title>map</title> 6.<style type="text/css"> 7.html,body,#map { 8.height: 100%; 9.} 10.</style> 11.</head> 12.<body> 13.<div id="map"></div> 14.<script type="text/javascript" src="map.js"></script> 15.<script type="text/javascript" src="jquery-3.6.0.min.js"></script> 16.<script async defer 17.src="https://maps.googleapis.com/maps/api/js?key=【APIキー】&callback=initMap"> 18.</script> 19.</body> 20.</html> 【JavaScript】 1.var map; 2.var marker = []; 3.var data = []; 4.var center = {lat: 36.72073,lng: 137.27112}; 5.function initMap() {//地図の作成 6.map = new google.maps.Map(document.getElementById('map'), { // #mapに地図を埋め込む 7. center: center,// 地図の中心を指定 8. zoom: 15 // 地図のズームを指定 9. }); 10. $.getJSON("aaaaa.json", function(json){ 11. for (var i = 0; i <= json.length-1; i++) { 12. data.push( 13. { 14. 'name': json[i].name, 15. 'lat': json[i].lat, 16. 'lng': json[i].lng 17 }); 18 }; 19. for (var i = 0; i < data.length; i++) { 20. markerLatLng = {lat: data[i]['lat'], lng: data[i]['lng']}; 21. marker[i] = new google.maps.Marker({　//マーカーの追加 22. position: markerLatLng,//マーカーを立てる位置を指定 23. map: map//マーカーをたてる地図を指定 24. }); 25. } 26 });//jsonの閉じ 27.} 【JSON】 [ { "name": "名古屋駅", "lat": 35.170897, "lng": 136.881558 }, { "name": "大名古屋ビルヂング", "lat": 35.172311, "lng": 136.884568 }, { "name": "国際センター駅", "lat": 35.172038, "lng": 136.887701 } ]

googlemap 、mysqlでサイドバー

システム設計初心者です。 googlemap 、mysqlでマーカー（クリックで情報ウィンドウ表示）とサイドバーを表示するシステムを作っているのですが、マーカーは表示されたのですがサイドバーが表示されません。以下にソースを表示しましたので、添削をお願いします。サイドバーには、ｍｙSQLから持ってきたtitleを表示したいと考えています。宜しくお願いします。・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・ <!DOCTYPE html PUBLIC "-//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> <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAR0TWf73rulOP_SnETQPFKxRj5djmSsmVAgDaRb1psFcJlThRhxSjxifqM96NjrBsBn2XrZWSE-QQqQ" type="text/javascript"></script> <script type="text/javascript"> function initialize() { //サイドバーのボタンを作成 createMarkerButton(marker); } //<![CDATA[ function load() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); map.addControl(new GSmallMapControl()); map.addControl(new GMapTypeControl()); map.setCenter(new GLatLng(35.6894875,139.6917064), 13); // Change this depending on the name of your PHP file GDownloadUrl("posts.php", function(data) { var xml = GXml.parse(data); var markers = xml.documentElement.getElementsByTagName("marker"); for (var i = 0; i < markers.length; i++) { var title = markers[i].getAttribute("title"); var nitiji = markers[i].getAttribute("nitiji"); var message = markers[i].getAttribute("message"); var picture = markers[i].getAttribute("picture"); var point = new GLatLng(parseFloat(markers[i].getAttribute("latitude")), parseFloat(markers[i].getAttribute("longitude"))); var marker = createMarker(point, title, nitiji, message, picture); map.addOverlay(marker); } }); } } function createMarker(point, title, nitiji, message, picture) { var marker = new GMarker(point); var html = "<table>"+"<tr>"+"<td>"+"タイトル:"+"</td>"+"<td>"+ title +"</td>"+"</tr>"+"<tr>"+"<td>"+ "日時:"+"</td>"+"<td>"+nitiji+"</td>"+"</tr>"+"</table>"+ "<h3>"+"コメント:"+"</h3>"+"<h4>"+message+"</h4>"+"<h3>"+"写真:"+"</h3>"+picture; GEvent.addListener(marker, 'click', function() { marker.openInfoWindowHtml(html); }); 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); //サイドバーがクリックされたら、マーカーを擬似クリック google.maps.event.addDomListener(li, "click", function(){ google.maps.event.trigger(marker, "click"); }); } google.maps.event.addDomListener(window, "load", initialize); //]]> </script> </head> <body onload="load()" onunload="GUnload()"> <h1>閲覧</h1> <div id="map" style="width: 800px; height: 600px"></div> <div><h3><a href="index.php"/>戻る</a></h3></div> </body> </html> ・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・

XMLを読み込んでサイドバー付きでGoogleMapを表示させるものを

XMLを読み込んでサイドバー付きでGoogleMapを表示させるものを、色々参考にしながら作成しています。先日、こちらの掲示板で質問させていただき、アドバイスをいただいてJavaScriptの中身を改変してみたのですが、状況が変わってきましたので、前回の板を閉めて、改めて質問させていただきました。（初回質問） http://questionbox.jp.msn.com/qa5860644.html 【動作サンプル】 http://6pesos.googlecode.com/svn/trunk/xml.html ↑のサンプルのXMLの読み込み部分を以下のように修正してみました。【修正内容】 GDownloadUrl("data/example-xml.xml", function(data, responseCode) { // XMLファイルの名称・場所 if(responseCode == 200) { var xml = GXml.parse(data); var markers = xml.documentElement.getElementsByTagName("marker"); var side_bar = document.getElementById("side_bar"); side_bar.innerHTML = ""; for (var i = 0; i < markers.length; i++) { var point = new GLatLng(parseFloat(markers[i].getElementsByTagName("lat")[0].nodeValue), parseFloat(markers[i].getElementsByTagName("lng")[0].nodeValue)); var label = markers[i].getElementsByTagName("label")[0].nodeValue; var html = markers[i].getElementsByTagName("html")[0].nodeValue; var marker = createMarker(point, label, html); map.addOverlay(marker); var side_barEntry = createside_barEntry(marker, label); side_bar.appendChild(side_barEntry); } 【XMLファイル】 <?xml version="1.0" encoding="UTF-8"?> <markers> <marker> <lat>00.000000</lat> <lng>00.000000</lng> <label>●●●</label> <html>▲▲▲</html> </marker> </markers> これらを表示させてみたのですが、エラーが出て表示されません。エラーの内容は以下です。メッセージ: 引数が無効です。ライン: 137 文字: 18 コード: 0 URI: http://maps.gstatic.com/intl/ja_ALL/mapfiles/225b/maps2.api/main.js 検索して調べてみたのですが、解決法が分かりませんでした…。サイドバーなしのMAPのみだと、このようなXMLの記述方法で表示可能なようですが、サイドバーがあるMAPにするとエラーが出ます。解決法が分かる方いらっしゃいましたら、ご教授いただけませんでしょうか。参考URLでもかまいませんので、よろしくお願い致します。

googleMapで情報ウィンドウの表示が崩れる

みんなの回答

お礼 2007/07/27 22:58

関連するQ&A

グーグルマップについて教えてください。

googleMapでアイコン変更すると情報ウィンドウが開かない

googlemap api で複数マーカー表示

googleMapでアイコン変更すると情報ウィンドウが開かない

googlemapsAPIでマーカー表示されない

GoogleMAPの切り替えについて

Googlemap apiでFFとNNでマーカーの表示が出ないのですが、どこが間違っていますか？

Google Mapsからxmlファイルの読み込み

googlemapでの位置の表示

GoogleMap APIマーカーマネージャーとXMLの読み込み

googleMapでアイコンを変更すると、情報ウインドウがでなくなる。

GoogleMapを複数表示させたい

Google Maps：同マップ内でそれぞれのアイコンの表示・非表示を切り替えるには

Google Map API2 openInfoWindowHtmlのmaxWidth

GoogleMapAPI - デフォルト表示したマーカーから緯度経度を取得できない

googleMapのマーカーがうまく表示されません

ストリートビューでマーカークリックするとエラー

Googlemapb api　複数のマーカー表示に

googlemap 、mysqlでサイドバー

XMLを読み込んでサイドバー付きでGoogleMapを表示させるものを

注目のQ&A

カテゴリ

あなたにピッタリな商品が見つかる！ OKWAVE セレクト

専門家に質問してみよう

googleMapで情報ウィンドウの表示が崩れる

みんなの回答

お礼 2007/07/27 22:58

関連するQ&A

グーグルマップについて教えてください。

googleMapでアイコン変更すると情報ウィンドウが開かない

googlemap api で複数マーカー表示

googleMapでアイコン変更すると情報ウィンドウが開かない

googlemapsAPIでマーカー表示されない

GoogleMAPの切り替えについて

Googlemap apiでFFとNNでマーカーの表示が出ないのですが、どこが間違っていますか？

Google Mapsからxmlファイルの読み込み

googlemapでの位置の表示

GoogleMap APIマーカーマネージャーとXMLの読み込み

googleMapでアイコンを変更すると、情報ウインドウがでなくなる。

GoogleMapを複数表示させたい

Google Maps：同マップ内でそれぞれのアイコンの表示・非表示を切り替えるには

Google Map API2 openInfoWindowHtmlのmaxWidth

GoogleMapAPI - デフォルト表示したマーカーから緯度経度を取得できない

googleMapのマーカーがうまく表示されません

ストリートビューでマーカークリックするとエラー

Googlemapb api 複数のマーカー表示に

googlemap 、mysqlでサイドバー

XMLを読み込んでサイドバー付きでGoogleMapを表示させるものを

注目のQ&A

カテゴリ

あなたにピッタリな商品が見つかる！ OKWAVE セレクト

専門家に質問してみよう

Googlemapb api　複数のマーカー表示に