Leafletで番号付マーカーを設定
- Leafletを使用してマップに番号付きのマーカーを設定する方法について調べています。
- CSSクラスとマーカーの作成方法を参考にして、マーカーに静的な値を表示することはできるが、動的な値を表示する方法がわかりません。
- また、配列を使用して複数のマーカーを設定しているが、特定の番号のマーカーを表示する方法もわかりません。
- ベストアンサー
Leafletで番号付マーカーを設定
現在Windows10の環境でhtml、JavaScript、Leaflet全て初心者ですが、勉強がてらLeafletを使いマップを表示に挑戦しております。番号付マーカーを設定できないか思い下記のサイトを参考にしています。 https://dotscrapbook.wordpress.com/2014/11/28/simple-numbered-markers-with-Leaflet-js/ google翻訳で 次のようなCSSクラスを作成します。明らかに画像のパス/名前とフォントの色を置き換えます： .number-icon { background-image: url("images/number-marker-icon.png"); text-align:center; color:White; } 次に、マーカーを作成するときに、このコードを追加して、「html」パラメーターに数値を入力する必要があります。 var numberIcon = L.divIcon({ className: "number-icon", iconSize: [25, 41], iconAnchor: [10, 44], popupAnchor: [3, -40], html: variable_containing_the_number }); var marker = new L.marker([lat, long], { icon: numberIcon }); とあり「html:1」とか「html:"A"」のような静的値の場合までは出来るのですが、マーカーを増やした場合に増分する変数のような動的値の場合も出来るとありますがどのようにすれば良いのかご教授お願いします。 他に配列を利用して複数マーカーを設定しているのですが配列に任意の番号を組み入れた場合、その番号で表示できないかどうかもお願いいたします。
- turu575
- お礼率76% (71/93)
- JavaScript
- 回答数5
- ありがとう数5
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
No.4のお礼コメントに対して回答します。 https://leafletjs.com/reference-1.6.0.html#diviconで、"Inherits from Icon but ignores the iconUrl and shadow options."とあり、divIconはiconUrlを継承しないことを見落としていました。。 よって、classNameでクラス指定してCSSで背景画像としてアイコンを表示するのが簡潔です。 【CSS】 .my-custom-marker{ background: url('images/my-icon.png'); background-repeat: no-repeat; } 【JS】 L.marker( mk.pos, { icon: L.divIcon({ className: 'my-custom-marker', iconSize: [25, 44], // アイコンサイズ iconAnchor: [10, 43], popupAnchor: [3, -45], html: mk.id }), title: mk.pos } ).bindPopup(popup).addTo(map);
その他の回答 (4)
- Proof4
- ベストアンサー率78% (151/192)
No.3のお礼コメントに対して回答します まず、L.iconメソッド(https://leafletjs.com/reference-1.6.0.html#icon)はhtmlオプションを持たないのでNo.1やNo.2と同様にdivIconメソッドを利用します。 そのうえで、for文の内部でL.markerのオプションとしてアイコンを生成します。 下記のような実装になります。 <script> //マーカーに表示したい対象の緯度経度とポップアップする名称を設定 var markerList = [ { pos: [35.021374099999996,135.75594859999998],name:"京都府庁<br/>京都市上京区薮之内町",id:"26"}, { pos: [33.8416231,132.765729],name:"愛媛県庁<br/>松山市一番町4-4-2",id:"38"}, { pos: [51.5033635,-0.12762479999999998],name:"ダウニング街10番地<br/>10 Downing St, Westminster, London SW1A 2AA イギリス",id:"61"}, ]; function init() { var map = L.map('map'); L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' }).addTo(map); //マーカー全体が入るボックスを作る var bound = L.latLngBounds(markerList[0].pos, markerList[0].pos); //markerListの設定でマーカーを追加 for (var num in markerList) { var mk = markerList[num]; var popup = L.popup().setContent(mk.name); L.marker( mk.pos, { icon: L.divIcon({ iconUrl: 'images/my-icon.png', iconSize: [25, 44], // アイコンサイズ iconAnchor: [10, 43], popupAnchor: [3, -45], html: mk.id }), title: mk.pos } ).bindPopup(popup).addTo(map); //マーカー全体が入るボックスを広げる bound.extend(mk.pos); } //マーカー全体が入るように地図範囲を設定する map.fitBounds(bound); } </script> ※OKWAVEの仕様上、ソースコードのインデントを全角スペースで表現しています。コピペの際はご注意ください。
お礼
度々のご回答有り難うございます。下記のようにコードを書き換えたところ mk.pos, { icon: L.divIcon({ iconUrl:'images/my-icon.png', iconSize: [25, 44], // アイコンサイズ iconAnchor: [10, 43], popupAnchor: [3, -45], html: mk.id }), title: mk.pos } ).bindPopup(popup).addTo(map); 確かにidがマーカー部に表示されるのですがマーカーの呼び出しがなされず白角のマーカーとなりました。for内にurlの設定をすることに問題があると思いますがよく分かりません。ご面倒でも再度ご教授願います。
- Proof4
- ベストアンサー率78% (151/192)
No.2のお礼コメントに対して回答します。 L.markerメソッドはドキュメントにあるとおり、引数を最大でも2つしかとりません(https://leafletjs.com/reference-1.6.0.html#marker)。 よって、No.1で示したコードのaddDivIcon関数のconst markerの部分を下記のように書き換える必要があります。 const marker = new L.marker( LatLng, { icon: numberIcon, draggable: true, title: "Resource location", alt: "Resource Location", riseOnHover: true } ).addTo(map); ※OKWAVEの仕様上、ソースコードのインデントを全角スペースで表現しています。コピペの際はご注意ください。
お礼
再々の回答有難うございます。 const marker = new L.marker( LatLng,{icon: numberIcon,draggable: true,title: "Resource location",alt: "Resource Location",riseOnHover: true}).addTo(map); で追加マーカーのドラッグが出来るようになりました。Leafletの公式サイトのチュートリアルをしっかり読み込めば良いのですが。他人にはマニュアルが基本だなど常に言っている割りに、英語が苦手を言い訳にして怠っていた自分が情けないです。 ついでと言ってとはは誠に申し訳ありませんが 配列からマーカーhtmlに任意の数字を配置する方法の実装もお願いいたします。 例えば別途マーカーで置き換えている場合、idをマーカーのhtnlに入れるfor文ついてお願いいたします。マーカーの呼び出しは前回の質問にあるCSSどちらでも構いません。 <script> var myIcon = L.icon({ iconUrl: 'images/my-icon.png', iconSize: [25, 44], // アイコンサイズ iconAnchor: [10, 43], popupAnchor: [3, -45] }); //マーカーに表示したい対象の緯度経度とポップアップする名称を設定 var markerList = [ { pos: [35.021374099999996,135.75594859999998],name:"京都府庁<br/>京都市上京区薮之内町",id:"26"}, { pos: [33.8416231,132.765729],name:"愛媛県庁<br/>松山市一番町4-4-2",id:"38"}, { pos: [51.5033635,-0.12762479999999998],name:"ダウニング街10番地<br/>10 Downing St, Westminster, London SW1A 2AA イギリス",id:"61"},]; function init() { var map = L.map('map'); L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' }).addTo(map); //マーカー全体が入るボックスを作る var bound = L.latLngBounds(markerList[0].pos, markerList[0].pos); //markerListの設定でマーカーを追加 for (var num in markerList) { var mk = markerList[num]; var popup = L.popup().setContent(mk.name); L.marker(mk.pos,{icon: myIcon},{ title:mk.pos}).bindPopup(popup).addTo(map); //マーカー全体が入るボックスを広げる bound.extend(mk.pos); } //マーカー全体が入るように地図範囲を設定する map.fitBounds(bound); } </script>
- Proof4
- ベストアンサー率78% (151/192)
No.1のお礼コメントに対して回答します。 scriptの部分だけを以下のように書き換えると所望の動作になると思います。 <script> let num = 1; // マーカーにつける番号 function addDivIcon(map, LatLng, html){ const numberIcon = L.divIcon({ className: "greenIcon", iconSize: [25, 41], iconAnchor: [10, 43], popupAnchor: [3, -45], html: html }); const marker = new L.marker( LatLng, { icon: numberIcon } ).addTo(map); return marker; } // クリックでmapにマーカを設置 function onMapClick(e) { // マーカーの追加 const marker = addDivIcon(map, e.latlng, num); // ポップアップ表示 marker.bindPopup(e.latlng.toString()).openPopup(); // 最後のマーカーの座標を変数に aa = e.latlng.toString(); // 選択マーカの座標をポップアップ表示 // ドラッグ操作が完了した時点でポップアップ marker.on("dragend", function (ev) { var chagedPos = ev.target.getLatLng(); this.bindPopup(chagedPos.toString()).openPopup(); }); // 左クリックポップアップ座標を変数に marker.on("click", function (ev) { var chagedPos = ev.target.getLatLng(); this.bindPopup(chagedPos.toString()).openPopup(); aa = chagedPos.toString(); }); // 右クリックで追加マーカーを消す marker.on('contextmenu', function (ev) { map.removeLayer(ev.target); }); // マーカーの番号を増加させる num++; } var point = [51.5, -0.09]; var map = L.map('map').setView(point, 13); L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { maxZoom: 18, attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' }).addTo(map); var marker = L.marker(point).addTo(map); marker.bindPopup("<p>popup1</p><p>指定されたポイント</p>").openPopup(); map.on('click', onMapClick); </script> ※OKWAVEの仕様上、ソースコードのインデントを全角スペースで表現しています。コピペの際はご注意ください。 onMapClick関数のvar marker = L.marker(...でしていた処理をNo.1の回答で提示したaddDivIconに任せる形となります。 addDivIconのmarkerを返値とし、onMapClickで受け取ることでポップアップの表示などができるようになっています。 onMapClickが実行されるごとに、次回作成されるマーカーの番号を増加させています。 classを使ってオブジェクト指向で記述するとすっきりとしたコードになりますが、そこはもう少し慣れてからの課題ということにします。
お礼
再度の回答有難うございました。そのままコードを使い実行しましたところ番号付けはうまく行きましたが（中身につきましてはこれから勉強します。）2番目の静的例示で間違いがありました。 // クリックでmapにマーカを設置 function onMapClick(e) {var marker = L.marker(e.latlng, {icon: greenIcon}, {draggable: true,title: "Resource location",alt: "Resource Location",riseOnHover: true}).addTo(map).bindPopup(e.latlng.toString()).openPopup(); としてましたが、{icon: greenIcon}を付け加える事で静的マーカーとして変更できたと思っていましたが。確かにマーカを追加すれば変更したマーカーに変わりますが次の操作でマーカーのドラッグが効かない結果となってしていました。 // 選択マーカの座標をポップアップ表示 //ドラッグ操作が完了した時点でポップアップ marker.on("dragend", function (ev) {var chagedPos = ev.target.getLatLng();this.bindPopup(chagedPos.toString()).openPopup();}); 実装例の // マーカーの追加 const marker = addDivIcon(map, e.latlng, num); に下記のコードの部分（ただ単に人様のサイトからコピペで借用したもの）を {draggable: true,title: "Resource location",alt: "Resource Location",riseOnHover: true}).addTo(map).bindPopup(e.latlng.toString()).openPopup(); どう生かせば良いか分かりません。もし宜しければ実装できるかどうかも含めお教えください。
- Proof4
- ベストアンサー率78% (151/192)
new L.markerをマーカーの数だけfor文でループさせ、各ループでL.divIconのhtmlオプションに異なる値を指定すれば実現できます。 番号付きマーカーをセットする関数を作成します。 function addDivIcon(map, LatLng, html){ const numberIcon = L.divIcon({ className: "number-icon", iconSize: [25, 41], iconAnchor: [10, 44], popupAnchor: [3, -40], html: html }); map.marker = new L.marker( LatLng, { icon: numberIcon } ).addTo(map); } この関数の引数ですが、 map: L.map(https://leafletjs.com/reference-1.6.0.html#map)で作成するインスタンス LatLng: [緯度, 経度]の配列 html: マーカーの表示内容 となっています。 あとは、この関数をマーカーの数だけ呼び出せばよいです。 「配列に任意の番号を組み入れた場合、その番号で表示できないかどうか」とのことですので、そのような場合の例を以下に示します。 const markerConfig = [ // マーカーの設定を記述する配列 { latlng: [35.6812362,139.7671248], // 位置 html: "東京駅" // マーカーの表示内容 }, { latlng: [35.6580339,139.6994471], html: "渋谷駅" }, { latlng: [35.7295028,139.7087114], html: "池袋駅" }, ]; for(marker of markerConfig){ addDivIcon(map, marker.latlng, marker.html); } 今はmarkerConfigのhtmlに文字列を入れていますが、これを番号にすればよいでしょう。 ※OKWAVEの仕様上、ソースコードのインデントを全角スペースで表現しています。コピペの際はご注意ください。
お礼
早速の回答有難うございます。下記のような例を書き換えようとしましたが私の能力では、番号付きマーカーをセットする関数を作成しどこに配置するかなど全く理解出来ていないため実現不可能でした。 .greenIcon { background-image: url("images/my-icon.png"); text-align:center; line-height:30px; color:black; } </style> </head> <body> <div id="map"></div> <script> var point=[51.5, -0.09]; //静的設定の場合 var greenIcon = L.divIcon({ className: "greenIcon", iconSize: [25, 41], iconAnchor: [10, 43], popupAnchor: [3, -45], html:"a" }); var map = L.map('map').setView(point, 13); L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { maxZoom: 18, attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' }).addTo(map); var marker = L.marker(point).addTo(map);marker.bindPopup("<p>popup1</p><p>指定されたポイント</p>").openPopup(); // クリックでmapにマーカを設置 function onMapClick(e) {var marker = L.marker(e.latlng, {icon: greenIcon}, {draggable: true,title: "Resource location",alt: "Resource Location",riseOnHover: true}).addTo(map).bindPopup(e.latlng.toString()).openPopup(); // 最後のマーカーの座標を変数に aa =e.latlng.toString(); // 選択マーカの座標をポップアップ表示 //ドラッグ操作が完了した時点でポップアップ marker.on("dragend", function (ev) {var chagedPos = ev.target.getLatLng();this.bindPopup(chagedPos.toString()).openPopup();}); //左クリックポップアップ座標を変数に marker.on("click", function (ev) { var chagedPos = ev.target.getLatLng();this.bindPopup(chagedPos.toString()).openPopup();aa =chagedPos.toString();}); //右クリックで追加マーカーを消す marker.on('contextmenu', function (ev) {map.removeLayer(ev.target);}); } map.on('click', onMapClick); 以下省略 どこをどうすれば良いのか再度ご教授お願いいたします。
関連するQ&A
- googlemapでの位置の表示
現在、googlemapを用いて、テーマパークだけを表示させるプログラムを作ってます。 今作っているプログラムは位置情報を読み込む際にxmlファイルから読み込んでいるのですが、xmlファイルの位置情報をランダムに取得して表示させたりすることは出来るのでしょうか？下のxmlファイルでしたら、お台場と東京タワーだけ表示みたいな形で… ↓xmlファイル <markers> <marker lat="35.62882" lng="139.777508" html="お台場" label="お台場" n="1"/> <marker lat="35.658632" lng="139.745411" html="東京タワー" label="東京タワー" n="1"/> <marker lat="35.729539" lng="139.718172" html="サンシャイン60" label="サンシャイン60" n="1"/> <marker lat="35.660423" lng="139.729204" html="六本木ヒルズ" label="六本木ヒルズ" n="1"/> <marker lat="35.7174" lng="139.771347" html="上野動物園" label="上野動物園" n="1"/> <marker lat="35.715491" lng="139.794669" html="花やしき" label="花やしき" n="1"/> <marker lat="35.741964" lng="139.647941" html="としまえん" label="としまえん" n="1"/> <marker lat="35.717588" lng="139.276707" html="東京サマーランド" label="東京サマーランド" n="1"/> </markers> ↓xmlの読み込み部分のjavascript // ===== XML呼出 ===== function readMap(url) { var request = GXmlHttp.create(); request.open("GET", url, true); request.onreadystatechange = function() { if (request.readyState == 4) { var xmlDoc = GXml.parse(request.responseText); var markers = xmlDoc.documentElement.getElementsByTagName("marker"); map.getInfoWindow().hide(); map.clearOverlays(); for (var i = 0; i < markers.length; i++) { var lat = parseFloat(markers[i].getAttribute("lat")); var lng = parseFloat(markers[i].getAttribute("lng")); var points = new GLatLng(lat,lng); var html = markers[i].getAttribute("html"); var label = markers[i].getAttribute("label"); var n = markers[i].getAttribute("n"); var marker = createMarker(points,label,html,n); map.addOverlay(marker); } なんかいい工夫はあるのでしょうか？ やり方も教えていただけると助かります。 何かいい方法がありましたらご教授お願いします。。
- ベストアンサー
- JavaScript
- GoogleMapsAPIv3でXMLを取得
Google Maps API v3でサーバー上にあるXMLファイルを利用して、マーカーを出現させようと思います。 いろいろ調べていたところ、XMLのデータが <markers> <marker lat="37.413320" lng="-122.125604"/> <marker lat="37.433480" lng="-122.139062"/> </markers> 上記のような場合、 var markers = data.documentElement.getElementsByTagName("marker")でXMLのデータを取得し、数値を使いたいところで、 getAttribute("lat") getAttribute("lng") を使うことは調べていてわかりました。 しかし、 <markers> <Latitude>35.679858</Latitude> <Longitude>13.689478</Longitude> </markers> このようにXMLデータが書かれている場合、どのようにLatitude, Longtitudeの値を取得すればいいのかがわかりません。XMLは提供されているものを利用するので、変更できません。 このような場合の数値の取得方法がわかる方いらっしゃいましたら教えてください。
- ベストアンサー
- JavaScript
- Google Maps：同マップ内でそれぞれのアイコンの表示・非表示を切り替えるには
いつもお世話になっております。 Google Mapsを利用し、同マップ内でそれぞれのアイコンの表示・非表示を切り替えたいという要望を受けたのですが、やりかたがわからず途方に暮れています。 - 要望 ------------------------------------------- 1.Google Maps内にカテゴリ1～6に属する、デザインがちがうアイコンをそれぞれ3つずつ表示。 2.このアイコンを、カテゴリ群ごとにボタンか何かで表示・非表示を切り替える。 -------------------------------------------------- [1]に関してはできたのですが、[2]のやり方がわかりませんでした。 代替案として、カテゴリごとにGoogle Mapsを読み込むhtmlを変えて iframe内で表示するというのを出したのですが、 “同マップ上でアイコンだけ表示したり消したり”したいとの ことでした。 [1]を実現するのに使用したコードが下記になります。 (※マーカーの関するスクリプトだけ外部ファイル化し、bodyにonloadでcreateMapを読み込んでいます) ----------------------------------------------------- function createMap() { var map = new GMap2(document.getElementById("map")); map.addControl(new GLargeMapControl()); map.addControl(new GOverviewMapControl()); map.setCenter(new GLatLng(緯度, 経度), 13); var icon = new GIcon(); icon.image = "marker.png"; icon.shadow = "shadow.png"; icon.iconSize = new GSize(20, 34); icon.iconAnchor = new GPoint(10, 34); icon.infoWindowAnchor = new GPoint(7, 1); var icon2 = new GIcon(); icon2.image = "marker2.png"; icon2.shadow = "shadow.png"; icon2.iconSize = new GSize(20, 34); icon2.iconAnchor = new GPoint(10, 34); icon2.infoWindowAnchor = new GPoint(7, 1); var point001 = new GLatLng(緯度, 経度); var marker001 = new GMarker(point001, icon); map.addOverlay(marker001); GEvent.addListener(marker001, 'click', function() { marker001.openInfoWindowHtml('<div style="width: 300px">吹き出し<\/div>'); }); var point002 = new GLatLng(緯度, 経度); var marker002 = new GMarker(point002, icon2); map.addOverlay(marker002); GEvent.addListener(marker002, 'click', function() { marker002.openInfoWindowHtml('<div style="width: 300px">吹き出し<\/div>'); }); } ---------------------------------------------- ここまで 方法について、ご存じの方がいらっしゃったら 教えていただきたいです。 よろしくお願いいたします！
- 締切済み
- AJAX
- Google Mapsからxmlファイルの読み込み
お世話になっております。 質問はタイトルの通りです。javascriptのソースを以下のようになります。 ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー var map; function initialize() { if (GBrowserIsCompatible()) { map = new GMap2(document.getElementById("map_canvas")); map.setCenter(new GLatLng(34.5927356,135.50753655), 5); GEvent.addListener(map, "click", clickAction); } } function downloadData(){ GDownloadUrl("http://○○/yahoolocaltest2.php", function dispData(data, statusCode){ var xml = GXml.parse(data); var markers = xml.documentElement.getElementsByTagName("marker"); for (var i = 0; i < markers.length; i++) { var lats = markers[i].getElementsByTagName("lat"); var lngs = markers[i].getElementsByTagName("lng"); var names = markers[i].getElementsByTagName("name"); var lat = parseFloat(GXml.value(lats[0])); var lng = parseFloat(GXml.value(lngs[0])); var name = GXml.value(names[0]); map.addOverlay(createMarker(lat, lng, name)); } }); } function createMarker(lat, lng, name) { var marker = new GMarker(new GLatLng(lat, lng)); var html = "<p>" + name + "</p>"; GEvent.addListener(marker, "click", function(){ marker.openInfoWindowHtml(html); }); return marker; } ーーーーーーーーーーーーーーーーーーーーーーーーーーーーー 動けない所： function downloadData()の所には”yahoolocaltest2.php”というファイルを読み込みたいですが、マーカがでないです。 xmlデータは”~~.php”なんですが、実行結果は以下のようなxmlデータに整いました。 <?xml version='1.0' encoding='UTF-8' ?> <markers> <marker> <lat>35.2570706</lat> <lng>140.3977072</lng> <name>千葉県いすみ市</name> </marker> <marker> <lat>35.6766300</lat> <lng>139.7425472</lng> <name>東京都千代田区</name> </marker> <marker> <lat>35.6785042</lat> <lng>139.7415028</lng> <name>東京都千代田区</name> </marker> </markers> この結果は"~~.xml"という名前の保存したら、表示できますが。”~~.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
- googleMapでアイコン変更すると情報ウィンドウが開かない
お世話になります。 タイトルのとおりでマーカークリックで情報ウィンドウが表示される作りなんですが、オリジナルのアイコンに変更するとエラーで開かなくなってしまいます。 以下のプログラムで何か問題があるのでしょうか。 わかる方がいらっしゃいましたら教えて下さい。お願いします。 var map function startUp(){ map = new GMap2(document.getElementById("map")); // DBに登録した位置データを元にマーカー作成 GDownloadUrl("load.php", function(doc, stat){ eval("load=" + doc); for(var i=0; i<load.data.length; i++){ var icon = new GIcon(); // データ区分ごとにマーカーを変える switch(load.data[i].kbn){ case "0": icon.image = "img/blue.gif"; break; case "1": icon.image = "img/green.gif"; break; case "2": icon.image = "img/red.gif"; break; default: } icon.iconSize = new GSize(20,34); icon.shadow = "http://www.google.com/mapfiles/shadow50.png"; icon.shadowSize = new GSize(37,34); icon.iconAnchor = new GPoint(8,34); var mk = makeMarker(load.data[i], icon); map.addOverlay(mk); } }); } function makeMarker(data, icon){ var point = new GLatLng(data.lat, data.lng); var marker = new GMarker(point, icon); GEvent.addListener(marker, "click", function(){ marker.openInfoWindowHtml("表示テスト"); } return marker; }
- ベストアンサー
- JavaScript
- GoogleMap APIマーカーマネージャーとXMLの読み込み
Google Codeのページ http://code.google.com/intl/ja/apis/maps/documentation/overlays.html#Marker_Manager に載っていたマーカーマネージャーを使用し、さらにGDownloadUrlでXMLを読み込んで http://code.google.com/intl/ja/apis/maps/documentation/services.html 地図を作成しようとしております。 現在記述は以下のようになっています。 ----- var map = null; var mgr = null; var batch = []; function setupMap() { if (GBrowserIsCompatible()) { map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(35.66332844365397,139.7321891784668),16); map.addControl(new GLargeMapControl()); map.enableDoubleClickZoom(); window.setTimeout(setupMarkers, 0); } } function getMarkers() { GDownloadUrl("○○○.xml", createMap); return batch; } function createMap(data) { var xml = GXml.parse(data); var markers = xml.documentElement.getElementsByTagName("marker"); for (var i = 0; i < markers.length; i++) { var name = markers[i].getAttribute("name"); var lat = parseFloat(markers[i].getAttribute("lat")); var lng = parseFloat(markers[i].getAttribute("lng")); var markeropts = new Object(); markeropts.title = name; var marker = new GMarker(new GPoint(lng,lat), markeropts); batch.push(marker); // ※1 } return batch; } function setupMarkers() { mgr = new MarkerManager(map); mgr.addMarkers(getMarkers(), 14); mgr.refresh(); } ----- いろいろと検証の結果、XMLの読み込みはうまくいっており、※1のところでbatchにはちゃんとpushされていることは確認したのですが、最終的にマーカーは表示されません。 function getMarkersが function getMarkers() { var batch = []; var markeropts = new Object(); markeropts.title = "六本木"; var marker = new GMarker(new GPoint(35.66332844365397,139.7321891784668), markeropts); batch.push(marker); return batch; } の時はマーカーがちゃんと表示されたことも確認しております。 どこがおかしいのでしょうか？ また、根本的に間違っているor他にいい方法があるのであればご教示ください。 よろしくお願い致します。
- ベストアンサー
- JavaScript
- googleMapでアイコン変更すると情報ウィンドウが開かない
お世話になります。 （javascriptカテゴリで同じ質問を出しましたが回答が得られなかったのでこちらへも書きました） タイトルのとおりでマーカークリックで情報ウィンドウが表示される作りなんですが、オリジナルのアイコンに変更するとエラーで開かなくなってしまいます。 以下のプログラムで何か問題があるのでしょうか。 わかる方がいらっしゃいましたら教えて下さい。お願いします。 var map function startUp(){ map = new GMap2(document.getElementById("map")); // DBに登録した位置データを元にマーカー作成 GDownloadUrl("load.php", function(doc, stat){ eval("load=" + doc); for(var i=0; i<load.data.length; i++){ var icon = new GIcon(); // データ区分ごとにマーカーを変える switch(load.data[i].kbn){ case "0": icon.image = "img/blue.gif"; break; case "1": icon.image = "img/green.gif"; break; case "2": icon.image = "img/red.gif"; break; default: } icon.iconSize = new GSize(20,34); icon.shadow = "http://www.google.com/mapfiles/shadow50.png"; icon.shadowSize = new GSize(37,34); icon.iconAnchor = new GPoint(8,34); var mk = makeMarker(load.data[i], icon); map.addOverlay(mk); } }); } function makeMarker(data, icon){ var point = new GLatLng(data.lat, data.lng); var marker = new GMarker(point, icon); GEvent.addListener(marker, "click", function(){ marker.openInfoWindowHtml("表示テスト"); } return marker; }
- 締切済み
- その他（プログラミング・開発）
- 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でもかまいませんので、よろしくお願い致します。
- ベストアンサー
- JavaScript
- 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
お礼
ご回答、大変有難うございます。以下の設定で変更マーカーにidが表示されました。私も最初の質問でのCSSの設定で試みていたのですが、マーカーがでなくて（透過状態？）idだけ表示される結果となっていました,CSSにbackground-repeat: no-repeat;を加え無ければならないとはつゆ知らず。無知の極みです。 .my-custom-marker{ background: url('images/my-icon.png'); background-repeat: no-repeat; line-height:30px; text-align:center; } </style> </head> <body> <script> //マーカーに表示したい対象の緯度経度とポップアップする名称を設定 var markerList = [ { pos: [35.021374099999996,135.75594859999998],name:"京都府庁<br/>京都市上京区薮之内町",id:"26"}, { pos: [33.8416231,132.765729],name:"愛媛県庁<br/>松山市一番町4-4-2",id:"38"}, { pos: [51.5033635,-0.12762479999999998],name:"ダウニング街10番地<br/>10 Downing St, Westminster, London SW1A 2AA イギリス",id:"61"}, ]; function init() { var map = L.map('map'); L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' }).addTo(map); //マーカー全体が入るボックスを作る var bound = L.latLngBounds(markerList[0].pos, markerList[0].pos); //markerListの設定でマーカーを追加 for (var num in markerList) { var mk = markerList[num]; var popup = L.popup().setContent(mk.name); L.marker( mk.pos, { icon: L.divIcon({ className: 'my-custom-marker', iconSize: [25, 44], // アイコンサイズ iconAnchor: [10, 43], popupAnchor: [3, -45], html: mk.id }), title: mk.pos } ).bindPopup(popup).addTo(map); //マーカー全体が入るボックスを広げる bound.extend(mk.pos); } //マーカー全体が入るように地図範囲を設定する map.fitBounds(bound); } </script> 長々とお付き合いしていただき大変お世話になりました。