GoogleMapApiのカスタマイズについて

前へ 次へ
このQ&Aのポイント
  • GoogleMapをサイトで利用するために、カスタマイズを考えています。
  • 現在、XMLを利用してマーカーを表示させることはできていますが、マーカーの情報をサイドバーに表示させる方法を知りたいです。
  • サイドバーには実際に目で見えているマーカーの情報のみを表示させたいです。
回答を見る
  • ベストアンサー

GoogleMapApi GoogleMap のカスタマイズについて。現在見えているマーカーの情報のみをサイドバーに表示したい。

GoogleMapをサイトで利用を考えています。 現在、XMLを利用して、マーカーをGMap上へ表示させることまではできました。 http://www.i-ll.jp/test/map/xml.html コードはソースを参照をお願いします。 ここからカスタマイズについてなのですが 現在はマーカーの情報をすべてサイドバーに表示してあります。 これを、マーカーが実際に目で見えている情報のみをサイドバーに表示させたい場合 どうしたらよいのでしょうか？（添付画像参照） スクロールするたびに情報が変化します。 参考サイト 川越なう：http://kawagoe-now.jp/ 初めて、GoogleMapをカスタマイズしていて、不慣れな部分も多いのですが よろしくお願いいたします。

画像を拡大する

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

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

No.1です。 ＜同じ住所のデータが複数ある場合複合マーカーを作ることは可能でしょうか？＞ ＝＞「近い住所のデータが複数ある場合、低縮尺の地図だといくつも重なっ て表示されるため、一つにまとめる。」という要望ですね。 件の「KsgmapAPI」だと、Z-マーキング機能で提供されているやつですね。 これを、基のGoogleMapAPIでやる事は当然可能です。 GMarkerManagerクラス又は、MarkerManagerクラスを利用します。 http://code.google.com/intl/ja/apis/maps/documentation/reference.html#GMarkerManager http://gmaps-utility-library-dev.googlecode.com/svn/tags/markermanager/1.1/docs/ これは、複数のマーカーをグループ化して登録し、地図のズームレベル に応じて、表示・非表示を制御してくれる機能です。 ちょっと応用編的なスキルが必用です。 GoogleMapAPI初めてなら、基本的な機能（地図の表示、マーカーや情報窓 の作成、イベント処理、XMLデータの利用）等を簡単な例から、マスターし ていき、理解できて、習熟してから、複合的な高度な技に挑戦した方が よいでしょう。 GoogleMapAPI系の質問等は、下記参考サイトのフォーラムに日本語情報が たくさんあります。また初心者向けの解説ページもいくつかあるので 挙げておきます。 http://googlemaps.googlermania.com/ http://www.ajaxtower.jp/googlemaps/ http://www.geekpage.jp/web/google-maps-api/

参考URL：
http://groups.google.com/group/Google-Maps-API-Japan/topics?hl=ja
aruko_tera
質問者

お礼

本当に何度もありがとうございます。 これから、ちょっとずつ実装できるよう頑張ってみます。 本当に本当にありがとうございました。

その他の回答 (2)

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

No1です。 訂正します。くGoogle Static MAP API＞じゃないです。 Ksgmap1101wc.jsが上にありましたね。中身をよく見てみました。 これは、GoogleMapAPIをクラス拡張して付加機能を充実させた独自の APIですね。しかもスタティックマップリンク生成機能やXML解析機能 まで持ってます。 ざっとみたところかなり高機能なので、ご希望の事が 実現できると思います。 KsgmapAPIのドキュメントやリファレンスがあるサイトを見つけました。 http://www.ksgmap.jp/about/index.html これの改造、機能追加には、かなりjavascriptの経験が必要です。 特にオブジェクト指向プログラミングになれないとつらいです。 初心者は、本家のGoogleMapAPIで、練習した方がよろしかろうと思います。

aruko_tera
質問者

お礼

何度もありがとうございます。 何度かソースをみましたが、やはり出来上がっているのを更に改造は厳しいと感じました。 やりたいことはハッキリしているので 1から組み立てたいと思います。 そこで甘えてばかりで申し訳ないのですが 同じ住所のデータが複数ある場合複合マーカーを作ることは可能でしょうか？ 現在のテストサンプルのKsGMapは勝手になるのですが、これを自作するためのヒントがあれば教えて下さい。 本当にありがとうございます。 おかげで前進出来そうです。

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

簡単にできるかなと思ったんですが、ご提示のソースを見ると GoogleMapAPIはAPIでも[Google Static MAP API]の方ですね。 （ちがいますか？） 残念。Static MAPの方は、パラメーターを指定して地図やマーカー 等を配置する機能に重点がおかれていて、javascriptから動的に制御したり、情報を取得する機能が提供されていません。 通常のGoogleMapAPIの方が、カストマイズ性がはるかに高いです。 GoogleMapAPIの方だと、 表示されている地図(Gmapオブジェ)の移動時のイベントハンドラー関数の 登録機能がありますから、その関数の中で 表示されている地図の範囲(GBoundsオブジェ)を生成・取得して、 全てのマーカー(GMarkerオブジェ)のピクセル位置(GPoint)が、範囲に 含まれているかどうかをGBoundsのcontainsPoint()メソッドで調べ、 真・偽によって、そのGMarkerオブジェにひも付けたDOM要素(<LI>)の style属性(display)を切り替えればよろしいでしょう。

参考URL：
http://code.google.com/intl/ja/apis/maps/
aruko_tera
質問者

お礼

早速のご返答ありがとうございます。 ただ、読んだだけではうまく理解できず。。。 いろいろなサイトを見ながら、マネしただけなので 詳しいことはわからないのですが、おそらくGoogle Static MAP APIであっていると思います。 KsGmapというものも使ってみたのですが、 同様に見えている部分だけを出す。 また、XMLを分割するということがうまく出来ないようだったので 足踏み状態です。 なんとか勉強します。 本当にありがとうございました。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • サイドバー付きでGoogleMapを表示させるものを、色々参考にしなが

    サイドバー付きでGoogleMapを表示させるものを、色々参考にしながら作成しています。 【動作サンプル】 http://6pesos.googlecode.com/svn/trunk/xml.html ↑このサンプルのようにxmlファイルを読み込む形をとりたいのですが、 【A.xml】 <markers> <marker lat='xxx' lng='xxx' html='テスト' label='１'/> </markers> だと、きちんと表示できるのですが、 【B.xml】 <markers> <marker> <lat>xxx</lat> <lng>xxx</lng> <html>テスト</html> <label>１</label> </marker> </markers> だと、表示できず「documentElement は Null またはオブジェクトではありません」というエラーが出ます。 スクリプトの中身をいじってみたのですが、お手上げです。 ■【B.xml】の書き方のXMLを読み込めるようにJavaScriptの中身を改変 ■【A.xml】をエクセルのようなセル形式で編集する方法・ツール（もしくはエクセルでの編集・保存方法） ※Excel2003で「xmlリストとして開く」→「ファイル種類：XMLデータで保存」→「ワークシートの機能が失われる…と警告」→続行で保存→ブラウザで表示させると「引数の数が一致していません。または不正なプロパティを指定しています。」とエラーになります…。 どちらか分かる方いらっしゃいましたら、ご教授いただけないでしょうか。 よろしくお願い致します。

  • 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 のマーカーに数値を表示したい

    GoogleMap のマーカーに数値を表示したいと考えております。 (通常のマーカーは黒い丸が真ん中にある代わりに、 数値を表示できればと思っています。) ネットで調べてみたのですが、適切な情報にたどり着けませんでした。 どなたかお助けいただけないでしょうか。 どうぞ宜しくお願い致します。

  • GoogleMapの情報ウィンドウの動的表示

    C#、asp.netで開発しています。 ＤＢから持ってきた情報をGoogleMapの情報ウィンドウに記載したいです。 マーカーがつく場所は動的に変わるため、xmlファイルに出力したのちに表示しようと考えています。 http://mspec.jp/blog/archives/67 こちらのサイトを参考に、javascriptを書いたのですが、setPointMarker()からMarkerSet(lat,lng,text)へ動作しません。 setPointMarkerの「$.ajax({」の部分が動作していないように感じています。 ajaxは特別な記述がないと動かないものでしょうか。 aspxファイルにjqueryを読み込むタグは記載しているのですが、それだけではajaxは動かないのでしょうか。 上記サイトでも、特別ajaxの何かのファイルを読み込んでいる記述が見当たらなかったため、困っています。 api V3からはxmlを読み込むタグがなくなったそうなので、 どのようにして読み込めばいいのかわからず途方に暮れています。 もし、動的なものを出力するのにxml以外で何かいい方法があればそちらも検討します。 どなたかアドバイスお願いいたします。

  • XMLデータを読み込んでGoogleMapに表示し、以下のような感じで

    XMLデータを読み込んでGoogleMapに表示し、以下のような感じでカテゴリわけして、サイドバーに表示させたいと考えています。 ↓サイドバー↓ -------------- ○○市 aaaaa △△市 bbbbb ccccc -------------- マップはこちらのものを参考にして作成しています。 http://japonyol.net/editor/xml.html このXMLに「category」という項目を増やして、それをサイドバーに反映させたいのですが、方法が分からず困っています。 XMLを <markers> <marker lat="xxxxx" lng="xxxxx" name="aaaaa" category="○○市"> <marker lat="xxxxx" lng="xxxxx" name="bbbbb" category="△△市"> <marker lat="xxxxx" lng="xxxxx" name="ccccc" category="△△市"> </markers> として、新しい「市」はXML上で増やすと、新しいカテゴリとして反映されるようにしたいのです。 分かる方いらっしゃいましたら、ご教授いただけませんでしょうか。 もしくは、参考サイトでもかまいませんので、よろしくお願い致します。

  • 【助けてください】HPにリンクさせたGoogleMapの表示のカスタマイズ

    こんばんは。 とある企業のお店の地図を、その企業のサイトにGoogleMapでリンクさせ 表示することになりました。 http://wom-beauty.com/esute+index.page+article+storyid+195.htm このページ下部のような表示をしたいのですが、 どうしたら良いでしょうか。 特に ・大きさはこちらで指定 ・マーカー表示は常に中央 ・吹き出しを常に表示 上記を知りたいです。 マイマップを作成しそれをリンクさせカスタマイズ・・・?と思ったのですがカスタマイズできるのは大きさのみのようで どうしたらいいでしょうか。 ずっと調べているのにわからなくて自分のバカさ加減にあきれ・・・ ホントに困っています（＞＜） よろしくお願いいたします。

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

    • ベストアンサー
    • MySQL
  • 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&amp;v=2&amp;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> どなたかご教授くださると助かります。 宜しくお願いいたします。

  • 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」というエラーが表示されてしまいます。 アイコン画像を変更したマーカーでは情報ウインドウは表示できないのでしょうか？

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する