JavaScript | Google map API - Marker, InfoWindow (마커, 설명 띄우기)

Marker 추가하기

• Marker 가이드 링크
  Adding a Google Map with a Marker to Your Website

예시

아래는 공식 문서에서 가져온 코드.

// 맵 생성하고 초기화하는 함수
function initMap() {
  // Uluru 위치
  const uluru = { lat: -25.344, lng: 131.031 };
  // Uluru가 center인 맵
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: uluru,
  });
  // Uluru에 위치하는 마커
  const marker = new google.maps.Marker({
    position: uluru,
    map: map,
  });
}

window.initMap = initMap;

Marker 추가 코드

아래 코드로 marker를 map에 추가한다.

const marker = new google.maps.Marker({
  position: uluru,
  map: map,
  title: '여기가 Uluru'
});

• position은 마커가 놓일 위치. position: { lat: 37.24253508424892, lng: 126.99 } 처럼 위도, 경도로 줄 수 있다.
• map에는 마커를 놓을 map 객체.
• title을 사용하면 마커에 마우스를 올렸을 때 띄울 문구를 적을 수 있다.

여러 개의 마커를 사용하려면 그만큼 marker 변수를 만들어 추가하면 됨.

InfoWindow

• Info Windows 가이드 링크
  Info Windows

Info Window 추가 코드

let infoWindow = new google.maps.InfoWindow({
  map:map,
  position:{ lat: 37.24253508424892,  lng: 126.99 },
  content: '여기가 어디게'
});

• setPosition, setContent 함수를 사용해 position, content를 설정해 줄 수도 있음.