• 締切済み

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

みんなの回答

  • steel_gray
  • ベストアンサー率66% (1052/1578)
回答No.1

検証はしてないけどとりあえず影の画像を設定している部分(icon.shadow = ~ )は単純にjavascriptの文法エラーですね。 コピペするときに余計な文字を拾ってきてしまったんでしょうか?

mapple55
質問者

補足

せっかく回答頂いたのにPCを使えない状態で 見るのが遅くなってしまいました。すいません。 ご指摘の点ですが、おっしゃるとおりどうも他カテゴリで投稿したものをコピペしたときに拾ってしまったようです。 投稿時に気づけませんでした。混乱させて申し訳ありません。 この件に関してjavascriptカテゴリでも質問していてようやく回答を頂き無事解決できました。 アイコン設定の部分で「icon.infoWindowAnchor」が必要だったようです。 同じ目的の例題を載せた参考にした本には記述がなかったもので必要だとは思いませんでした。 googleMapに関しては質問できるところが少ないので毎回苦労します。 回答ありがとうございました!

関連するQ&A

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

  • 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:同マップ内でそれぞれのアイコンの表示・非表示を切り替えるには

    いつもお世話になっております。 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>'); }); } ---------------------------------------------- ここまで 方法について、ご存じの方がいらっしゃったら 教えていただきたいです。 よろしくお願いいたします!

  • 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("てすと1<br />",{maxWidth:200}); marker2.bindInfoWindowHtml("てすと2<br />",{maxWidth:200}); するとデフォルトアイコンのマーカーはクリックした際に情報ウインドウが表示されるのですが、アイコン画像を変更したほうのマーカーはクリックしても情報ウインドウが表示されず、「エラー: b is undefined ソースファイル: http://maps.gstatic.com/intl/ja_ALL/mapfiles/193c/maps2.api/main.js 行: 1224」というエラーが表示されてしまいます。 アイコン画像を変更したマーカーでは情報ウインドウは表示できないのでしょうか?

  • GoogleMAPの切り替えについて

    Javascriptのエラーについて質問させてください。 1つのページで、2種類のGoogleMAPを切り替えたいと思っています。しかし、以下のように記述したところ「"offsetwidth"はnullまたはオブジェクトではありません。」とエラー表示されてしまいます(確認ブラウザ:IE6、FireFOX3、Safari、Googlechorome)。 一体、何がマズイのかさっぱりわからなくなり、困り果てて質問しています。どうかお力をお貸しください。 宜しくお願いします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="stylesheet" href="style_sheet.css" type="text/css"> <title>マップテスト</title> <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=グーグルマップAPIキー" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ function load() { if (GBrowserIsCompatible()) { //エリア1マップ用設定開始。 var map = new GMap2(document.getElementById("map")); //コントロール追加表示。右下縮小図とコントロールバー。 map.addControl( new GSmallMapControl() ); map.addControl( new GOverviewMapControl() ); //店舗のマーカー表示 var point1 = new GLatLng(座標,座標); map.setCenter(point1, 10); var point2 = new GLatLng(座標,座標); map.setCenter(point2, 10); var point3 = new GLatLng(座標,座標); map.setCenter(point3, 10); //アイコンのための宣言 var icon = new GIcon(); // アイコン画像のURL icon.image = "./img/hoge.png"; // アイコン画像のサイズ icon.iconSize = new GSize(50, 25); // アイコンの表示場所 con.iconAnchor = new GLatLng(32, 0); // マーカーの表示 map.addOverlay( new GMarker(point1, icon) ); map.addOverlay( new GMarker(point2, icon) ); map.addOverlay( new GMarker(point3, icon) ); //デフォルトの表示 map.setCenter(new GLatLng(座標,座標), 10); } } function load2() { if (GBrowserIsCompatible()) { //エリア2マップ用設定開始。 var map2 = new GMap2(document.getElementById("map")); //コントロール追加表示。右下縮小図とコントロールバー。 map2.addControl( new GSmallMapControl() ); map2.addControl( new GOverviewMapControl() ); //店舗のマーカー表示 var point21 = new GLatLng(座標,座標); map2.setCenter(point21, 10); var point22 = new GLatLng(座標,座標); map2.setCenter(point22, 10); var point23 = new GLatLng(座標,座標); map2.setCenter(point23, 10); var point24 = new GLatLng(座標,座標); map2.setCenter(point24, 10); //アイコンのための宣言 var icon2 = new GIcon(); // アイコン画像のURL icon2.image = "./img/hoge2.png"; // アイコン画像のサイズ(横幅/縦幅) icon2.iconSize = new GSize(50, 25); // アイコンの表示場所 icon2.iconAnchor = new GLatLng(32, 0); // マーカーの表示 map2.addOverlay( new GMarker(point21, icon2) ); map2.addOverlay( new GMarker(point22, icon2) ); map2.addOverlay( new GMarker(point23, icon2) ); map2.addOverlay( new GMarker(point24, icon2) ); //デフォルトの表示 map2.setCenter(new GLatLng(座標,座標); 12); } } //]]> </script> </head> <body onload="load()" onunload="GUnload()"> <a href="#" onclick="load()">エリア1</a>| <a href="#" onclick="load2()">エリア2</a>| <!-- マップ表示用DIV --> <div id="map" style="width:700px;height:350px;"></div> </body> </html>

  • googlemapについて教えてください。

    googlemapで設置しておいたオリジナル画像のマーカーの画像を変更したいと思っています。setMap(null);メソッドで消してから同じ緯度経度に画像を変えたマーカーを var marker = new google.maps.Marker({ map: gmap, position: new google.maps.LatLng(lat, lng), icon: 'img/icon01.png' }); で設置して画像を変えたようにしたのですが、うまくいきません。マーカーの画像の変更しかたご存知の方教えてください。

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

  • グーグルマップについて教えてください。

    【やりたいこと】 グーグルマップとストリートビューを連動するところまではできました。しかし、地図をクリックして取得されるデータをマーカーが出るように設定し所までは良かったのですが、そのマーカーをクリックしても必要なデータが表示されません。どの様にしたらいいでしょうか? ソースは下記の通りです。 var map; var myPano; var panoClient; var currentLatLng = new GLatLng(35.6829, 139.7653); window.onload = function() { load(); loadd(); setEvent(); } function load() { map = new GMap2(document.getElementById("mymap"),{draggableCursor:"crosshair"}); map.setCenter(new GLatLng(35.6829, 139.7653), 8);    map.addControl(new GMapTypeControl());    map.addControl(new GLargeMapControl3D());    streetview = new GStreetviewOverlay();    map.addOverlay(streetview); map.addControl(new GOverviewMapControl(new GSize(200,200))); } function loadd() {     myPano = new GStreetviewPanorama(document.getElementById("pano")); GEvent.addListener(map,"click", function(overlay,point) { currentLatLng=point; myPano.setLocationAndPOV(currentLatLng); map.setCenter(currentLatLng); }); } function createGMarker(title, html, lat, lng) { var infoObj = new Object(); infoObj.title = title; var gpObj = new GLatLng(lat, lng); var marker = new GMarker(gpObj, infoObj); map.addOverlay(marker); GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(html); }); }

  • google mapで二番目以降のマップが表示されない

    自作のマーカーを使い、マーカーをクリックすると吹き出しが出るようにして、マップ上2か所にマーカーを付けたのですが、2番目のマーカーが全く反映されません。 下に書いたものがそのコードなのですが、見直してもどこにミスがあるのかわかりません… どなたか解決策をお願いします… <script type="text/javascript"> //<![CDATA[ var map = new GMap(document.getElementById("map")); map.addControl(new GLargeMapControl()); map.addControl(new GMapTypeControl()); map.centerAndZoom(new GPoint(135.384521484375,34.73709847578162), 8 ); var icon = new GIcon(); icon.image = " pngイメージ画像 "; icon.shadow = " pngイメージ画像 "; icon.iconSize = new GSize(12, 20); icon.shadowSize = new GSize(22, 20); icon.iconAnchor = new GPoint(6, 20); icon.infoWindowAnchor = new GPoint(5, 1); // 1番目位置 var point = new GPoint(省略); var marker = new GMarker(point,icon); map.addOverlay(marker); // 1番目吹き出し GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml("<div style='width:350px;font-size:12px;' ><table><tr><td><img src=イメージ画像 ><br><a href=\"ページへのリンク\"target=\"blank\" >説明文<br><br></td></tr></table></div>");}); var marker = createMarker(point,html); map.addOverlay(marker); // 2番目位置 var point = new GPoint(省略); var marker = new GMarker(point,icon); map.addOverlay(marker); // 2番目吹き出し GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml("<div style='width:350px;font-size:12px;' ><table><tr><td><img src=イメージ画像 ><br><a href=\"ページへのリンク\"target=\"blank\" >説明文<br><br></td></tr></table></div>");}); var marker = createMarker(point,html); map.addOverlay(marker); //]]> </script>

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

専門家に質問してみよう