GoogleMaps API 住所から複数ピンを表示
- GoogleMaps APIを使って住所から複数のピンを表示する方法を教えてください
- GoogleMaps APIを使ってDBの住所から座標を取得し、複数のピンを立てる方法を教えてください
- GoogleMaps APIを使って日本語の住所から座標を取得し、同じ地図上に複数のピンを表示する方法を教えてください
- ベストアンサー
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"> <!-- var map = null; var geocoder = null; var address = "<?=$address;?>"; function load() { if (GBrowserIsCompatible()) { map = new GMap2(document.getElementById("map")); map.addControl(new GLargeMapControl()); geocoder = new GClientGeocoder(); geocoder.getLatLng( address, function(point) { if (!point) { alert(address + " の住所が見つかりません"); } else { map.setCenter(point, 16); var marker = new GMarker(point); map.addOverlay(marker); //吹きだし情報 var msg_html1 = "<?=$fukidashi;?>"; marker.openInfoWindowHtml(msg_html1); } } ); } } //--> </script>
- noguri999
- お礼率12% (13/108)
- JavaScript
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
失礼します。No1,No2の回答の続きです。 No2回答でPHPからXMLを返せるようになったら、それをAJAXして、 GoogleMapにマーカーを加えるhtml（javascript）です。 ※ライブラリーは使ってません。Google Map APIのみです。 ※ちょっと、余計な技巧に走って、地図内のマーカーだけでなく、 2段組にして、左側にマーカー名と住所も表示し、そいつをクリック すると、地図が対応するマーカーまで移動して、吹き出しを開くように なっています。 （なんかCSSできれいにおもいどおりレイアウトするのがよくわからん とりあえず崩れて無いと思うが） プログラムのソースコードは、 （gcodingXML.htm）＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja-JP"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>Google Map From XML DATA</title> <script type="text/javascript" charset="UTF-8" src="http://maps.google.com/maps?file=api&v=2&key=あなたのGoogle APIキー"></script> <script type="text/javascript" charset="utf-8"> <!-- var map; function Mapload(){ if(GBrowserIsCompatible()){ map = new GMap2(document.getElementById("map"),{size:new GSize(640,480)}); map.setCenter(new GLatLng(35.655, 139.744),18); map.addControl(new GMapTypeControl()); map.addControl(new GLargeMapControl()); set_xmldata_marker(); } } function set_xmldata_marker(){ var XmlHttp = GXmlHttp.create(); XmlHttp.open("GET","/php/geocodingXML.php",true); XmlHttp.onreadystatechange = GetXmlObj; XmlHttp.send(null); function GetXmlObj(){ if (XmlHttp.readyState == 4 && XmlHttp.status == 200){ var xml=XmlHttp.responseXML; var marker_data=xml.getElementsByTagName("marker"); var marker_navi = document.getElementById("marker_navi"); for(var i=0;i<marker_data.length;i++){ var point = new GLatLng(marker_data[i].getAttribute("lat"),marker_data[i].getAttribute("lng")); map.panTo(point); var marker = new GMarker(point,{clickable:true}); map.addOverlay(marker); var closure = GEvent.callbackArgs(marker,function(html){ this.openInfoWindowHtml(html); map.panTo(this.getLatLng()); },marker_data[i].getAttribute("name") +'<br>' + marker_data[i].firstChild.nodeValue); GEvent.bind(marker,'click',closure,function(){ this.apply(arguments); }); var dt = document.createElement("dt"); dt.innerHTML=marker_data[i].getAttribute("name"); marker_navi.appendChild(dt); GEvent.bindDom(dt,'click',closure,function(){ this.apply(arguments); }); var dd = document.createElement("dd"); dd.innerHTML=marker_data[i].firstChild.nodeValue; dd.style.marginLeft = '5px'; dd.style.marginBottom = '5px'; marker_navi.appendChild(dd); GEvent.bindDom(dd,'click',closure,function(){ this.apply(arguments); }); } } } } // --> </script> <body onload="Mapload()" onunload="GUnload()"> <h2>Google Map From XML DATA</h2> <div style="width:800px;text-align:left;margin:0 auto;"> <div id="map" style="float:right;width:640px;height:480px;border:1px solid black;"></div> <div>項目をクリックして移動</div> <dl id="marker_navi" style="float:left;width:145px;padding-left:0px;margin-left:0px;"></dl> <hr style="clear:both;display:none;"> </div> </body> </html>
その他の回答 (2)
- yyr446
- ベストアンサー率65% (870/1330)
というわけで、まずはサーバー側（PHP）の見本 ※MySQL準備してないので、テキストファイル（CSV形式）から住所を読み込んでます。 ※こんなXMLを返します。 <?xml version="1.0" encoding="UTF-8"?> <places> <marker name="marker1" lat="35.830509" lng="139.7885203">日本埼玉県草加市西町５４１－５</marker> <marker name="marker2" lat="35.6752276" lng="139.7677976">日本東京都中央区銀座１丁目</marker> <marker name="marker3" lat="35.6909226" lng="139.7572061">日本東京都千代田区一ツ橋１丁目１</marker> </places> プログラムのソースコードは、 （geocodingXML.php）＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ <?php setlocale(LC_ALL,'ja_JP'); header('Content-Type: text/xml; charset=utf-8'); $fin = fopen("address.csv","rb"); $row = 1; $xml = xmlwriter_open_memory(); xmlwriter_start_document($xml,"1.0","utf-8"); xmlwriter_set_indent_string($xml," "); xmlwriter_start_element($xml,"places"); while (($data = fgetcsv($fin,1000,",")) !== FALSE){ $addr = $data[0]; mb_convert_variables("UTF-8","auto",$addr); list ($sarch_addr,$lat,$lng) = googleGeoCoding($addr); if (!$sarch_addr==""){ xmlwriter_set_indent($xml,true); xmlwriter_start_element($xml,"marker"); xmlwriter_write_attribute($xml,"name",'marker' . $row ); xmlwriter_write_attribute($xml,"lat",$lat ); xmlwriter_write_attribute($xml,"lng",$lng); xmlwriter_text($xml,$sarch_addr); xmlwriter_end_element($xml); xmlwriter_set_indent($xml,false); } $row++; } fclose($fin); xmlwriter_end_element($xml); echo xmlwriter_output_memory($xml); function googleGeoCoding($addr){ $apikey = "あなたのGoogle APIキー"; $GeoUrl = "http://maps.google.com/maps/geo?"; $addr = rawurlencode($addr); $request = "&q=" . $addr . "&key=" . $apikey . "&hl=ja&output=json" ; $json = file_get_contents( $GeoUrl . $request); $json = json_decode(mb_convert_encoding($json, "UTF-8", "auto")); while ($json->Status->code == '620'){ usleep(200000); $json = file_get_contents( $GeoUrl . $request); } if($json->Status->code == '200'){ if ($json->Placemark[0]){ $json->Placemark = $json->Placemark[0]; } $sarched_addr = $json->Placemark->address; $sarched_Lon = $json->Placemark->Point->coordinates[0]; $sarched_Lat = $json->Placemark->Point->coordinates[1]; }else{ $sarched_addr = "";$sarched_Lat="";$sarched_Lon=""; } return array($sarched_addr,$sarched_Lat,$sarched_Lon); } ?> こんな感じ、 次は、javascript 続く.....
- yyr446
- ベストアンサー率65% (870/1330)
ご提示のソースコードを工夫して、複数件対応にする事はやぶさかでは ありませんが、このような場合サーバー側でDBを読み込む処理と、 クライアント側のブラウザーのjavascriptでGoogleMapを操作する処理は、 非同期なものですから、本来は切り離して処理した方がベターかも。 サーバー側は、HTTPリクエストによってDBを読み込んで住所を、HTMLとか XML、JSON等のテキストデータとして出力します。javascript側は非同期 通信で取得したそのデータを使って、ジオコーディングし、地図にマッピン グするようにします。非同期通信には、GmapAPIクラスの GXmlHttp、GXml、 GDownloadUrlを使えます。 http://code.google.com/intl/ja/apis/maps/documentation/reference.html#GXmlHttp 複数ジオコーディングの注意点としては、GClientGeocoderに連続して 要求を出すと、ステータスコード620が返されエラーになります。 タイムラグしてループさせるか、代わりにHTTPジオコーダーリクエスト を使います。 http://code.google.com/intl/ja/apis/maps/documentation/reference.html#GClientGeocoder
関連するQ&A
- 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"> にしてみたんですが機能しません。
- ベストアンサー
- JavaScript
- 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>
- ベストアンサー
- PHP
- 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(ふきだしのなかみ) }); } ); } }
- ベストアンサー
- JavaScript
- グーグルマップ v3で複数の住所からピンを立てたい
現在、googlemap v3で複数の住所からそれぞれのピンを立てたいと 考えております。 下記コードにて実行しましたが、住所とウィンドーの中身が ずれて表示されてしまい困っております。 例）東京にピンが立っているがウィンドーの中身が広島など どなたかご教授ください。 よろしくお願いいたします。 -----js------ var data = new Array(); data.push({position:'東京都',content:'東京都'}); data.push({position:'広島県',content:'<strong>広島県</strong><p>aaaaaaaaaa</p>'}); data.push({position:'沖縄',content:'<strong>沖縄</strong><p>aaaaaaaaaa</p>'}); data.push({position:'北海道',content:'<strong>北海道</strong><p>aaaaaaaaaa</p>'}); var geocoder = new google.maps.Geocoder(),icon = ''; function gmap(address,path){ icon = path; geocoder.geocode({'address':address}, function(result,status){ if(status == google.maps.GeocoderStatus.OK){ var latlng = result[0].geometry.location; var mapdiv = document.getElementById('map'); var myOptions = { zoom:10, center:new google.maps.LatLng(latlng.lat(),latlng.lng()), mapTypeId:google.maps.MapTypeId.ROADMAP, scaleControl:true, mapTypeControl:true }; var map = new google.maps.Map(mapdiv,myOptions); moreGmap(map); } }); } var j = 0; function moreGmap(map){ var image = new google.maps.MarkerImage(icon,new google.maps.Size(32,50),new google.maps.Point(0,0),new google.maps.Point(16,50)); for(var i in data){ geocoder.geocode({'address':data[i].position},function(result,status){ if(status == google.maps.GeocoderStatus.OK){ var latlng = result[0].geometry.location; var addlatlng = new google.maps.LatLng(latlng.lat(),latlng.lng()); var marker = new google.maps.Marker({ position:addlatlng, map:map, icon:image, title:data[j].position }); var cont = data[j].content; var infoWin = new google.maps.InfoWindow({ content:cont, size:new google.maps.Size(50,50) }); infoWin.open(map,marker); google.maps.event.addListener(marker,'click',function(){ infoWin.open(map,marker); }); j++; } }); } j = 0; }
- 締切済み
- JavaScript
- 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()"> 中略・・・ 初心者なもので、、、 ご回答お願いいたします。
- ベストアンサー
- JavaScript
- 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("ここが目的地です。"); } } ); } }
- ベストアンサー
- JavaScript
- google mapのピンを変更したい
お店の位置をホームページ上でgoogle mapを使い、お客様にお知らせしたいので、API keyを取得し、位置情報などを入力しているのですが、初期設定の赤いピンマークをお店のオリジナルピンマークに変更したいのですが、方法がわかりません。 書いたコードは… <head> <meta content="text/html; charset=UTF-8" http-equiv="content-type"> <script src="http://maps.google.com/maps?file=api&v=1&key=取得したAPI key" type="text/javascript"></script> </head> <body> <div id="map" style="width: 800px; height: 600px"></div> <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.50537109375,34.687427949314845), 7); // センター 位置 map.centerAndZoom(new GPoint(135.50537109375,34.687427949314845), 7); // お店位置 var point = new GPoint(お店の位置情報); // お店紹介 var html = "<div style='width:350px;font-size:12px;' ><table><tr><td><img src=画像アドレス ></td><td>郵便番号 <br>住所 <br>電話番号<br><br>営業時間<br><br>最寄り駅紹介</td></tr></table></div>"; var marker = createMarker(point,html); map.addOverlay(marker); var marker = createMarker(point,html); map.addOverlay(marker); function createMarker(point,html) { var marker = new GMarker(point); GEvent.addListener(marker, 'click', function() { marker.openInfoWindowHtml(html); }); return marker; } //]]> </script> </body> </html> 以上を入力しました。 この中のどの部分にピン情報を入力すればいいのか？ また、どのように入力すればいいのかを教えていただきたいのです。 ご教授お願いいたします。
- ベストアンサー
- Windows XP
- google maps APIのジオコーディング
google maps APIで2箇所の住所を入力し、ジオコーディングし、マーカーを表示させ、２箇所のマーカーの中間点が画面の中心になるように表示させたいのですが、なかなか地図の中心を移動できません。どのようにすればうまくできるでしょうか？ //HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title> ジオコーディング</title> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> html { height: 100% } body { height: 100%; margin: 0px; padding: 0px } #map_canvas { height: 100% } </style> </head> <body onload="initialize()"> <div> 地点１<input id="start" type="textbox" size="50"><br> 地点２<input id="goal" type="textbox" size="50"> <input type="button" value="地図表示" onclick="codeAddress()"> </div> <div id="map_canvas" style="height:80%"></div> <br>地点１ <div id="geocoder_info" style="height:10%"></div> 地点２ <div id="geocoder_info2" style="height:10%"></div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://maps.google.com/maps/api/js?sensor=false"> </script> <script src="geocode.js"></script> </body> </html> //javascript geocode.js var map; var geocoder; function initialize() { geocoder = new google.maps.Geocoder(); var latlng = new google.maps.LatLng(35.699338,139.705146); var myOptions = { zoom: 12, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP } map = new google.maps.Map($("#map_canvas").get(0), myOptions); } function codeAddress() { var address = document.getElementById("start").value; var info = document.getElementById("geocoder_info"); geocoder.geocode( {'address': address},function(results, status) { info.innerHTML = results[0].formatted_address + "<br>" + results[0].geometry.location; if (status == google.maps.GeocoderStatus.OK) { Slat = results[0].geometry.location.lat(); Slng = results[0].geometry.location.lng(); var marker = new google.maps.Marker({ map: map, position: results[0].geometry.location }); } else { alert("次の理由でジオコーディングに失敗しました: " + status); } }); var address2 = document.getElementById("goal").value; var info2 = document.getElementById("geocoder_info2"); geocoder.geocode( { 'address': address2},function(results2, status2) { info2.innerHTML = results2[0].formatted_address + "<br>" + results2[0].geometry.location; if (status2 == google.maps.GeocoderStatus.OK) { Glat = results2[0].geometry.location.lat(); Glng = results2[0].geometry.location.lng(); var marker2 = new google.maps.Marker({ map: map, position: results2[0].geometry.location }); } else { alert("次の理由でジオコーディングに失敗しました: " + status); } }); latCenter = ((results[0].geometry.location.lat()) + (results2[0].geometry.location.lat()))/2; lngCenter = ((results[0].geometry.location.lng()) + (results2[0].geometry.location.lng()))/2; map.setCenter(latCenter,lngCenter); }
- ベストアンサー
- JavaScript
- GoogleMapのGeocoderがlocalhostで正常に動作しません
今回質問させて頂きたい内容は、GoogleMapAPIのGeocoderについてです。 下記のサイトのプログラムをコピーし「httpd」を使用してlocalhost上（http://localhost/map/search.html）で動作させ検索した所「地名 not found」と表示されてしまいます。 htmlファイルを右クリックし直接IEで起動させると正常に動作するのですが、最終的にはphpで郵便番号から大体の住所を割り出して検索させたい為localhost上で動かしたいのです。 なぜ表示されないのか理由がわからず、ずっと悩んでいます。 なにとぞご教授いただけますよう宜しくお願いいたします。 参考サイト http://www.geekpage.jp/web/google-maps-api/geocoder-0.php ファイル名：search.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"> <head> <title>GClientGeocoderサンプル</title> <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAANpz9YbJ9ituU8znrs9XJRhT9C0HjqPndW8ASVAENg0TnC9eCpxT0fY1KRBtIwNj2R0ym6ijrCZ0FhQ" type="text/javascript" charset="utf-8"></script> </head> <body onload="load()"> <div id="map" style="width:450px; height:400px"></div> <script type="text/javascript"> //<![CDATA[ var map = null; var geocoder = null; // 初期化 // <body onload="load()"> で呼び出されています function load() { if (GBrowserIsCompatible()) { map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(35.67431, 139.69082), 13); // GClientGeocoderを初期化 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> <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> <div id="map" style="width:500px; height:600px"></div> </form> </body> </html>
- ベストアンサー
- JavaScript
- 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>
- ベストアンサー
- JavaScript
