GoogleMapのGeocoderがlocalhostで正常に動作しません| OKWAVE

javascriptでgooglemapを表示させたいのですが、fir

javascriptでgooglemapを表示させたいのですが、firefoxで表示できず、空白になってしまいます。 IEでは問題なく表示できています。何が問題でしょうか。 html部分です。 <!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" id="sixapart-standard"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script src="http://maps.google.com/maps?file=api&v=2&key=xxxxxx" type="text/javascript"></script> <script type="text/javascript" src="http://xxxxx.xxx/test.js"></script> </head> <body> <div id="map" style="width: 450px; height: 300px"></div> </body> </html> test.js部分です。 window.onload = function() { var map = null; var geocoder = null; if (GBrowserIsCompatible()) { map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(35.67431, 139.69082), 13); // GClientGeocoderを初期化 geocoder = new GClientGeocoder(); } if (geocoder) { geocoder.getLatLng( "東京都xx区xx", function(point) { if (!point) { alert(address + " not found"); } else { map.setCenter(point, 13); var marker = new GMarker(point); map.addOverlay(marker); marker.openInfoWindowHtml("ここが目的地です。"); } } ); } }

GoogleAPIの地図をPHP（Smarty）で表示させたい

PHPのSmartyを用いて、任意の住所の地図表示を行うテンプレートを作成しています。他の方が作られたサンプルプログラムを元に考えているのですが、地図が表示されないようです。 Smartyテンプレートとして、住所文字列を$event_locationとして格納し、その地図を表示させたいのですが、下記の2つのfunction部分で処理がとまるように見えています。申し訳ございませんが、どなたか解決方法（下記以外の書き方でもかまいません）を教えて頂けませんでしょうか。よろしくお願いいたします。 ---<googlemap.tpl>------------------------------- <!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> <title>Google Maps JavaScript API Example - simple</title> </head> <script src="http://maps.google.com/maps?file=api&v=2.x&key=GOOGLEAPIKEY type="text/javascript" charset="UTF-8"></script> <body onload="load();showAddress('{$event_location}')"> <div id="map" style="width:450px; height:400px"></div> <script type="text/javascript"> var map = null; var geocoder = null; function load() { if (GBrowserIsCompatible()) { map = new GMap2(document.getElementById("map")); map.addControl( new GSmallMapControl() ); geocoder = new GClientGeocoder(); } } function showAddress(address) { if (geocoder) { geocoder.getLatLng( address, function(point) { if (!point) { alert(address + " not found"); } else { map.setCenter(point, 13); var marker = new GMarker(point); map.addOverlay(marker); marker.openInfoWindowHtml(address); } } ); } } </script> <div id="map" style="width:500px; height:600px"></div> </body> </html>

GoogleMaps API 住所から複数ピンを表示

GoogleMaps API素人ですが・・・最近いろいろやっていてやっとDBの住所（日本語の住所　例：大阪府大阪市中央区平野町1丁目）を引っ張ってきてグーグルマップで座標を取得してピンを立てることに成功しました。今苦戦しているのは同じ地図上に複数のピンをさす方法です。どなかた教えていただけないでしょうか？ちなみに今１ピン表示に成功してるコードはこちらです。どこから、どこまで繰り返したらいいのでしょうか・・・？－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ <? //DB（MySQL）からデータ取得 $address = $row["address"]; $fukidashi = "住所：".$row["address"]; ?> <div id="map" style="width:500px; height:400px; border:1px solid #999;"></div> <script type="text/javascript">  </script>

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> どなたかご教授くださると助かります。宜しくお願いいたします。

GoogleMapAPIで初期位置の表示

<?php $DBaddress = "大阪市北区芝田" ; ?> <!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> <title>Google Maps JavaScript API Example</title> <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAKeodYAh1Nwl_nAMXwxLMtBSC5B7_MxPtqlxCQwd0QI3Cuv7JOxTp8TCJGdhudgycU3vU3mjNTZ5vhQ" type="text/javascript" charset="utf-8"></script> </head> <body onload="initAddress()"> <div id="map" style="width:450px; height:400px"></div> <script type="text/javascript"> //<![CDATA[ var map = new GMap2(document.getElementById("map")); var geocoder = new GClientGeocoder(); function showAddress(address) { geocoder.getLatLng( address, showTheLatLng ); } function showTheLatLng (latlng) { var address = document.getElementById("address").value; // 入力欄のidはaddress if (!latlng) { alert("ご指定の住所（" + address + "）はジオコーディングできませんでした。"); } else { map.setCenter(latlng, 13); map.addControl(new GLargeMapControl()); map.addControl(new GMapTypeControl()); var marker = new GMarker(latlng); map.addOverlay(marker); marker.openInfoWindowHtml(address); } } //]]> </script> </body> </html> としてDBから値を受け取って初期の地図を表示したいです。どのようにしたら良いでしょうか？

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を複数表示させたい

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> -------------------------------------------------------- よろしくお願いいたします

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()"> 中略・・・初心者なもので、、、ご回答お願いいたします。

Google Maps APIで特定の住所の地図を表示させたい

Google Maps APIで以下のようなページを作りました。 <body onload="loadMap()"> <div id="map" style="width:450px; height:400px"></div> <script type="text/javascript"> //<![CDATA[ if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(37.441944, -122.141944), 15); map.addControl(new GLargeMapControl()); // GClientGeocoderを初期化 geocoder = new GClientGeocoder(); } GEvent.addListener(map, 'move', function() { var xy = map.getCenter(); document.getElementById("show_x").innerHTML = xy.lng(); document.getElementById("show_y").innerHTML = xy.lat(); }); // 「移動する」ボタンを押されると実行されます function showAddress(address) { if (geocoder) { geocoder.getLatLng( address, function(point) { if (!point) { alert(address + " not found"); } else { map.setCenter(point, 13); var marker = new GMarker(point); map.addOverlay(marker); marker.openInfoWindowHtml(address); } } ); } } //]]> </script> <p> </p> <form action="#" onsubmit="showAddress(this.address.value); return false"> <p> <input type="text" size="40" name="address" value="渋谷区1-1" /> <input type="submit" value="移動する" /> </p> </form> <p>x</p><div id="show_x"></div> <p>y</p><div id="show_y"></div> </body> これだと、表示させたい住所を毎回入力しないといけないんですが、PHPとMySQLを使ってDBにある住所の地図を表示させたい場合はどのようにすればいいのでしょうか？ <body onload="loadMap()"> を <body onload="showAddress([ここにDBからぬいてきた住所]); return false"> にしてみたんですが機能しません。

Google Mapsがテーブルタグの中で使えません(IEのみ)

IE6、IE7でGoogle Mapsから取得した地図データをテーブルタグの中で表示しようとすると、地図がグレーになり表示することができません。同じコードでもFirefox2は正常に表示できます。表示場所(下記のコードの<div id="map">)をテーブルタグの外に移すとIEでも正常に地図を表示できています。何かお分かりになる方がいらっしゃいましたら、アドバイスをお願いできないでしょうか。コードは以下の通りです。 <!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> <title>Google Maps Example</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> </head> <body> <div id="map" style="width:350px; height:300px;"></div> <script src="http://maps.google.com/maps?file=api&v=2&key=[キー値]" type="text/javascript" charset="utf-8"></script> <table style="width: 600px;"> <tr> <td> <script type="text/javascript"> //<![CDATA[ var map = new GMap2(document.getElementById("map")); var geocoder = new GClientGeocoder(); geocoder.getLatLng('new york', function(point) {map.setCenter(point, 13);}); //]]> </script> </td> </tr> </table> </body> </html> OSはWindowsXP(SP2)です。よろしくお願いいたします。

GoogleMAPのIE8での印刷について

goolgemapをAPIで設置しましたなぜか、IE8で印刷プレビューをすると 1ページで収まるはずの印刷が、2ページになってしまい、 2ページ目にはgooglemapがはみ出しています CSSで設定したワイドサイズも無視して画面全体にgooglemapが広がった状態です DOCTYPE・・・　をはずせば大丈夫なようですがこちらをはずすとCSSが上手く動かくなってしまう為はずせません何か解決策があれば教えてください下記の通り、記述しました --------------------------------------------------------------------------- <!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" /> <title>APIテスト</title> <script src="http://maps.google.com/maps?file=api&v=2&key=http://maps.google.com/maps?file=api&v=2&key=APIキー" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> function load() { if (GBrowserIsCompatible()) { //店舗の位置 var point = new GLatLng(35.681492,139.766071); //店舗を中心にマップ作成 var map = new GMap2(document.getElementById("gmap")); map.setCenter(point, 15); //店舗にマーク map.addOverlay(new GMarker(point)); //縮尺移動のコントロールを設置 map.addControl(new GSmallMapControl()); } } </script> </head> <body id="second" onload="load()" onunload="GUnload()"> <p style="height:700px; background:#CCCCCC;">余白</p> <div id="gmap" style="width:230px; height:380px;"> </div> </body> </html> ---------------------------------------------------------------------------

GoogleMapのIEでのバグ

以下の状況に大変悩んでおります、ご教授いただけたら幸いです。東京都のとある場所を中心としてマップを表示するHTMLページを tokyo.htmlとして作成し、親ページのparent.html内の<IFRAME>タグで tokyo.htmlを読み込んで表示しているのですが、極々一部のPCのInternetExplorer(IE6.0以上)で中心がマップの左上隅になってしまう現象が発生しております。 OperaやFirefoxではこのようにはならず正常です。 IEでもこちらで所有するほとんどのPCからはバグは出ません。また、tokyo.htmlを直接開いてもバグはでません。 IFRAMEで呼び出すと発生します。バグが出るものと出ないものの設定やIEバージョンの差も今のところ見当たりません。これらはテストページなのでコードもかなり簡素で特別なことはしていないのですが。。本チャンでは必ずIFRAMEを使用して表示しなくてはならないのでなんとかしたいのですが見当が付く方おりませんでしょうか？ちなみに<OBJECT>タグでの読み込みもテストしてみましたが同様の結果でした。 ■tokyo.html ------------------------------------------------------------------------ <!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" xml:lang="ja" lang="ja" dir="ltr"> <head> <script src="http://maps.google.co.jp/maps?file=api&hl=ja&v=2&key=xxxxxx" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ function initLoad(){ var lat = '35.65863'; //緯度 var lng = '138.74541'; //経度 if(GBrowserIsCompatible()){ var map = new GMap2(document.getElementById("map")); var point = new GLatLng(lat,lng); map.setCenter(point, 10); map.addControl(new GSmallMapControl()); map.addControl(new GScaleControl()); map.addControl(new GMapTypeControl()); map.setMapType(G_HYBRID_TYPE); var marker = new GMarker(point); map.addOverlay(marker); } } //]]> </script> </head> <body onload="initLoad()" onunload="GUnload()"> <div id="map" style="width:500px; height:500px;"></div> </body> </html> ------------------------------------------------------------------------ ■　parent.html ------------------------------------------------------------------------ <html> <body> <table> <tr><td>test</td></tr> <tr><td> <iframe src="tokyo.html" height="500" width="500" frameborder="0"></iframe> </td></tr> </table> </body> </html> ------------------------------------------------------------------------

Google maps API のマーカーを増やす

お恥ずかしながらJavascriptが全く分からない者です。しかし、必要が生じ、いじっていますが、下記のソースで、マーカーの個数を増やす場合、何処のソースをどのように増やせばいいのでしょうか？また、その他やり方がありましたら、ご教授いただければと思い、質問させていただきました。よろしくお願いいたします。 <!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> <title>テスト</title> <link href="../../css/css.css" rel="stylesheet" type="text/css" /> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <script src="?http://maps.google.com/maps?file=api&v=2&key=?＊＊＊＊" type="text/javascript"></script> </head> <body> <h1>テスト</h1> <div id="map" style="width: 500px; height: 300px"></div> <script type="text/javascript"> //<![CDATA[ if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); map.addControl(new GLargeMapControl()); var point = new GLatLng(35.852766, 139.794382); map.setCenter(point, 16); var marker = new GMarker(point); map.addOverlay(marker); GEvent.addListener(map, 'click', function(overlay, point) { if (overlay) { overlay.openInfoWindow( document.createTextNode("テスト")); } }); } //]]> </script> </body> </html>

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> ・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・

Google Map Api　複数のマーカーをおくと、一部が表示されない

お疲れ様です。お世話になっております。 Google Map Apiで複数のマーカーを設置するスクリプトを組みました。 10件程度は問題なく表示されるのですが、10件を境に、表示されたり、されなかったりします。 F5で表示されるもの、されないものとまばらになるので、なんとなく原因は、処理よりも表示のほうが速いからではないか？ということなんですが、JSの処理の流れがイマイチわかっていないので、結論は出せません。実際20件登録したところ、10件～17件の間で出たり出なかったりします。1～10件までは必ず表示され、その後ろのIDを持つものがランダムになります。これを確実に全部表示されるようにしたいのですが、表示の前にsleepなどかけるのがよいのか、ajaxにしてみるのがよいのかなど、検討がつきません。下記が、書いたスクリプトです。もしよければ、アドバイスお願いします。 var markers = new Object(); var marker = new Object(); marker["name"] = "xxx"; marker["icon"] = "ylw-pushpin"; marker["address"] = "座標変換用の住所"; marker["text"] = "噴出しの中身"; marker["center"] = "中心にするかしないか"; markers[0] = marker; ２０回ループ markers[20] = marker; googlemap(markers) -----------googlemap(markers) function googlemap(markers) { if (GBrowserIsCompatible()) { geocoder = new GClientGeocoder(); map = new GMap2(document.getElementById("map")); map.addControl(new GSmallZoomControl()); map.addControl(new GScaleControl()); for(var i in markers){ showAddress(markers[i]); //ここは20回ちゃんとまわってるようです } } } ------------------showAddress() function showAddress(amarker) { if (geocoder) { geocoder.getLatLng( amarker['address'], function(point) { if(amarker['center'] == 1){ map.setCenter(point, 12); } //アイコンが指定されてたらアイコンを設定 if(amarker['icon']){ var marker = new GMarker(point,micon); //アラートしてみると、ここが10回～17回ぐらいしか回ってない }else{ var marker = new GMarker(point); } map.addOverlay(marker); GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(ふきだしのなかみ) }); } ); } }

googlemapについて教えてください。

googlemapでマーカーが追随するようにしたくて、function update(position)　の関数のはじめにif(marker!=null){marker.setMap(null);}を入れてマーカーを消してから、次のマーカーがつくようにとしたつもりなのですが、うまくいきません。どのようにしたら、現在地にマーカーがつくようになるのでしょうか。下の場合マーカーがたくさんつきます。よろしくお願いします。 <html> <head> <title>map</title> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&language=ja&v=3.6"></script> <script type="text/javascript"> var gmap; window.onload = function(){ var myLatlng = new google.maps.LatLng( 33 , 130 ); navigator.geolocation.watchPosition(update,poserror,{maximumAge: 30000,enableHighAccuracy:1}); var myOptions = { zoom: 15, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; gmap = new google.maps.Map(document.getElementById("map_canvas"), myOptions); } function update(position){ var lat = position.coords.latitude; var lng = position.coords.longitude; var myLatlng = new google.maps.LatLng( lat , lng ); gmap.setCenter( myLatlng ); var marker = new google.maps.Marker({ position: myLatlng, map: gmap }); } function poserror(position){alert("error");} </script> </head> <body> <div id="map_canvas" style="width:95%; height:500px ; border:solid 3px #ccc;"></div> </body> </html>

google mapで二番目以降のマップが表示されない

自作のマーカーを使い、マーカーをクリックすると吹き出しが出るようにして、マップ上２か所にマーカーを付けたのですが、２番目のマーカーが全く反映されません。下に書いたものがそのコードなのですが、見直してもどこにミスがあるのかわかりません… どなたか解決策をお願いします… <script type="text/javascript"> //<![CDATA[ var map = new GMap(document.getElementById("map")); map.addControl(new GLargeMapControl()); map.addControl(new GMapTypeControl()); map.centerAndZoom(new GPoint(135.384521484375,34.73709847578162), 8　); var icon = new GIcon(); icon.image = "　pngイメージ画像　"; icon.shadow = "　pngイメージ画像　"; icon.iconSize = new GSize(12, 20); icon.shadowSize = new GSize(22, 20); icon.iconAnchor = new GPoint(6, 20); icon.infoWindowAnchor = new GPoint(5, 1); // １番目位置 var point = new GPoint(省略); var marker = new GMarker(point,icon); map.addOverlay(marker); // １番目吹き出し GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml("<div style='width:350px;font-size:12px;' ><table><tr><td><img src=イメージ画像 ><br><a href=\"ページへのリンク\"target=\"blank\" >説明文<br><br></td></tr></table></div>");}); var marker = createMarker(point,html); map.addOverlay(marker); // ２番目位置 var point = new GPoint(省略); var marker = new GMarker(point,icon); map.addOverlay(marker); // ２番目吹き出し GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml("<div style='width:350px;font-size:12px;' ><table><tr><td><img src=イメージ画像 ><br><a href=\"ページへのリンク\"target=\"blank\" >説明文<br><br></td></tr></table></div>");}); var marker = createMarker(point,html); map.addOverlay(marker); //]]> </script>

GoogleMap 住所から座標の取得

住所から座標を取得し、マーカーを設置情報ウインドウを設定したいのですが、想定している動きをしません動かすと 1回目→3回目→1回目→3回目→2回目といった順番でalertが表示されます原因はclientGeocoder.getLatLng辺りじゃないかと思っているんですが、これを順番通りに動かすにはどのようにすればよいでしょうか var map; var shopName; var address; var tel; function changeFont(input) { if (GBrowserIsCompatible()) { //住所名取得 var point = document.getElementById('{!$Component.top.ad}').value.split(','); //地図を配置するオブジェクト取得 map = new GMap2(document.getElementById('map')); //拡大・縮小を行えるようにする map.enableScrollWheelZoom(); //ジオコード var clientGeocoder = new GClientGeocoder(); //マーカー設定 for (var i = 0; i < point.length; i++) { //shopName = shop[i]; address = point[i]; //tel = telpho[i]; alert("1回目 = " + address); clientGeocoder.getLatLng(point[i], shoMap); alert("3回目 = " + address); } } } function shoMap(point) { //中心設定 map.setCenter(point, 8); //マーカー var marker = new GMarker(point); map.addOverlay(marker); alert("2回目 = " + address); GEvent.addListener(marker, "click", function() {marker.openInfoWindowHtml("店名：" + shopName + "<br/>住所：" + address + "<br/>TEL：" + tel);}); }

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

お世話になります。ＤＢに登録したマーカーデータを取り出してグーグルマップに表示するツールを作ったのですが、マーカーをクリックしてインフォメーションウィンドウを表示すると「吹き出し」の形が切れ目が入ったように崩れてしまいます。またそこには取り出したデータを表示もするのですが、ドラッグして反転させないと見えない状態です。（単に文字色が白？）以下がプログラムの内容になりますが、何かわかることがありましたらご指摘願えないでしょうか？よろしくお願い致します。 var map function startUp(){ map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(35.618, 139.7672), 10); map.addControl(new GSmallMapControl()); map.addControl(new GMapTypeControl()); map.addControl(new GScaleControl()); map.enableDoubleClickZoom(); GDownloadUrl("load.php", function(doc, stat){ eval("load=" + doc); for(var i=0; i<load.data.length; i++){ var mk = makeMarker(load.data[i].lat, load.data[i].lng, load.data[i].name); map.addOverlay(mk); } }); } function makeMarker(lat, lng, name){ var point = new GLatLng(lat,lng); var marker = new GMarker(point); GEvent.addListener(marker, "click", function(){ marker.openInfoWindowHtml("緯度：" + lat + "<br>経度：" + lng + "<br>施設名：" + name); }); return marker; } 本当はわざわざ関数化することなく下のようにやりたいのですがエラーになるので上のようにしています。 var mk = new GMarker(new GLatLng(load.data[i].lat, load.data[i].lng)); map.addOverlay(mk);

javascriptでgooglemapを出力していますが、firef

javascriptでgooglemapを出力していますが、firefoxで表示されません。他のサーバで使用していた際はfirefoxでも問題なく表示できていました。何が問題でしょうか。 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title/> <script src="http://maps.google.com/maps?file=api&v=2&key=xxxxx" type="text/javascript"/> <script type="text/javascript"> //<![CDATA[ function load() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(35.573027,xxx.xxxxxxxxx), 17); map.addControl(new GMapTypeControl()); map.addControl(new GLargeMapControl()); map.enableScrollWheelZoom(); } } //]]> </script> </head> <body onload="load()" onunload="GUnload()"> <div id="map" style="width: 450px; height: 300px;"/> </body> </html>

GoogleMapのGeocoderがlocalhostで正常に動作しません

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

お礼 2007/08/17 19:09

その他の回答 (1)

お礼 2007/08/17 19:11

補足 2007/08/17 17:18

関連するQ&A

javascriptでgooglemapを表示させたいのですが、fir

GoogleAPIの地図をPHP（Smarty）で表示させたい

GoogleMaps API 住所から複数ピンを表示

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

GoogleMapAPIで初期位置の表示

GoogleMAPの切り替えについて

GoogleMapを複数表示させたい

googlemap api で複数マーカー表示

Google Maps APIで特定の住所の地図を表示させたい

Google Mapsがテーブルタグの中で使えません(IEのみ)

GoogleMAPのIE8での印刷について

GoogleMapのIEでのバグ

Google maps API のマーカーを増やす

googlemap 、mysqlでサイドバー

Google Map Api　複数のマーカーをおくと、一部が表示されない

googlemapについて教えてください。

google mapで二番目以降のマップが表示されない

GoogleMap 住所から座標の取得

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

javascriptでgooglemapを出力していますが、firef

注目のQ&A

カテゴリ

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

専門家に質問してみよう

GoogleMapのGeocoderがlocalhostで正常に動作しません

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

お礼 2007/08/17 19:09

その他の回答 (1)

お礼 2007/08/17 19:11

補足 2007/08/17 17:18

関連するQ&A

javascriptでgooglemapを表示させたいのですが、fir

GoogleAPIの地図をPHP（Smarty）で表示させたい

GoogleMaps API 住所から複数ピンを表示

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

GoogleMapAPIで初期位置の表示

GoogleMAPの切り替えについて

GoogleMapを複数表示させたい

googlemap api で複数マーカー表示

Google Maps APIで特定の住所の地図を表示させたい

Google Mapsがテーブルタグの中で使えません(IEのみ)

GoogleMAPのIE8での印刷について

GoogleMapのIEでのバグ

Google maps API のマーカーを増やす

googlemap 、mysqlでサイドバー

Google Map Api 複数のマーカーをおくと、一部が表示されない

googlemapについて教えてください。

google mapで二番目以降のマップが表示されない

GoogleMap 住所から座標の取得

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

javascriptでgooglemapを出力していますが、firef

注目のQ&A

カテゴリ

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

専門家に質問してみよう

Google Map Api　複数のマーカーをおくと、一部が表示されない