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

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

ただいまの
回答率

89.20%

GoogleMapのinfoWindow、マーカー変更

解決済

回答 3

投稿

  • 評価
  • クリップ 1
  • VIEW 908

nunuco

score 14

いつもお世話になっております。
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);
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

+2

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/01/18 10:58

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

    キャンセル

  • 2018/01/18 14:14

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

    キャンセル

  • 2018/01/18 14:18

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

    キャンセル

  • 2018/01/18 15:39

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

    キャンセル

check解決した方法

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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 14:13

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

    キャンセル

  • 2018/01/18 15:28

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

    キャンセル

  • 2018/01/18 15:40

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

    キャンセル

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

  • ただいまの回答率 89.20%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる