- ベストアンサー
googlemaps api V2からV3への移行
googlemaps api V2 を使ったサイトをいくつか公開しています。 つい最近、googlemaps api V2 のサポートが終了し、 V3への移行が求められていることをつい最近知りました。 2013年にはV2サイトは表示されなくなるようで、 かなりあせっています。 複数のマーカーを地図上に表示させるために jsonファイルを読み込む形にしています。 このサイトを作ったとき、 googlemaps apiの入門サイトなどを参考にして作ったのですが、 V3に移行するために html を どのように修正したらよいかがわかりません。 jsonファイルの書き方も修正が必要かもわかりません。 V3説明サイトを見てソースをまねしたりしたのですが、 うまくできませんでした。 どのようにソースを組めばよいのか、 jsonを使ったV3でのソースを教えていただけると助かります。 なお、上記サイトでのjsonファイル （chikusa.json） のソースです －－－－ここから－－－－－－ { data: [ {lat:35.1638745,lng:136.9252355,html:"<a href='http://www.rr-watanabe.jp/' target='_blank'>料理旅館わたなべ</a>"}, {lat:35.1713848,lng:136.9287544,html:"<a href='http://www.mielparque.jp/nagoya/' target='_blank'>メルパルク名古屋</a>"} ] } －－－－－ここまで－－－－－ よろしくご教示お願いします。
- micro_adventure
- お礼率42% (8/19)
- AJAX
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
＞参考にしたのは下記サイトです それらのサイトは、ほとんどご質問にピッタリのサイトではないでしょうか？ ＞どのようにソースを組めばよいのか、 ＞jsonを使ったV3でのソースを教えていただけると助かります。 漠然とした質問への回答としては、ここの限られた回答欄よりも、参照なさっているサイトのほうがよほど情報量が多いと思います。 問題を切り分けてこの部分が不明とかでしたら、JUSTの回答もつきやすいのではないでしょうか。 とりあえず、ご参照なさっているサイト（どちらでも良いですが）の内容を、そのままご自分の環境で再現してみることをお薦めします。 それで、動かなければ再現できていないわけで、多分、「ソースを教えてください」とは違うところに原因があるのだと推測できます。 再現できたなら、御自分がなさりたいことへと部分部分で変えていってみてください。 どこかで動作しなくなったら、その前に行なった内容がおかしいと考えられます。 参考サイトの内容が、ご質問とほとんど同じと思いますので、変えて行くにしてもそれほど大きな変わり方ではないはず。 地道ですが、確実ではないでしょうか？
その他の回答 (2)
- kosukejlampnet
- ベストアンサー率44% (126/282)
その失敗したHTMLを書いてくれたほうが、説明しやすいです。
お礼
お礼が大幅に遅くなり、申し訳ありません。 当初の質問の際に、自分で使ったV2サイトのＵＲＬを載せたのですが、 「自分のサイトを掲載してはいけない」ということで、 削除されてしまいました。 そのため、質問の仕方が的を得ないような感じになってしまいました。 うまくいかなかったサイトをお知らせできず、 申し訳ありません。
- kosukejlampnet
- ベストアンサー率44% (126/282)
> V3説明サイトを見てソースをまねしたりしたのですが、 > うまくできませんでした。 どのサイトを見てどう分からなかったのかを書かないと、そのサイトと同じような説明をされて結局理解できないのがオチじゃないの？
補足
説明が足らず、すいません。 googlemaps api v3 json で検索してでてきた サイトに載っていたソースを元に htmlファイルとjsonファイルを作ってみましたが うまくいきませんでした 参考にしたのは下記サイトです http://syake-web.com/blog/2011/04/09/js-google-maps-api-v3-4/ http://www.google-mapi.com/googlemaps/foreign-file-json.html
関連するQ&A
- 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 } ]
- ベストアンサー
- JavaScript
- target="_blank"とは何の意味ですか？？
サイトのソースを見ていると、 <a href="URL" target="_blank"> というのをよく見かけます。 このtarget="_blank"というのは知らなかったのですが どういった効果があるのでしょうか？？
- ベストアンサー
- HTML
- 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> といった感じで、呼び出します。 地図移動やマーカー、吹き出しや中の文字列はちゃんと表示されるんですが、幅設定だけができません。
- 締切済み
- JavaScript
- ウィンドウを新しく開いてそのウィンドウをページ替えしたい。
<a href="http://oshiete.goo.ne.jp/" target=_blank>サイト１<a> <a href="http://oshiete.goo.ne.jp/" target=_blank>サイト２<a> <a href="http://oshiete.goo.ne.jp/" target=_blank>サイト３<a> 例えばサイト１をクリックして新しいウィンドウが開いた後、サイト２をクリックした場合また新しくウィンドウが開くのではなく、サイト１が開いたウィンドウに サイト２を表示させたい時はどうしたらいいのですか？
- ベストアンサー
- HTML
- defineの出力先で文字化け
define('○○','<a href="http://www.goo.ne.jp" target="_blank">Goo</a>'); とすると出力先のソースで <a href="http://www.goo.ne.jp" target="_blank">○○</a> となってしまい <a href="http://www.goo.ne.jp" target="_blank">Goo</a> がそのままの形で表示されてしまいます。 どうしてこうなるのでしょうか。
- ベストアンサー
- PHP
- Google static maps api と Google map api
携帯用サイトでGoogle static maps API を使っているのですが， サイト内にテキストフォームを用意して住所を入力すると <img src="http://maps.google.com/staticmap? center=34.6663690,133.918588 ←ここを変更したい &size=250x300 &zoom=13 &maptype=mobile &key=..... > の内容を変更してその住所のマップを再表示するようにしたいと思っています． Google map APIで取得したlat, lngなどの情報を<img>内に反映させることって出来るのでしょうか？
- 締切済み
- その他（プログラミング・開発）
- 特殊なテキストエディタ
<A href="901927192719.jpg" target="_blank"> <A href="901920002719.jpg" target="_blank"> このような<A hrefとblank">の間にはさまれた文字を消すことができるテキストエディタはないんでしょうか？ 少しわかりにくいですね、もうすこし説明すると。 <A href="*****" target="_blank"> *＝ランダムな文字。 <A href="*****" target="_blank"> これを他の文字に置き換えることができるテキストエディタはありませんか？ わかりにくくてすいません、よろしくおねがいします。
- ベストアンサー
- フリーウェア・フリーソフト
- WordpressでリンクAタグに target="_blank"を自動的に付加したい。
WordPress2.8.6を使っています。 HTMLモードの記事の作成でlinkボタンを押すと、Aタグの雛形ができますが、 属性のtarget="_blank"がデフォルトでは付加されません。 恐らく、PHPソースを変更する必要があると思いますが、どこを見ればよいのでしょうか？ ＜a href="http://"＞ ↓ ＜a href="http://" target="_blank"＞
- 締切済み
- ブログ
- json_decode戻り値がどうしてもNULL
json_decodeで戻り値がnullになり、どうも先に進めませんので、どちら様か叱咤・ご教示ください。 google maps api を利用して、住所(本来は日本語文字列住所)からジオコーディングして座標を取得し、google-map 上にプロットするようなロジックを考えておりましたが、住所からの座標変換が出来ずに困っております。 Aの部分はたぶん問題なさそうです。 理由としては、そこにあるURL文字列を直打ちした際にできる jsonファイルを保存し、その中身をみると、希望通りの座標データを含む住所データが格納されていました。 Bの部分でそれを取り出したいのですが、文字化けや妙なエラーになるのならまだしも、何もエラーにならず、しかしながら戻り値が何も入っていないように見受けられます。 このような現象をググったところ、よくありがちな現象ではあるそうですが、UTF8に気をつけなさいとか、UTF8にエンコーディングしなさいとか、DOMがどうだとか、いろいろ試行錯誤しましたが、いずれもNULLで返ってきます。 サーバは外部のレンタルサーバ（firstserver） PHP Version 5.3.19 DSO版 Apache2.2系 と記載がありましたので、その通りだと思われます。 何か根本的に間違っているのでしょうか。 その根本が分かっていないのは自他ともに認めるところではありますが、どちら様か、何かご存知でしたら、是非ご教示くださいませ。 ------ 問題のソース ----- <?php //header("Content-type: text/html; charset=utf-8"); $address = 'tokyo'; //A $geocode=file_get_contents('http://maps.google.com/maps/api/geocode/json?address='.urlencode($address).'&sensor=false'); //B $output= json_decode($geocode); //ここでjson_last_error()を確認したが、ここではエラーは一切出ない if($output==NULL){ print("null<br>"); exit; } $lat = $output->results[0]->geometry->location->lat; $lng = $output->results[0]->geometry->location->lng; echo $lat.','.$lng; ?> ------------ 表示結果 output:[] null 上記URLを直打ちした際に出来たjsonファイル（参考） *********************** { "results" : [ { "address_components" : [ { "long_name" : "東京駅", "short_name" : "東京駅", "types" : [ "train_station", "transit_station", "establishment" ] }, { "long_name" : "東京都", "short_name" : "東京都", "types" : [ "administrative_area_level_1", "political" ] }, { "long_name" : "日本", "short_name" : "JP", "types" : [ "country", "political" ] } ], "formatted_address" : "日本, 東京駅（東京）", "geometry" : { "location" : { "lat" : 35.681382, "lng" : 139.766084 }, "location_type" : "APPROXIMATE", "viewport" : { "northeast" : { "lat" : 35.6827309802915, "lng" : 139.7674329802915 }, "southwest" : { "lat" : 35.6800330197085, "lng" : 139.7647350197085 } } }, "place_id" : "ChIJC3Cf2PuLGGARxuYMi4MlMEQ", "types" : [ "train_station", "transit_station", "establishment" ] } ], "status" : "OK" } ***********************
- ベストアンサー
- PHP
- Google Maps API V3のxml
xmlファイルから読み込んだものを複数カスタムアイコン（情報ウィンドウ付）で表示させたいです。 現在アイコンは読まれずウィンドウも一つの状態です。 xmlからの緯度経度の取得はできるのですが、その他の情報の取得がわかりません。 下記がプログラムソースです。 xmlファイル <?xml version="1.0"?> -<markers> <marker season="" genre="" link="http://www.manyou-kumamoto.jp/castle/" type="culture" lng="130.705841" lat="32.806141" address="熊本県熊本市本丸1-1 " name="熊本城"/> <marker season="" genre="" link="http://www.greenland.co.jp/index2.html" type="reisure" lng="130.464676" lat="32.987690" address="熊本県荒尾市下井手1616" name="三井グリーンランド"/> </markers> javaプログラムソース $(function(){ $.ajax({ url:"map.xml", cache:false, dataType:"xml", success:function(xml){ var data=xmlRequest(xml); initialize(data); } }); }); function xmlRequest(xml){ var data=[]; $(xml).find("markers > marker").each(function(){ var dat={}; dat.lat=this.getAttribute("lat"); dat.lng=this.getAttribute("lng");//この辺の他のノード取得 $(this).children().each(function(){ if(this.childNodes.length>0)dat[this.tagName]=this.childNodes[0].nodeValue; }); data.push(dat); }); return data; } function initialize(data){ var op={ center : new google.maps.LatLng(32.791892438123696,130.704345703125), zoom : 9, mapTypeId : google.maps.MapTypeId.ROADMAP }; var map=new google.maps.Map(document.getElementById("map_canvas"),op); var reisure=new google.maps.MarkerImage( "d_5.ico", new google.maps.Size(48.0,64.0) ); var culture=new google.maps.MarkerImage( "d_6.ico" ); if (data != null) { var i=data.length; } while(i-- >0){ var dat=data[i]; var obj={ position:new google.maps.LatLng(dat.lat,dat.lng), map:map, icon:dat.type //使用の仕方はあってますか？ }; var marker=new google.maps.Marker(obj); var infowindow = new google.maps.InfoWindow({ content:'<a href="dat.link"/>kumamoto</a>' //使用の仕方はあってますか？ }); google.maps.event.addListener(marker, 'click', function() { infowindow.open(map,marker); }); } } google.maps.event.addDomListener(window, "load", intialize); よろしくおねがいします。
- 締切済み
- AJAX
お礼
お礼がとても遅くなり、失礼しました。 NO.2の方へのところでも書きましたが、 自分の作ったサイトをお知らせすることは規約違反ということで できませんでした。 その後、参照サイトの見本ソースを元に V3サイトを作ってみました。 どうやらV2とV3では、仕組みも違うようで、 結局、一から作り直すしかないのだと感じました。 的確なアドバイスをいただき、ありがとうございました。7