[Kakao] 지도 - 마커에 인포윈도우 표시하기 > API

본문 바로가기
사이트 내 전체검색

API

[Kakao] 지도 - 마커에 인포윈도우 표시하기

페이지 정보

profile_image
작성자 관리자
댓글 0건 조회 2,925회 작성일 22-03-25 13:47

본문

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=APP KEY"></script>

<script>
var lat_y = '좌표값';
var lng_x = '좌표값';

var mapContainer = document.getElementById('map'), // 지도를 표시할 div
    mapOption = {
        center: new kakao.maps.LatLng(lat_y, lng_x), // 지도의 중심좌표
        level: 1 // 지도의 확대 레벨
    };

var map = new kakao.maps.Map(mapContainer, mapOption);

// 마커가 표시될 위치입니다
var markerPosition  = new kakao.maps.LatLng(lat_y, lng_x);

// 마커를 생성합니다
var marker = new kakao.maps.Marker({
    position: markerPosition
});

// 마커가 지도 위에 표시되도록 설정합니다
marker.setMap(map);

var iwContent = '<div>문자</div>', // 인포윈도우에 표출될 내용으로 HTML 문자열이나 document element가 가능합니다
    iwPosition = new kakao.maps.LatLng(lat_y, lng_x); //인포윈도우 표시 위치입니다

// 인포윈도우를 생성합니다
var infowindow = new kakao.maps.InfoWindow({
    position : iwPosition,
    content : iwContent
});
 
// 마커 위에 인포윈도우를 표시합니다. 두번째 파라미터인 marker를 넣어주지 않으면 지도 위에 표시됩니다
infowindow.open(map, marker);
</script>

댓글목록

등록된 댓글이 없습니다.

회원로그인

회원가입

Copyright © neion.co.kr All rights reserved.