Google Maps InfoWindow가 잘못된지도에 표시됩니다.

Question

내 문제는 WP-Plugin에 있습니다. 같은 시간에 두 개 이상의지도가 열려있는 경우
과 같은 예가 표시됩니다. 마커 중 하나를 클릭하면 마지막으로 3 개의 게시물이 각자 자신의 위치를 ​​나타내는 미니 맵으로 표시됩니다. 마커 중 하나를 클릭하면 어떤지도에서 상관 없으므로 마지막 위치에 정보 창이 모두 표시됩니다. .

나는 다음 코드로지도를 초기화 :

function Initialize(lat, lng, zm, pid) {  
    geocoder = new google.maps.Geocoder(); 
    var latlng = new google.maps.LatLng(lat,lng); 
    var mapOptions = { 
     zoom: zm, 
     center: latlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 

    var name = "map_canvas" + pid; 

    map = new google.maps.Map(document.getElementById(name), mapOptions); 
} 

하고 다음과 같이 마커를 설정 : 좀 글로벌 같은 functionfile의 상단에

function AddMarker(lat, lng, address, title, link, image, target) { 

    var marker = new google.maps.Marker({ 
     map: map, 
     position: new google.maps.LatLng(lat, lng), 
     icon: new google.maps.MarkerImage(image), 
     title: title 
    }); 

    var infowindow = new google.maps.InfoWindow({ 
     content: '<a href="' + link + '" target="_' + target + '">' + title + '</a><br /><small><font color="#000000">' + address + '</font></small>', 
    }); 
    google.maps.event.addListener(marker, 'click', function() { 
     infowindow.open(map,marker); 
    }); 
} 

var map 스탠드, 그래서, 마커는 모두 오른쪽지도에 있지만 슬프게도 infowindows는 그들을 따라 가지 않을 것입니다 ...

다른 사람이 그런 것들을 경험했거나 어떻게 해결할 수 있을지 생각합니까?

Answer 1

귀하의 문제는이 때문이다. 복사본을 전달하고 그 대신에 사용

google.maps.event.addListener(marker, 'click', (function (m) { 
    return function() { 
     infowindow.open(m,marker); 
    }; 
}(map))); 

편집 :

는 상기 map 변수의 사본을 전달하는 즉시 호출 함수 표현식을 사용한다. 이 모든 것은 함수를 선언 한 다음 즉시 호출하여 map을 전달하는 것입니다.

function (m) { 
    return function() { 
     infowindow.open(m,marker); 
    }; 
}(map) 

그러나 전부는 JS 파서 함수식 아닌 함수 선언으로 판독되도록 () 래핑 될 필요가있다.

가 될 것 해결하는 또 다른 방법 :

이

function AddMarker(lat, lng, address, title, link, image, target) { 

    var marker = new google.maps.Marker({ 
     map: map, 
     position: new google.maps.LatLng(lat, lng), 
     icon: new google.maps.MarkerImage(image), 
     title: title 
    }); 

    var infowindow = new google.maps.InfoWindow({ 
     content: '<a href="' + link + '" target="_' + target + '">' + title + '</a><br /><small><font color="#000000">' + address + '</font></small>', 
    }); 

    // Add a function that returns a new function that uses a local 
    // copy of the passed in map. 
    var getMapClickListener = function (m) { 
     return function() { 
      infowindow.open(m, marker); 
     }; 
    }; 

    // Then use the new function when adding the handler. 
    google.maps.event.addListener(marker, 'click', getMapClickListener(map)); 
} 

Answer 2

난 name에 정확하게지도 이름을 할당하는 동안 pid을 올바르게 사용하면 각지도가 map 변수에 할당되고 각각 다른 하나를 재정의한다는 것이 문제라고 생각합니다.

당신이 유용하게 찾을 수있는 것은 키와의 PID를 사용하여지도를 개최 객체를 사용하는 것입니다 :

var mapHolder = {}; 
var name = "map_canvas" + pid; 
var mapHolder[pid] = new google.maps.Map(document.getElementById(name), mapOptions); 

그냥 pidaddMarker 함수에 전달하여 번거 로움없이 각 맵에 액세스 할 수 있는지 방법을 :

function AddMarker(lat, lng, address, title, link, image, target, pid) { 

    var marker = new google.maps.Marker({ 
    map: mapHolder[pid], 
    position: new google.maps.LatLng(lat, lng), 
    icon: new google.maps.MarkerImage(image), 
    title: title 
    }); 

    var infowindow = new google.maps.InfoWindow({ 
    content: // content 
    }); 

    google.maps.event.addListener(marker, 'click', function() { 
    infowindow.open(mapHolder[pid], marker); 
    }); 

} 

그런 식으로 모든 마커 및 정보창을 올바른지도에서 열어야합니다.

google.maps.event.addListener(marker, 'click', function() { 
    infowindow.open(map,marker); 
}); 

당신이 핸들러를 할당 할 때지도가 아니라 변수의 값을 클릭 한 map 변수에 액세스 :