안녕하세요,
최근 장고로 웹 프로그래밍에 입문해서 Javascript CSS 이것저것 만져보고 있는 학생입니다.
질문을 드리고자 하는데, 시작한지 2달밖에 되지 않아서 참 답변하시기에 민망할 정도일지도 모르겠습니다만 양해를 부탁드립니다 ㅠㅠ.
Django View 단에서 json형식으로 작성한 위치 정보를 javascript에서 파싱해서
특정 버튼을 누르면 모든 marker가 지도에 뜨게하는것과 사라지게 하는것
사용자 위치 주변에 있는 marker가 지도에 뜨게하도록 설정하는것까지는 문서를 읽어가면서 어떻게 해결이 가능했는데
사용자 위치 주변에 있는 Marker를 지도에 띄움과 동시에 infowindow가 hover 없이도 항상 떠있게 하려면 함수를 어떻게 구현해야할지 도저히 감이 잡히지 않아 질문드립니다.
Infowindow()를 사용해야하는건 알겠으나 제가 짠 코드 변수 scope를 봤을때 infowindow만 따로 조작할 수는 없을거같아서요.
checknearCafeMarker()함수에서 infowindow만 hover 유무 상관없이 항상 떠있게, 또는 마커와 함께 사라지는 형식의 기능을 구현하고 싶은데 도움을 요청드려도 될까요?
시작한지 얼마 되지않아 개념이 많이 부족한 점 이해를 부탁드립니다. ㅠㅠㅠ
구현하려고 주먹구구식으로 하다보니 기본이 많이 뒤쳐지는게 사실입니다만
일단 프로젝트로 구현을 해야하는 문제가 있어 결례를 무릅쓰고 질문을 드립니다.
고견을 부탁드립니다! 감사합니다 
//cafe 마커 어레이
var cafemarkers = [];
//cafe 마크(현재위치 주변) 띄우기
var cafes = JSON.parse("{{ cafeJson|escapejs }}");
console.log(cafes);
//cafe 마크 이미지
var geocoder = new kakao.maps.services.Geocoder();
for (let i = 0; i < cafes.length; i++) {
geocoder.addressSearch(cafes[i].address, function(result, status){
if(status === kakao.maps.services.Status.OK){
var imageSrc =imageselector(cafes[i].category);
var imageSize = new kakao.maps.Size(24, 35);
var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize);
var coords = new kakao.maps.LatLng(result[0].y, result[0].x);
var cafemarker = new kakao.maps.Marker({
map: null,
position: coords,
title: cafes[i].title,
image: markerImage,
});
}
cafemarkers.push(cafemarker);
overraycustompark(cafemarker, cafes[i]);
});
}
function showCafeMarker() {
var radius = 2000;
var c1 = map.getCenter();
for (var i = 0; i < cafemarkers.length; i++) {
var c2 = cafemarkers[i].getPosition();
var poly = new kakao.maps.Polyline({
path: [c1, c2],
});
var dist = poly.getLength();
console.log(dist);
if (dist < radius) {
cafemarkers[i].setMap(map);
} else {
cafemarkers[i].setMap(null);
}
}
}
function checknearCafeMarker() {
var x = document.getElementById("nearcafe");
if (x.style.opacity === "1") {
x.style.opacity = "0.5";
showCafeMarker();
} else {
x.style.opacity = "1";
hideMarkers(cafemarkers);
}
}
//모든 cafe 마크 띄우기(save용)
function checkallCafeMarker() {
var x = document.getElementById("allcafe");
if (x.style.opacity === "1") {
x.style.opacity = "0.5";
showMarkers(cafemarkers);
} else {
x.style.opacity = "1";
hideMarkers(cafemarkers);
}
}