質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Google マップ

Google Mapは、Google社がオンラインで提供している地図・ローカル検索サービスです。GIS(Geographic Information System:地理情報システム)の中の「WebGIS」に該当します。地図・航空写真・地形の表示方式があり、それぞれユーザーが縮尺を調整して表示させることができます。地域の情報サービスを検索する機能やルート検索の機能も搭載されています。

Q&A

解決済

3回答

1860閲覧

GoogleMapのinfoWindow、マーカー変更

nunuco

総合スコア15

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Google マップ

Google Mapは、Google社がオンラインで提供している地図・ローカル検索サービスです。GIS(Geographic Information System:地理情報システム)の中の「WebGIS」に該当します。地図・航空写真・地形の表示方式があり、それぞれユーザーが縮尺を調整して表示させることができます。地域の情報サービスを検索する機能やルート検索の機能も搭載されています。

0グッド

1クリップ

投稿2018/01/18 01:48

いつもお世話になっております。
GoogleMap apiを使用して、複数のマーカーに情報ウィンドウを表示したいです。
その際に初期のマーカーをオリジナルのアイコンに変更したいのですが(すべて同じアイコンで大丈夫です)どこにどのように挿入すればいいのかわかりません。
どなたかご教示いただけませんでしょうか。

function inicializar() { // 初期設定 var option = { // ズームレベル zoom: 9, // 中心座標 center: new google.maps.LatLng(32.740485, 131.027392), // タイプ (ROADMAP・SATELLITE・TERRAIN・HYBRIDから選択) mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById("map"), option); google.maps.event.addListener(map, "click", function() {infowindow.close();}); // ポイントの追加 var point = new google.maps.LatLng(33.036883, 130.849557); var marker = create_maker(point, "竜門ダム", "竜門ダム<br><img src='http://3.bp.blogspot.com/-uW9X4NjqgzA/UFRT_AgM7DI/AAAAAAAAAYo/JNLQVtE9q70/s320/2011-12-04-%25E7%25AB%259C%25E9%2596%2580%25E3%2583%2580%25E3%2583%25A0-08.jpg' width='200'></img><br><a href='http://damlab.klutche.org/2011/12/blog-post_9484.html' target='_blank'>DAMLAB</a>"); var point = new google.maps.LatLng(32.320247, 131.012865); var marker = create_maker(point, "市房ダム", "市房ダム<br><img src='http://4.bp.blogspot.com/-sOzdnfNx6mo/UFHLThMKtGI/AAAAAAAAAW4/v8KkXeQnNHU/s320/2012-02-05-%25E5%25B8%2582%25E6%2588%25BF%25E3%2583%2580%25E3%2583%25A001.jpg' width='200'></img><br><a href='http://damlab.klutche.org/2012/01/blog-post_5.html' target='_blank'>DAMLAB</a>"); var point = new google.maps.LatLng(32.995505, 131.200759); var marker = create_maker(point, "大蘇ダム", "大蘇ダム<br><img src='http://2.bp.blogspot.com/-dEfeSWtFZ-c/UIokK0n2vtI/AAAAAAAAAsQ/n3PChKVRP7g/s320/2012-05-20-%25E5%25A4%25A7%25E8%2598%2587%25E3%2583%2580%25E3%2583%25A005.jpg' width='200'></img><br><a href='http://damlab.klutche.org/2012/01/blog-post_25.html' target='_blank'>DAMLAB</a>"); } function create_maker(latlng, label, html) { // マーカーを生成 var marker = new google.maps.Marker({position: latlng, map: map, title: label,}); // マーカーをクリックした時の処理 google.maps.event.addListener(marker, "click", function() { infowindow.setContent(html); infowindow.open(map, marker); }); gmarkers[i] = marker; i++; return marker; } function map_click(i) { google.maps.event.trigger(gmarkers[i], "click"); } google.maps.event.addDomListener(window, "load", inicializar);

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

Markerのnewで引数のオブジェクトにicon:パスで渡せば確かいけます。

javascript

1function create_maker(latlng, label, html) { 2 // マーカーを生成 3 var marker = new google.maps.Marker({position: latlng, map: map, title: label,icon:<png画像のパス>});

投稿2018/01/18 01:57

sousuke

総合スコア3828

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

sousuke

2018/01/18 01:58

終わってましたm(_ _;)m
nunuco

2018/01/18 05:14

ご回答ありがとうございます。色々読みながらやっていたら何とか自分でできました。 icon:<画像パス>という方法でもできるのですね。 次回からはそちらを使わせていただいた方がよさそうなのでそうします! ご親切にありがとうございました!
sousuke

2018/01/18 05:18

??? やってることは見ての通り一緒ですよ?
nunuco

2018/01/18 06:39

すいません、全くプログラムが読めないので同じことをやっているかどうかの区別もつかず、お恥ずかしいです。。。 勉強になります。
guest

0

わからないときはリファレンスを探しましょう。

【マーカー  |  Google Maps JavaScript API  |  Google Developers】
https://developers.google.com/maps/documentation/javascript/markers?hl=ja#simple_icons

【Google Maps JavaScript API マーカー 画像 - Google 検索】
https://www.google.co.jp/search?num=100&safe=off&q=Google+Maps+JavaScript+API+マーカー+画像

投稿2018/01/18 01:59

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

nunuco

2018/01/18 05:13

勉強不足ですみません、リファレンスやいろいろなブログもも読んでみてあれこれ自分でも試してみたのですがですがそれでも意味が分からず質問させていただきました。 親切にありがとうございました。
kei344

2018/01/18 06:28

Google Maps JavaScript API は 3系統になってからもいくつか変更があったため、ブログ記事よりリファレンス、日本語版より英語版が正確/最新の可能性が高いです。なるべくそこから探して、ブログ記事などは書き方の参考程度に考えるのが良いと思います。(ブログ記事も日付の新しいものは問題ない可能性は高いです)
nunuco

2018/01/18 06:40

そうなのですね。 プログラムが全く読めないのでリファレンスもコピペするくらいしか使えなくて・・・。 勉強します。
guest

0

自己解決

function create_maker(latlng, label, html) { var image = './img/pin.png'; // マーカーを生成 var marker = new google.maps.Marker({position: latlng, map: map, title: label,icon: image}); // マーカーをクリックした時の処理 google.maps.event.addListener(marker, "click", function() { infowindow.setContent(html); infowindow.open(map, marker); }); gmarkers[i] = marker; i++; return marker; }

投稿2018/01/18 01:56

nunuco

総合スコア15

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問