- ベストアンサー
Google maps API 吹き出しに画像
下記ページを元に新たにマップを作ろうとしています。 マーカーをクリックした時に現れる“吹き出し”にPicasaの画像をリンクして表示させたくて、試行錯誤しているのですが、上手くいきません。 xmlファイルに吹き出しに表示させるものを追記しないといけないんでしょうか? よろしくお願い致します。 http://japonyol.net/editor/ds/yokohama-bousai.html
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
XMLを使って情報ウィンドウに写真を表示するサンプルを作ってみました。 http://googlemaps.googlermania.com/okwave/q7613750.html サイドバーの作り方はこちらのページにあります。 http://googlemaps.googlermania.com/google_maps_api_v3/ja/map_example_sidebar.html このあたりを参考にどうぞ。
その他の回答 (1)
- fujillin
- ベストアンサー率61% (1594/2576)
＞試行錯誤しているのですが、上手くいきません。 試行錯誤なさるよりも、説明書を読んだ方が面倒くさそうに思えても結局のところ近道ではないかと… https://sites.google.com/site/gmapsapi3/ InfoWindowに表示される内容は、スクリプトから定義しておけばよいようです。 HTMLでも文字列でも良いとなっているみたい。 https://developers.google.com/maps/documentation/javascript/reference?hl=ja#InfoWindowOptions 単純な表示例（ソースを見てください） https://google-developers.appspot.com/maps/documentation/javascript/examples/infowindow-simple?hl=ja （画像はありませんが、リンクがリンクタグで書かれています） こちらは画像とリンクが記述されている例 http://gmaps-samples-v3.googlecode.com/svn/trunk/smartinfowindow/smartinfowindow.html （全体の内容はかなり複雑みたいですが、data.jsに各位置情報などがリストされています。）
お礼
ご回答ありがとうございます。 参考になりました。m(_ _)m
関連するQ&A
- グーグルマップの吹出しは複数可能？
グーグルマップを自分のサイトに設置しようとしています。 マーカーをクリックすると吹き出しが出ますが 他のマーカーをクリックすると吹出しが消えて２つ表示ができません。 吹出しでなくてもいいのですが 吹出し見たいのを複数常時表示することはできますか？ お忙しいところ是非教えていただければと思います。 よろしくお願いします。
- 締切済み
- HTML
- Google Maps API V3
Google Maps API V3 でXMLのデータがかなり多いので XMLから取り出すデータをgoogleマップで表示するデータのみ 取り出してマーカを表示したい場合どのようにすればいいのでしょうか
- ベストアンサー
- AJAX
- グーグルマップAPIで右クリックで吹き出し
お世話になっております。 グーグルマップAPIを使ってサイトを作成しています。 右クリックをして、吹き出しを出すにはどうしたらよろしいでしょうか？ 以下のようなスクリプトがあるのですが、全く反応しません。 google.maps.event.addListener(map, "rightclick", function() { infowindow.setContent(contentString); infowindow.open(map,marker); document.getElementById("result").innerHTML += "<br>rightclickイベント発生："+(new Date()); 上記ではなく、rightclickの部分をclickにすると動きますが、右クリックで動作させたいのです。 できれば、その吹き出しの中にフォームを作りたいと思っています。 よろしくお願い致します。
- 締切済み
- JavaScript
- [Google Maps API] 複数のマーカーをおく場合
こんにちは。Google Maps APIでわからないことがあるので相談させてください。 一つの地図に複数のマーカーをおこうと思っています。(仮にA,B,C,Dのポイントとします。)各ポイントにはGEventを使って、クリックすると違う内容の吹き出しを表示させます。 A.htmlというファイルでは４地点が入って中心にAがあるように、B.htmlというファイルでは４地点が入って中心にBがあるように、mapを表示させたいのです。 なので吹き出しを表示させるためのscriptは外部ファイルにして共有、座標の中心を決めるためのscriptは各htmlファイルに設定したいと思うのですが、scriptを分けると地図が表示できなくなってしまいました。 (分けなければ外部にしてもしなくても表示できます) A,B,C,Dという地点はこれからも増える可能性があるため、できれば１つのファイルを共有したいのですが、いい方法があれば教えてください。よろしくお願いします。
- 締切済み
- その他（プログラミング・開発）
- Google maps api v3
https://developers.google.com/maps/articles/phpsqlajax_v3?hl=ja を参考にコーディングし、いろいろなサイトも調べてながら（手探り）ですが、どうしてもうまく表示されません。 【maps.php】にてxmlデータを生成しました。それを使ってサイトに表示させるというものです。 うまく表示されないというか、画面が真っ白になってしまいます。 アドバイス等ご教示頂ければ幸甚です。 【index.html】 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Maps</title> <script src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/jacascript"> //<![CDATA[ function load() { var map = new google.maps.Map(document.getElementById("map"), { center: new google.maps.LatLng(35.66, 139.69), zoom: 13, mapTypeId: 'roadmap' }); var infoWindow = new google.maps.InfoWindow; // Change this depending on the name of your PHP file downloadUrl("maps.php", function(data) { var xml = parseXml(data); var markers = xml.documentElement.getElementsByTagName("marker"); for (var i = 0; i < markers.length; i++) { var name = markers[[]i].getAttribute("name"); var address = markers[[]i].getAttribute("address"); var tel = markers[[]i].getAttribute("tel"); var email = markers[[]i].getAttribute("email"); var message = markers[[]i].getAttribute("message"); var point = new google.maps.LatLng( parseFloat(markers[[]i].getAttribute("lat")), parseFloat(markers[[]i].getAttribute("lng"))); var html = "" + name + " " + address; var icon = customIcons[[]type] || {}; var marker = new google.maps.Marker({ map: map, position: point, icon: icon.icon, shadow: icon.shadow }); 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); }); } function downloadUrl(url, callback) { var request = window.ActiveXObject ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest; request.onreadystatechange = function() { if (request.readyState == 4) { request.onreadystatechange = doNothing; callback(request.responseText, request.status); } }; request.open('GET', url, true); request.send(null); } function parseXml(str) { if (window.ActiveXObject) { var doc = new ActiveXObject('Microsoft.XMLDOM'); doc.loadXML(str); return doc; } else if (window.DOMParser) { return (new DOMParser).parseFromString(str, 'text/xml'); } } function doNothing() {} //]]> </script> </head> <body onload="load()"> <div id="map" style="width: 500px; height: 300px"></div> </body> </html>
- ベストアンサー
- JavaScript
- 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
- google maps APIv3で出来ますか？
今、googlemapAPIv3を使ってマップを作っているのですが「コレ」ができるのか探していますが、なかなか見つかりません。 例えば外部ページにURLアドレスがを貼っていて、そのリンクをクリックすると、 APIv3で制作した地図のあるページへ飛び、マーカーと情報ウィンドウを表示させる方法です。 要するに、飲食店一覧表があり（地図はこちら）を押すとページジャンプして表示させたいと考えています。 無理そうでしたら諦めますが、可能なのでしょうか。 可能でしたらヒントだけでも頂けたらと思います。 よろしくお願い致します。
- ベストアンサー
- JavaScript
- Google Maps API で 住所データを渡してその場所の地図を表示させたい
Google マップでは検索ボックスに住所を入れ「検索」ボタンをクリックするとその場所が表示されます。 http://www.google.co.jp/maphp?hl=ja&tab=wl&q= このようなことを、Google Maps APIを用いて自分のサイトで行いたいと思っています。 いろいろなサイトを調べているのですが、マーカーや吹き出しをつけることはできても、入力された住所で地図の表示位置を変えることがわかりません。 はてなマップはGoogle Maps APIを使用しているとのこと、こちらのサイトでも検索ボックスに住所を入力したら地図の表示が変わるので、APIを用いてもできるのかと予想はしているのですが、実際の方法がわかりません。 http://map.hatena.ne.jp/ クラス名やヒントとなるキーワードだけでも結構ですので教えて頂ければと思います。 宜しくお願いします。
- ベストアンサー
- その他（プログラミング・開発）
- グーグルマップのマーカー
グーグルマップに表示されたマーカーをクリックすると 吹き出しとか関係なくそのマーカーのもっている座標点に 地図の中心が移動するようにしたいのですが どのように記述するのでしょうか？
- 締切済み
- その他（プログラミング・開発）
- GoogleMapにカラーマーカーと吹き出し
GoogleMapにそれぞれのポイントに色んな色のカラーマーカーと吹き出しをいれたいのですが 吹き出しを表示させる方法はなんとかなったのですが 現在のHTMLに上手くマーカーに色を設定できません。 現在のmapが下記URLになります。こちらのどこに書き込めば反映されるのかどうかご教授よろしくお願いいたします。 http://www.royal-resort.co.jp/hakone/g_map/test_map.html
- ベストアンサー
- HTML
お礼
ご回答ありがとうございます。 サンプルを作って頂くと本当に助かります。 サイドバーの作り方で、駅を増やす時（神戸駅、姫路駅…など）の処理は、htmlに同様に追加すれば良いと思い、やってみたのですが、画面が真っ白になってしまいました。 他にもファイル（or記述）が必要なんでしょうか?
補足
↓自己解決しました。m(_ _)m