マーカーがクリックされたときGoogle Maps InfoWindowが表示されない

Question

myLats、（緯度）myLngs（経度）、myLocs（アドレス文字列）の3つの配列があります。 myLats [0] = 53.3534751、myLngs [0] = -2.5682085、myLocs [0] = Longwood Rd Appleton Warrington。したがって、各配列の要素はすべて互いに数値的に対応しています。

私のinitialize（）関数でマップを構築するとき、私は正しい座標に複数のマーカーを配置するためにこれらをループします。また、クリックしたときにインフォウィンドウが表示される各マーカーを表示しようとしています。マーカーは単に表示されません。これに関する助けがあれば大いに感謝します。

コード：

function initialize() { 
    var myOptions = { 
     center: new google.maps.LatLng(54.00366, -2.547855), 
     zoom: 6, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions); 

    var marker, infowindow, i; 

    for (i = 0; i <= myLats.length; i++) { 
     marker = new google.maps.Marker({ 
      position: new google.maps.LatLng(myLats[i], myLngs[i]), 
      map: map, 
      clickable: true, 
      icon: '". url::base() ."resources/icons/accident.png', 
     }); 
     infowindow = new google.maps.InfoWindow({ 
      content: myLocs[i], 
     }); 
     google.maps.event.addListener(marker, 'click', function() { 
      infowindow.open(map, marker); 
     }); 
    } 
} 

Answer 1

つ以上のマーカーを扱う際の一般的な問題です。実際にはマーカーごとに新しいウィンドウを作成するのではなく、マーカーごとに単一のウィンドウを再定義する必要があります。

あなたはGoogle MapsのAPIを初めて使用する場合は、私はその本を読んで推薦以降Google Map API V3

の88ページの問題と解決策を見つけることができます、それは私に素晴らしいスタートを与えたと私はたくさんのを回避"一般的な"間違い。

これが役に立ちます。 ジム

Answer 2

関数内にマーカーを追加し、 'var'を追加し、i < = myLats.lengthをi < myLats.lengthに変更するなど、いくつかの変更を加えました。これらの変更が組み合わされて機能しました。

var myLats = [ 54.20366, 54.42366, 54.64366]; 
    var myLngs = [ -2.54788, -2.66788, -2.78788]; 
    var myLocs = [ "Loc a" , "Loc b" , "Loc c"]; 

function initialize() 
{ 
var myOptions = 
{ 
    center: new google.maps.LatLng(54.00366,-2.547855), 
    zoom: 6, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}; 
var map = new google.maps.Map(document.getElementById('map_canvas'),myOptions); 

var marker, infowindow, i; 

for (i=0; i < myLats.length; i++) 
{ 
    addMarker(i); 
} 
function addMarker(i) { 
    var marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(myLats[i],myLngs[i]), 
     map: map, 
     clickable: true, 
     //icon: '". url::base() ."resources/icons/accident.png', 
    }); 
    var infowindow = new google.maps.InfoWindow({ 
     content: myLocs[i] 
    }); 
    google.maps.event.addListener(marker, 'click', function() { 
     infowindow.open(map,marker); 
    }); 
} 
} 

しかし、私はあなたが唯一の情報ウィンドウ開いたままソリューションをしたい推測している、私はこれが最初に考え出した：

var myLats = [ 54.20366, 54.42366, 54.64366]; 
    var myLngs = [ -2.54788, -2.66788, -2.78788]; 
    var myLocs = [ "Loc a" , "Loc b" , "Loc c"]; 
    var map, marker, infowindow, i; 


function initialize() 
{ 
var myOptions = 
{ 
    center: new google.maps.LatLng(54.00366,-2.547855), 
    zoom: 6, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}; 
map = new google.maps.Map(document.getElementById('map_canvas'),myOptions); 


infowindow = new google.maps.InfoWindow({ }); 
for (i = 0; i < myLats.length; i++) { 
    addMarker(i); 
} 
} 

function addMarker(i) { 
    var marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(myLats[i],myLngs[i]), 
     map: map, 
     clickable: true 
     //icon: '". url::base() ."resources/icons/accident.png'  
    }); 

    google.maps.event.addListener(marker, 'click', function(event) { 
     infowindow.setContent(myLocs[i]); 
     infowindow.open(map,marker); 
    }); 
}