Google Maps API - 하나의 infoWindow 열기

Question

jQuery를 사용하여 Google Maps API를 사이트에 통합하기위한 SitePoint 자습서를 따르고 있습니다. 한 가지 예외를 제외하고는 모든 것이 잘 작동하고 있습니다. 새로운 마커마다 별도의 마커가 열립니다 정보창을 닫지 않고 나는 단지 하나의 창이 한 번에 열리는 방법을 알아 내려고하고있다. 내가 여기에이 문제를 확인했습니다 http://www.sitepoint.com/google-maps-api-jquery/

:

여기에 문제의 튜토리얼의 Have just one InfoWindow open in Google Maps API v3을하지만 (내가 쉽게 잘못 해석 한 수)가 답을 따라 내 문제를 해결할 수 없습니다.

내 코드는 다음과 같습니다

$(document).ready(function(){ 
    var MYMAP = { 
    map: null, 
    bounds: null 
} 

MYMAP.init = function(selector, latLng, zoom) { 
    var myOptions = { 
    zoom:zoom, 
    center: latLng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 

    this.map = new google.maps.Map($(selector)[0], myOptions); 
    this.bounds = new google.maps.LatLngBounds();  
} 

MYMAP.placeMarkers = function(filename) { 
    $.get(filename, function(json){ 
    $.each(json, function(i,loc){ 
     var marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(loc.location.merchant_location.latitude, loc.location.merchant_location.longitude), 
     map: MYMAP.map, 
     title: loc.deal.subject 
     }); 

     var arrMarkers = []; 
     arrMarkers[i] = marker; 
     var infoWindow = new google.maps.InfoWindow({ 
     content: "<h3>" + loc.deal.subject + "</h3><p>" + loc.location.merchant_location.address + "</p>" 
     }); 

     var arrInfoWindows = []; 
     arrInfoWindows[i] = infoWindow; 
     google.maps.event.addListener(marker, 'click', function(){ 
     infoWindow.open(MYMAP.map,marker); 
     }); 
    });   
    }, "json"); 
} 

$("#map").css({ 
    height: 500, 
    width: 600 
}); 

var myLatLng = new google.maps.LatLng(#{@deals.first.merchant_locations.first.latitude},#{@deals.first.merchant_locations.first.longitude}); 
MYMAP.init('#map', myLatLng, 11); 
MYMAP.placeMarkers('/more_deals/get_locations/#{@market.id}'); 

});

도움을 주시면 감사하겠습니다. 감사합니다.

Answer 1

.each() 루프 내에 infowindow를 만들고 있습니다. 대신, 하나의 정보창을 그 루프 밖으로 생성하십시오. 그런 다음 이벤트 리스너에서 매번 전역 정보창의 내용을 업데이트하십시오.

MYMAP.init = function(selector, latLng, zoom) { 
    var myOptions = { 
    zoom:zoom, 
    center: latLng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 

    this.map = new google.maps.Map($(selector)[0], myOptions); 
    this.bounds = new google.maps.LatLngBounds();  
} 

MYMAP.placeMarkers = function(filename) { 
    $.get(filename, function(json){ 
    var infoWindow = new google.maps.InfoWindow({ 
      content: "" 
     }); 

    $.each(json, function(i,loc){ 
     var marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(loc.location.merchant_location.latitude, loc.location.merchant_location.longitude), 
     map: MYMAP.map, 
     title: loc.deal.subject 
     }); 

     bindInfoWindow(marker, MYMAP.map, infoWindow, "<h3>" + loc.deal.subject + "</h3><p>" + loc.location.merchant_location.address + "</p>"); 
    });   
    }, "json"); 
} 

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

$("#map").css({ 
    height: 500, 
    width: 600 
}); 

var myLatLng = new google.maps.LatLng(#{@deals.first.merchant_locations.first.latitude},#{@deals.first.merchant_locations.first.longitude}); 
MYMAP.init('#map', myLatLng, 11); 
MYMAP.placeMarkers('/more_deals/get_locations/#{@market.id}'); 

Answer 2

는 한 개의 InfoWindow 객체를 생성합니다. 수정 된 코드.

MYMAP.init = function(selector, latLng, zoom) { 
    var myOptions = { 
    zoom:zoom, 
    center: latLng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 

    this.map = new google.maps.Map($(selector)[0], myOptions); 
    this.bounds = new google.maps.LatLngBounds();  
} 

MYMAP.placeMarkers = function(filename) { 

var infoWindow = new google.maps.InfoWindow(); 

    $.get(filename, function(json){ 
    $.each(json, function(i,loc){ 
     var marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(loc.location.merchant_location.latitude, loc.location.merchant_location.longitude), 
     map: MYMAP.map, 
     title: loc.deal.subject 
     }); 

     var arrMarkers = []; 
     arrMarkers[i] = marker; 


     google.maps.event.addListener(marker, 'click', function(){ 
     infoWindow.setContent (
     "<h3>" + loc.deal.subject + "</h3><p>" + loc.location.merchant_location.address + "</p>" 
    ); 
     infoWindow.open(MYMAP.map,marker); 
     }); 
    });   
    }, "json"); 
} 

$("#map").css({ 
    height: 500, 
    width: 600 
});