마커를 클릭하면 Google지도 InfoWindow가 표시되지 않습니다.

Question

myLats, (위도) myLngs (경도) 및 myLocs (주소 문자열)의 배열이 세 개 있습니다. 예 : . 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 Map API V3 Google지도 API를 처음 사용하는 경우

의 88 이후, 나는 그 책을 읽고 추천 할 것입니다 페이지의 문제와 해결책을 찾을 수 있습니다

, 그것은 나에게 좋은 출발을주고, 내가 많이 피 "일반적인"실수.

희망이 도움이됩니다. 짐

Answer 2

기능 내에 마커를 추가하고 'var'를 추가하고 < = 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); 
    }); 
}