Google Map API

1. HTML

1) Google Map을 넣고 싶은 곳에다 태그 작성
2) Google Map에 관련된 JS 파일과 API 키값이 등록된 주소 등록
3) API 키값에 발급 받은 API 키값 입력

// 태그
<div id="map"></div>

// 링크 연결
<script src=""></script>
<script defer src="https://maps.googleapis.com/maps/api/js?key=(API키값)&callback=initMap"
</script>

2. JavaScript

1) Google Map에 관련된 JS 파일에 아래 코드 작성
2) lat, lng에 경도와 위도 작성, zoom은 확대를 의미
3) google.maps.Marker는 마커를 의미
4) google.maps.InfoWindow는 정보창을 의미
5) content를 통해 정보창을 커스텀 할 수 있다.
5-1) 클래스를 넣어 css로 스타일 수정이 가능하다.
6) pixelOffset은 정보창이 마커를 가릴 때 위치 조정

window.initMap = function () {
    const map = new google.maps.Map(document.getElementById("map"), {
        center: { lat: , lng: },
        zoom: 10,
    });

	// 마커 표시
    new google.maps.Marker({
        position: { lat: , lng: },
        map: map
    })

	// 정보창 표시
    new google.maps.InfoWindow({
        map:map,
        position:{ lat: , lng: },
        content:
            '<p class=""></p>' +
            '<a href="" class="">View on Google Maps</a>',
        pixelOffset: new google.maps.Size(0,-40)
    });
};

2-1. JavaScript - For Each

1) 반복문을 통해 여러 마커를 표시할 수 있다.
2) window.initMap = function () {}의 중괄호 안에 넣으면 된다.

 const malls = [
   {label: "C", name: "코엑스몰", lat: 37.5115557, lng: 127.0595261},
   {label: "G", name: "고투몰", lat: 37.5062379, lng: 127.0050378},
   {label: "D", name: "동대문시장", lat: 37.566596, lng: 127.007702},
   {label: "I", name: "IFC몰", lat: 37.5251644, lng: 126.9255491},
   {label: "L", name: "롯데월드타워몰", lat: 37.5125585, lng: 127.1025353},
   {label: "M", name: "명동지하상가", lat: 37.563692, lng: 126.9822107},
   {label: "T", name: "타임스퀘어", lat: 37.5173108, lng: 126.9033793},
  ];
  malls.forEach(({ label, name, lat, lng }) => {
    const marker = new google.maps.Marker({
      position: { lat, lng },
      label,
      map,
    });
  });

#참고자료

1) Google Map API 발급

• Google Map API

2) 참고자료를 통해 더 많은 정보 습득 가능!

• 웹 페이지에서 구글 지도 띄우기 - 출처 Daleseo