GoogleMap 住所から座標の取得

このQ&Aのポイント
  • GoogleMapを使用して住所から座標を取得する方法について解説します。
  • マーカーを設置し、情報ウィンドウを設定したい場合に、順番通りに動かない問題が発生する場合があります。
  • 原因はclientGeocoder.getLatLngの処理にあると考えられます。どのようにすれば順番通りに動かすことができるでしょうか。
回答を見る
  • ベストアンサー

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);}); }

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

  • ベストアンサー
  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.4

こうすればうまくいきますね。↓サンプルです。応用してね、、 ※全角空白は半角空白にしてね... <div id="map" style="width:800px;height:600px;border:2px solid black;"></div> <script type="text/javascript"> var map; window.onload = function () {   if (GBrowserIsCompatible()) {    map = new GMap2(document.getElementById("map"));    map.setCenter(new GLatLng(35.83050952932199,139.7885262966156), 12);    map.addControl(new GMapTypeControl());   var custom_map = new GMapType([G_PHYSICAL_MAP.getTileLayers()[0],                G_HYBRID_MAP.getTileLayers()[1]],                G_NORMAL_MAP.getProjection(),               "地図+地形");    map.addMapType(custom_map);    map.addControl(new GLargeMapControl());    map.addControl(new GScaleControl(),new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(10,15)));    new GKeyboardHandler(map);    hoge();   } } function hoge(){  var clientGeocoder = new GClientGeocoder();  var point = ["埼玉県大宮市","埼玉県所沢市","埼玉県春日部市"];  var shopName = ["大宮店","所沢店","春日部店"];  var address = [];  var tel = ["110","119","105"];  for (var i = 0; i < point.length; i++) {   address[i] = point[i];   clientGeocoder.getLatLng(point[i],(function(shopName,tel,address){    return function(point){    map.setCenter(point,8);    var marker = new GMarker(point);    map.addOverlay(marker);    GEvent.addListener(marker,"click",function(){     marker.openInfoWindowHtml("店名:"+shopName+"<br/>住所:"+address+"<br/>TEL:"+tel);    });    }   })(shopName[i],tel[i],address[i]));  } } </script>

standingover
質問者

お礼

回答が遅れました、申し訳ありません ご提示いただいたソースを参考にしたところ、無事実装が完了しました ありがとうございます

その他の回答 (3)

  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.3

情報ウインドウの内容が全て同じになってしまいます =>全容が見えないので、function changeFont()がどのタイミングで実行されるのか わからないので、あえて書きませんでしたが、提示されてる分のロジックは何か不足 してます。 var point = document.getElementById('{!$Component.top.ad}').value.split(','); point配列にはそれぞれの住所が入るんですよね。 var shopName; var address; var tel;  これらも、pointの要素に、対応する変数をどこかでセットしてるんですか? さもなきゃ一緒になるのは当然です。 セットしてたとしても、コールバック関数には直接渡せないんで、クロージャ みたいにすれば出来そう(検証してみます)ですが、 最初に書いたようにGClientGeocoder.getLatLng()はループ処理にはむいてません。 HTTPジオコーダー(RESTインターフェース:GET送信)を使った方がよいんですけど、javascriptからだと、クロスドメインアクセスの問題を解決する必要があります。  ジオコーディングサービスはGoogleMapsAPI以外だと、YahooMapAPIが代表選手で、 http://developer.yahoo.co.jp/webapi/map/openlocalplatform/v1/geocoder.html  他に http://newspat.csis.u-tokyo.ac.jp/geocode/ もあります。

standingover
質問者

お礼

>対応する変数をどこかでセットしてるんですか ↓ループ内でセットしています shopNameなどはテスト中の為コメントアウトしています address = point[i]; >コールバック関数には直接渡せないんで shoMapのことですよね?メンバ変数でも渡せないんでしょうか(引数でってことですかね?) >最初に書いたようにGClientGeocoder.getLatLng()はループ処理にはむいてません。 HTTPジオコーダーだと制限はないんでしょうか? 補足ですがこのシステムが動作しているサーバーで、リクエスト数(?)を制限しているようです yahooAPI等に連続で投げると10数回程度でエラーを確認しました >http://newspat.csis.u-tokyo.ac.jp/geocode/ こちらのサイトに関しては使い方がよくわかりませんでした 一括変換出来れば非常に楽なんですけどね

  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.2

もう一点、気がついた点 ご提示のコードのように、ループ処理で連続して、 GClientGeocoder()を使うと、かなりの確立で失敗します。 2秒~3秒のインターバルで使うと、確実です。 (確か1日当たり数千件しか許されてなかったようです。) (※有償サービスのAPIは大丈夫みたいです) 連続してジオコーディングすると、  ステータスコード:620 G_GEO_TOO_MANY_QUERIES が返され、pointはnullになります。検索不能の場合もふまえ このへんのハンドリングも必要です。

standingover
質問者

お礼

>1日当たり数千件しか許されてなかったようです それは知りませんでした しかし今回のコレに関しては個人的なものですので問題ないと思います(公開予定もありません) 仮に公開する場合は有償APIというものを使用することになると思います GClientGeocoder()などを使用せずに緯度経度を出せればよいんですが、Webサービスを使わない限り難しいと思いますし

  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.1

 clientGeocoder.getLatLng(point[i], shoMap); の結果(shopMapの実行)は非同期にレスポンスされます。  場所によって、検索結果を返す時間がことなるので当然です。 どうしても、順番にやりたかったら、一工夫する必要がありますが、 何故、順番にやる必要があるんでしょうか?

standingover
質問者

お礼

成程、こう書くと非同期になるんですね >何故、順番にやる必要があるんでしょうか? 現状住所から座標を出して複数マーカーを設置したまでは良かったんですが 情報ウインドウの内容が全て同じになってしまいます ですのでalertの順番通り動かせれば解決するものと考えていました

関連するQ&A

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

    GoogleMaps API素人ですが・・・ 最近いろいろやっていてやっとDBの住所(日本語の住所 例:大阪府大阪市中央区平野町1丁目)を引っ張ってきてグーグルマップで座標を取得してピンを立てることに成功しました。 今苦戦しているのは同じ地図上に複数のピンをさす方法です。 どなかた教えていただけないでしょうか? ちなみに今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>

  • GoogleMapについて

    GoogleMapのジオコーディングを行っています。 下記のコードを記載しているのですが、 検索時にインターネットが重いとpointに値が入らず 入力した住所が見つかりません。のアラートが出てしまいます。 おそらくタイムアウトしているのかな?と思うのですが知っている方いましたらご教授お願いします。 住所自体は存在している住所で、ネットが重くなければ問題なく地図は 表示されます。 geocoder.getLatLng( address, function(point) { if (!point) { alert("入力した住所が見つかりません。"); } else { map.clearOverlays(); map.setCenter(point, 15); } } );

  • 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; 20回ループ 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 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>

  • 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でxmlから10件のみ情報取得

    今、googlemapで、xmlに書き出されたデータをjavascriptで呼び出し、地図外に一覧を表示させています。 現在のスクリプトでは、xmlデータ全件取得されています。 マップ上のポイントは前件表示、一覧表示部分のみ10件のみ表示に変更させる場合の書き方がわかりません。 初心者なりに、色々とやってみたのですが、うまくいかず。。。 ご指導いただけると助かります。 ****************************************** <script type="text/javascript"> var map; function load() { if (GBrowserIsCompatible()) { map = new GMap2(document.getElementById('map')); ・・・ } GDownloadUrl('http://○○.jp/map.xml', function(data) { var xml = GXml.parse(data); var markers = xml.documentElement.getElementsByTagName('marker'); var shopList = document.getElementById('map_text'); ・・・ for (var i = 0; i < markers.length; i++) { var shop = markers[i].getAttribute('shop'); var text = markers[i].getAttribute('text'); ・・・ var marker = createMarker(point, shop, text, n, imgurl, linkurl, category, shopurl); var sidebarEntry = createSidebarEntry(marker,shop, text); map.addOverlay(marker); shopList.appendChild(sidebarEntry); } }); } function createMarker(point, shop, text, n, imgurl, linkurl, category, shopurl) { ・・・ } function createSidebarEntry(marker, shop, text) { var shopList = document.createElement('div'); shopList.id = "map_text"; var maplist =shop + '<br/>' + text;  ←※ここで呼び出される情報を10件に限定したい shopList.innerHTML = maplist; GEvent.addDomListener(shopList, 'click', function() { GEvent.trigger(marker, 'click'); }); return shopList; } </script> ******************************************

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

    お世話になります。 DBに登録したマーカーデータを取り出して グーグルマップに表示するツールを作ったのですが、 マーカーをクリックしてインフォメーションウィンドウを表示すると 「吹き出し」の形が切れ目が入ったように崩れてしまいます。 またそこには取り出したデータを表示もするのですが、 ドラッグして反転させないと見えない状態です。(単に文字色が白?) 以下がプログラムの内容になりますが、何かわかることがありましたらご指摘願えないでしょうか? よろしくお願い致します。 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);

  • 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で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&amp;v=2&amp;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("ここが目的地です。"); } } ); } }

  • GoogleMapsAPIv3でXMLを取得(3)

    お世話になっております。 何度か質問しているのですが、新たに質問したいことがあります。 現在以下の様な形で、GoogleMapsAPIを使ってXMLデータを取得し、表示させています。  function initialize() { var myLatlng = new google.maps.LatLng(16.636192,158.9062); var myOptions = { zoom: 1, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP } map = new google.maps.Map(document.getElementById("map_canvas"),myOptions); var infowindow = new google.maps.InfoWindow; downloadUrl("xml/allplaces.xml", function(data) { var markers = data.documentElement.getElementsByTagName("marker"); for (var i = 0; i < markers.length; i++) { var name = markers[i].getAttribute("name"); var point = new google.maps.LatLng( parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng"))); var linkurl = markers[i].getAttribute("linkurl"); var html = '<div style="height: 150px; width: 200px"><b>'+name+'</b><br />'+linkurl+'</b>'; var marker = new google.maps.Marker({ map: map, position: point, title: name }); bindInfoWindow(marker, map, infoWindow, html); } }); } function bindInfoWindow(marker, map, infoWindow, html) { google.maps.event.addListener(marker, 'click', function() { infoWindow.setContent(html); infoWindow.open(map, marker); }); } 10行目の downloadUrl("xml/allplaces.xml", function(data) { の部分でXMLを指定していますが、これをHTML上の <input type="button" id="btn" value="" onClick="" /> といった、ボタンファンクションで、異なるXMLを指定したいです。 つまり、クリックすると出ているマーカーは消えて、ほかのマーカーが出るようにしたいです。 分かる方いらっしゃいましたら、どうぞよろしくお願い致します。

専門家に質問してみよう