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

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

ただいまの
回答率

90.49%

  • JavaScript

    20851questions

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

  • API

    1851questions

    APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

  • Google

    855questions

    Googleは、アメリカ合衆国に位置する、インターネット関連のサービスや製品を提供している企業です。検索エンジンからアプリケーションの提供まで、多岐にわたるサービスを提供しています。

Google Maps API 複数マーカーに情報ウィンドウをつける

受付中

回答 1

投稿 編集

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

rieley

score 2

前提・実現したいこと

googlemap apiを使用してのマップ表示です。

JSで複数マーカーに対しての個別の情報ウィンドウ表示
をしたいです。

発生している問題・エラーメッセージ

name

 
はまとめて表示できたのですが、情報ウィンドウの

content


の表示方法がわかりません。
(情報ウィンドウの内容は個別に変えます。)

該当のソースコード

var currentWindow = null;
function initMap(){
  var myOptions = {
    zoom: 6,   // 任意のズーム率
    center: new google.maps.LatLng(22.057437, 77.209021),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: false
  };
  var map = new google.maps.Map(document.getElementById("map"), myOptions);
  var markers = [
    ['タージマハル', 27.175052, 78.042544,'flag.png'],
    ['サンプル1', 28.175052, 79.042544,'flag.png'],
  ['サンプル2', 29.175052, 79.042544,'flag.png'],
  ['サンプル3', 30.175052, 79.042544,'flag.png'],
  ['サンプル4', 31.175052, 79.042544,'flag.png']
  ];

  for (var i = 0; i < markers.length; i++) {
    var name = markers[i][0];
    var latlng = new google.maps.LatLng(markers[i][1],markers[i][2]);
    var icons = markers[i][3];
    //var contents = content[i][4];
    createMarker(name,latlng,icons,map)
  }
}
var contentString = '<div id="content">'+
      '<div id="siteNotice">'+
      '</div>'+
      '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
      '<div id="bodyContent">'+
      '<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
      'https://en.wikipedia.org/w/index.php?title=Uluru</a> '+
      '(last visited June 22, 2009).</p>'+
      '</div>'+
      '</div>';

function createMarker(name,latlng,icons,map){
  var infoWindow = new google.maps.InfoWindow({
    content: contentString
  });

  var marker = new google.maps.Marker({
    position: latlng,
    icon:icons,
    map: map,
    //content: contents
  });

  google.maps.event.addListener(marker, 'mouseover', function() {
  if (currentWindow) {
      currentWindow.close();
      }
  infoWindow.setContent(name);
  infoWindow.open(map,marker);
  currentWindow = infoWindow;
  });
  }
  google.maps.event.addDomListener(window, 'load', initialize);

コード修正しました。

var currentWindow = null;
function initMap(){
  var myOptions = {
    zoom: 6,   // 任意のズーム率
    center: new google.maps.LatLng(22.057437, 77.209021),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: false
  };
  var map = new google.maps.Map(document.getElementById("map"), myOptions);

  var markers = [
    ['タージマハル', 27.175052, 78.042544,'flag.png','<div id="content">'+
          '<div id="siteNotice">'+
          '</div>'+
          '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
          '<div id="bodyContent">'+
          '<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
          'https://en.wikipedia.org/w/index.php?title=Uluru</a> '+
          '(last visited June 22, 2009).</p>'+
          '</div>'+
          '</div>'
        ],
    ['サンプル1', 28.175052, 79.042544,'flag.png'],
    ['サンプル2', 29.175052, 79.042544,'flag.png'],
    ['サンプル3', 30.175052, 79.042544,'flag.png'],
    ['サンプル4', 31.175052, 79.042544,'flag.png']
  ];

  for (var i = 0; i < markers.length; i++) {
    var name = markers[i][0];
    var latlng = new google.maps.LatLng(markers[i][1],markers[i][2]);
    var icons = markers[i][3];
    var contents = content[i][4];
    createMarker(name,latlng,icons,map,contents)
  }
}

function createMarker(name,latlng,icons,map,contents){
  var infoWindow = new google.maps.InfoWindow({
    content : "<div id='infoWindow'>ウィンドウ内に表示する文字列<br>" +
              "<span>文字色の変更</span><br>" +
              "<img src='画像のパス'><div>"
  });

  var marker = new google.maps.Marker({
    position: latlng,
    icon:icons,
    map: map,
    // content: contents,
  });

  google.maps.event.addListener(marker, 'mouseover', function() {
  if (currentWindow) {
      currentWindow.close();
      }
  infoWindow.setContent(name,content);
  infoWindow.open(map,marker);
  currentWindow = infoWindow;
  });
  }
  google.maps.event.addDomListener(window, 'load', initialize);

試したこと

contentString

 
は本家サイトを参考にしています。
https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple?hl=ja

補足情報(言語/FW/ツール等のバージョンなど)

より詳細な情報

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2017/03/26 00:39

    質問文のコードはコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

    キャンセル

回答 1

0

変数contentString が固定値なので、関数createMarker の引き数を一つ増やしてそこに渡すようにすればマーカーごとに個別の情報が載せられるのでは?

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/03/26 02:56


    関数createMarker の引き数を一つ増やして↓下記に修正しました。
    間違い指摘していただけると助かります。
    (現在マーカーも表示されなくなっていますが、どのように修正していいのかわかりません)
    ```
    var currentWindow = null;
    function initMap(){
    var myOptions = {
    zoom: 6, // 任意のズーム率
    center: new google.maps.LatLng(22.057437, 77.209021),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: false
    };
    var map = new google.maps.Map(document.getElementById("map"), myOptions);
    var markers = [
    ['タージマハル', 27.175052, 78.042544,'flag.png','<div id="content">'+
    '<div id="siteNotice">'+
    '</div>'+
    '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
    '<div id="bodyContent">'+
    '<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&amp;oldid=297882194&quot;&gt;&#039;+
    'https://en.wikipedia.org/w/index.php?title=Uluru&lt;/a&gt; '+
    '(last visited June 22, 2009).</p>'+
    '</div>'+
    '</div>'
    ],
    ['サンプル1', 28.175052, 79.042544,'flag.png'],
    ['サンプル2', 29.175052, 79.042544,'flag.png'],
    ['サンプル3', 30.175052, 79.042544,'flag.png'],
    ['サンプル4', 31.175052, 79.042544,'flag.png']
    ];

    for (var i = 0; i < markers.length; i++) {
    var name = markers[i][0];
    var latlng = new google.maps.LatLng(markers[i][1],markers[i][2]);
    var icons = markers[i][3];
    var contents = content[i][4];
    createMarker(name,latlng,icons,map,contents)
    }
    }

    function createMarker(name,latlng,icons,map,contents){
    var infoWindow = new google.maps.InfoWindow(
    );

    var marker = new google.maps.Marker({
    position: latlng,
    icon:icons,
    map: map,
    // content: contents,
    });

    google.maps.event.addListener(marker, 'mouseover', function() {
    if (currentWindow) {
    currentWindow.close();
    }
    infoWindow.setContent(name,content);
    infoWindow.open(map,marker);
    currentWindow = infoWindow;
    });
    }
    google.maps.event.addDomListener(window, 'load', initialize);
    ```

    キャンセル

  • 2017/03/26 02:58

    コメント欄ではコードブロックが使えないため、質問に追記していただけませんか?(元のコードは消さないでくださいね)

    キャンセル

  • 2017/03/26 03:02

    1.var contents = content[i][4]; としていますが提示されているコードには「content」という変数はここにしか出てきません(定義されていません)。
    2.new google.maps.InfoWindow の部分でコンテンツを渡していません。

    この2点がとりあえず問題です。

    キャンセル

  • 2017/03/28 02:53

    コメント欄ではコードブロックが使えないため→大変失礼しました。

    ご指摘ありがとうございます。
    2点修正してみました。
    (まだマーカーが一切表示されません)

    キャンセル

  • 2017/03/28 02:59

    質問文に追記されたものは 「content[i][4];」がそのままですが、エラーが出ていませんか?デベロッパーツールで確認してみてください。http://eng-entrance.com/javascript-display-error

    InfoWindow についても、引数「contents」を使用していないので、表示されたとしても同じ内容になりますよ。

    キャンセル

同じタグがついた質問を見る

  • JavaScript

    20851questions

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

  • API

    1851questions

    APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

  • Google

    855questions

    Googleは、アメリカ合衆国に位置する、インターネット関連のサービスや製品を提供している企業です。検索エンジンからアプリケーションの提供まで、多岐にわたるサービスを提供しています。