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

Question

###前提・実現したいこと
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/ツール等のバージョンなど)
より詳細な情報

Comments

[kei344]

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

Answer 1

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

Comments

[rieley]

関数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&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(
);

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);
```

[kei344]

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

[kei344]

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

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

[rieley]

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

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

[kei344]

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

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