ベストアンサー

GoogleMapにカラーマーカーと吹き出し

2013/01/09 17:32

GoogleMapにそれぞれのポイントに色んな色のカラーマーカーと吹き出しをいれたいのですが吹き出しを表示させる方法はなんとかなったのですが現在のHTMLに上手くマーカーに色を設定できません。現在のmapが下記URLになります。こちらのどこに書き込めば反映されるのかどうかご教授よろしくお願いいたします。 http://www.royal-resort.co.jp/hakone/g_map/test_map.html

snowcandy8
お礼率50% (2/4)

HTML
回答数4
ありがとう数2

みんなの回答 （4）
専門家の回答

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

ベストアンサー

fujillin
ベストアンサー率61% (1594/2576)

2013/01/10 14:31 回答No.4

A No3です。たびたび失礼！どこかで、googleのapi呼び出しが抜けてしまっていました。 <script type='text/javascript' src='http://maps.google.com/maps/api/js?sensor=false'></script> こちらも念のため。って、何度もおまぬけなやつ＞俺

質問者

お礼 2013/01/11 19:34

ご回答、ありがとうございます。バタバタしておりいただきましたコードをいれこんで動きをまだ見れておりませんが上記サイトに埋め込んで表示できるか試してみます。

その他の回答 (3)

fujillin
ベストアンサー率61% (1594/2576)

2013/01/10 14:12 回答No.3

A No2です肝心のicon生成のアドレスのところがリンク表示のために省略されてしまってしまったみたいですが、先頭文字を除くと以下の通りとなります。　ttp://chart.apis.google.com/chart?chst=d_map_pin_letter_withshadow&chld=" + i + "%7C" + e[2] 念のため。

fujillin
ベストアンサー率61% (1594/2576)

2013/01/10 13:45 回答No.2

A No1です。補足の参考URLに挙げていらっしゃる方法は、No1の2）の方法と同じ考えです。表示方法はそのサイトにも書いてある通りですし、No1の参考に挙げた通りなのですが… とりあえずの表示例として… 　*　マーカーは 1～の番号表示としていますが、生成アドレスの「" + i + "%7C"」の部分を「%E2%80%A2%7C"」に変えれば「・」表示で一定となりますので、デフォルトのアイコンとほぼ同じものの色違いになります。（番号の場合、1桁しか表示できません） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>sample</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> </head> <body> <div id='map' style='width:800px; height:600px;'></div> <script type="text/javascript">  </script> </body> </html>

fujillin
ベストアンサー率61% (1594/2576)

2013/01/09 22:14 回答No.1

mapのapiを見てみると、デフォルトのマーカーの色をそのまま変えられそうなプロパティは見当たらないようですね。考えられそうなのは、 1）普通にアイコン画像を複数用意しておいて、それで表示する　https://developers.google.com/maps/documentation/javascript/3.exp/reference?hl=ja#Icon 2）考え方は1）と同様ですが、画像は用意せずに生成して表示する　chartのDynamic Iconsを利用すれば、デフォルトとほぼ同じアイコンを色指定して作成できます　https://developers.google.com/chart/image/docs/gallery/dynamic_icons?hl=ja#pins ほかにも方法はあると思いますが、とりあえず。

質問者

お礼 2013/01/10 09:23

fujillinさんご回答、ありがとうございます。吹き出しを入れずマーカーの色のみを簡単に帰る方法が掲載されているところはあるのですが、 http://99blues.dyndns.org/blog/2011/06/google-maps-api_-_change-marker/ 出来ればアイコン画像を使わず上記URLの方法を取り入れられないかと思っております。初級者なのでコードを書いていただけますと助かりま。引き続き皆さまよろしくお願いいたします。

関連するQ&A

googlemapについての質問です。
googlemapについての質問です。通常はマーカーが表示、クリックすると吹き出しが出てテキスト等の説明が表示されますが、マップ自体にテキストを埋め込む方法はありますか？以下のような漢字です。 http://fishing-map.net/
- ベストアンサー
- JavaScript
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>
- 締切済み
- JavaScript
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&v=2&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> どなたかご教授くださると助かります。宜しくお願いいたします。
- ベストアンサー
- JavaScript
GoogleMapApi GoogleMap のカスタマイズについて。現在見えているマーカーの情報のみをサイドバーに表示したい。
GoogleMapをサイトで利用を考えています。現在、XMLを利用して、マーカーをGMap上へ表示させることまではできました。 http://www.i-ll.jp/test/map/xml.html コードはソースを参照をお願いします。ここからカスタマイズについてなのですが現在はマーカーの情報をすべてサイドバーに表示してあります。これを、マーカーが実際に目で見えている情報のみをサイドバーに表示させたい場合どうしたらよいのでしょうか？（添付画像参照）スクロールするたびに情報が変化します。参考サイト川越なう：http://kawagoe-now.jp/ 初めて、GoogleMapをカスタマイズしていて、不慣れな部分も多いのですがよろしくお願いいたします。
- ベストアンサー
- JavaScript
GoogleApiについて質問です。
GoogleApiについて質問です。【例】 (1)GoogleMapで「国会議事堂」を検索する (2)マーカーＡが表示される (3)マーカーＡをクリックする (4)吹き出しが表示される（添付画像）【やりたいこと】 (1)GoogleApiで自作のＨＰにＭＡＰを表示する。 (2)「国会議事堂」を検索しマーカーを表示する (3)マーカーをクリックする。 (4)自作の吹き出しを表示する。(HTML形式) ●吹き出しについて自作の吹き出しは表示できますが【例】(4)のGoogleMap吹き出しを表示させることはできるのでしょうか？自作で吹き出しを作成するのは数が増えると大変なのでご存知の方よろしくお願いします。
- ベストアンサー
- JavaScript
WordpressのGmapに吹き出しを付けたい
wordpressにACFを利用して埋め込んでいるGooglemapのピンにクリックで表示される吹き出しを付けたいのですが、うまくいきません。しばらく前にwordpressのサポートでも質問したのですが回答を得られなかったのでかなり困っています。状況としては、「Advanced Custom Fieldsの全項目解説・公開側表示編集編」（http://blog.s-giken.net/253.html#googlemap）を参考に下記のように書きました。記述場所はphpファイル内です。 <?php $name = get_field ( 'name' ); $map = get_field ( 'map' ); echo '<div id="map" style="width: 95%; height: 300px; margin:5px auto;"></div>'; echo '<span itemprop="hasMap"><script type="text/javascript">'; echo ' google.maps.event.addDomListener(window,"load",function(){'; echo ' var mapdiv=document.getElementById("map");'; echo ' var myOptions={zoom:15,center:new google.maps.LatLng(' . $map[lat] . ',' . $map[lng] . '),mapTypeId:google.maps.MapTypeId.ROADMAP,scaleControl:true};'; echo ' var map=new google.maps.Map(mapdiv,myOptions);'; echo ' var marker=[];'; echo ' var infowindow=[];'; echo ' marker[0]=new google.maps.Marker({icon:"http://maps.google.com/mapfiles/kml/paddle/red-stars.png",position:new google.maps.LatLng(' . $map[lat] . ',' . $map[lng] . '),map:map,title:"' . $name . '"});'; echo ' var markerCluster=new MarkerClusterer(map,marker);'; echo ' });'; echo '</script></span>'; ?> この状態でACF側で入力した住所をもとにマップ上に指定のマーカーを立てることはできているのですが、ここにクリックで表示される吹き出しを追加しようとしてもうまくいきません。「マーカーがクリックされたら情報ウィンドウ（ふきだし）を表示する」（http://www.openspc2.org/reibun/Google/Maps/API/ver3/code/map/marker/0004/）や「配列を使用してGoogleMapに複数のマーカと情報ウィンドウを表示する」（https://ghweb.info/post-2709.html）を参考にいろいろいじってみて、 google.maps.event.addListener(marker, "click", function() { infowindow[0]=new google.maps.InfoWindow({ content: "このコンテンツを表示します" }); infowindow.open(map, marker); }); みたいな感じのをecho' 'で挟んで追記すれば動くかなと試したのですが、どうもうまくいきません。解決方法をご教授いただければ幸いです。
- ベストアンサー
- JavaScript
YOLPのマーカークリックでリンク先に飛ぶには？
Yahoo! JavaScriptマップAPIを使い、日本地図に複数のマーカーに吹き出しを付けて以下の形にしました。このマーカーをダブルクリックしたときに、それぞれ指定したリンク先に飛ぶようにしたいのですが、どのようにすればよいのでしょうか。また、現在のところマーカーのマウスホバーで吹き出しが表示されるのですが、これをマウスクリック（タップ）で表示するにはどうすればよいでしょうか。さらに別のマーカーをクリックするとそれまで開いていた吹き出しが消えて、クリック先の吹き出しに切り替わるようにしたいと考えています。ご教示お願いいたします。 window.onload = function(){ var ymap = new Y.Map("map"); ymap.drawMap(new Y.LatLng(35.68132732438393,139.76650149843817), 6,"map"); var markers = []; markers.push( new Y.Marker(new Y.LatLng(35.674756131624456,139.73189027331),{title: "赤坂A地点"})); markers.push( new Y.Marker(new Y.LatLng(35.67024139121164,139.72727687380439),{title: "赤坂B地点"})); markers.push( new Y.Marker(new Y.LatLng(35.63223075430667,139.88597781679755),{title: "浦安A地点"})); ymap.addFeatures( markers ); }
- ベストアンサー
- JavaScript
googlemapについて教えてください。
googlemapでマーカーが追随するようにしたくて、function update(position)　の関数のはじめにif(marker!=null){marker.setMap(null);}を入れてマーカーを消してから、次のマーカーがつくようにとしたつもりなのですが、うまくいきません。どのようにしたら、現在地にマーカーがつくようになるのでしょうか。下の場合マーカーがたくさんつきます。よろしくお願いします。 <html> <head> <title>map</title> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&language=ja&v=3.6"></script> <script type="text/javascript"> var gmap; window.onload = function(){ var myLatlng = new google.maps.LatLng( 33 , 130 ); navigator.geolocation.watchPosition(update,poserror,{maximumAge: 30000,enableHighAccuracy:1}); var myOptions = { zoom: 15, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; gmap = new google.maps.Map(document.getElementById("map_canvas"), myOptions); } function update(position){ var lat = position.coords.latitude; var lng = position.coords.longitude; var myLatlng = new google.maps.LatLng( lat , lng ); gmap.setCenter( myLatlng ); var marker = new google.maps.Marker({ position: myLatlng, map: gmap }); } function poserror(position){alert("error");} </script> </head> <body> <div id="map_canvas" style="width:95%; height:500px ; border:solid 3px #ccc;"></div> </body> </html>
- ベストアンサー
- JavaScript
グーグルマップ（Googlemap）をブログに貼り付けたい
グーグルマップをブログ（ココログ）に貼り付けたいと思い、現在ぐーぐるマップにHTML を貼り付けてサイトに地図を埋め込みますという機能があり、貼り付けましたがタグだけ表示され、地図は表示されません。どのようにすれば良いかご存知の方教えて下さい。また、グーグルマップのマーカーの位置が違うのですがブログに貼り付ける際、マーカーを指定の場所までドラッグして移動させる機能や方法をご存知であれば一緒に教えていただくと助かります。
- 締切済み
- その他（プログラミング・開発）
GoogleMapを複数表示させたい
GoogleMap　を　API　で２つ表示させて、それぞれの地図にマーカーをひとつずつつけたいです。マーカーをつけて吹き出すをだすまではできたのですが、マップをもうひとつ増やすにはどのように記述すればよいでしょうか？現在のソースは以下です -------------------------------------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <style type="text/css"> #Gmap{ width:500px; height:500px; } </style> <script src="http://maps.google.com/maps?file=api&v=2&key=http://maps.google.com/maps?file=api&v=2&key=" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> //<![CDATA[ function load() { if (GBrowserIsCompatible()) { //地図を作成 var map = new GMap2(document.getElementById("Gmap")); map.setCenter(new GLatLng(35.675845,139.744763), 15); //マーカーを作成 var marker = new GMarker(new GLatLng(35.675845,139.744763)); //マーカーをクリックしたら、吹き出しの中に写真を表示する GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml("テキストが入ります"); }); //マーカーを地図上に配置 map.addOverlay(marker); //縮尺移動のコントロールを設置 map.addControl(new GLargeMapControl()); //地図衛星写真切り替えボタンを表示 map.addControl(new GMapTypeControl()); //縮尺表示 map.addControl(new GScaleControl()); } } //]]> </script> </head> <body onload="load()" onunload="GUnload()"> <div id="Gmap"></div> </body> </html> -------------------------------------------------------- よろしくお願いいたします
- ベストアンサー
- その他（プログラミング・開発）

GoogleMapにカラーマーカーと吹き出し