본문 바로가기
JavaScript

[JavaScript] 구글 지도 만들기 google maps API

by dev또리 2023. 5. 18.
728x90

구글 지도(Google Maps)는 구글에서 제공하는 글로벌 지도 서비스다.

네이버나 카카오에서 제공하는 지도 서비스와 달리 국내 지도 뿐만 아니라 해외 지도까지 제공하기 때문에

전 세계 사용자를 대상으로 하는 애플리케이션을 개발할 때 특히 유용하게 사용할 수 있다.

 

 

API 키 발급 받기

 

구글 Maps API를 사용하려면 우선 구글에서 발급해주는 API 키가 필요하다.

아래 구글 클라우드 콘솔(Google Cloud Console) 링크로 들어가면 API 키를 발급받을 수 있다.

 

Google 클라우드 플랫폼

로그인 Google 클라우드 플랫폼으로 이동

accounts.google.com

 

지도를 보여줄 구역 지정

우선 웹페이지 상에서 구글 지도를 어디에 보여줄 지를 결정하고 이 구역에 표시를 해줘야한다.

HTML 문서 상에서 지도를 보여줄 <div> 요소의 id 속성으로 map으로 설정해준다.

 

index.html

<body>
  <div id="map" style="height: 600px;"></div>
</body>

<div> 요소의 높이를 CSS로 지정해주어야 한다.

비어있는 <div> 요소는 높이의 기본값은 0이 되기 때문에 구글 지도가 절대 화면 상에 나타나지 않을 것이기 때문이다.

 

 

구글 Maps API 스크립트 불러오기

이제 HTML 문서에 2개의 자바스크립트 파일을 불러오자.

첫번째 <script> 요소는 Google Maps API를 사용하기 위해 로컬에서 작성할 코드를 불러오기 위함이고,

두번째 <script> 요소는 원격에 있는 구글 서버로 부터 Google Maps API의 코드를 내려받기 위함이다.

 

index.html

<head>
  <script defer src="./index.js"></script>
  <script
    defer
    src="https://maps.googleapis.com/maps/api/js?key=<API 키>&callback=initMap"
  ></script>
</head>

 

구글 Google Maps API의 주소에는 2개의 파라미터를 명시해줘야 한다. 

key 파라미터에는 발급받은 API 키를 넣어주고, callback 파라미터에는 Google Maps API 코드의 다운로드가 완료되면

호출되야하는 함수의 이름을 넣어야 한다.

많이 사용하는 initMap으로 설정해주었지만 원하는 함수명을 아무거나 사용해도 무방하다.

 

 

구글 지도 보여주기

index.js 파일을 만들고 콜백 함수의 코드를 작성해보자.

위에서 initMap을 함수명으로 사용했기 때문에, window 객체의 initMap 속성에 콜백 함수를 할당하고 있다.

 

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

 

document.getElementById("map")은 HTML 문서 상에서 id 속성이 map인 <div> 요소를 찾아서 반환한다.

이 것을 google.maps.Map() 생성자의 인자로 넘겨서 호출하면 구글 지도 객체를 얻을 수 있다.

이 생성자 함수의 두 번째 인자로 구글 지도를 어떻게 보여줄건지 옵션을 넘길 수 있다. 

center 옵션에 지도의 중앙 위치의 위도 경도를 설정해주고, zoom 옵션에 지도를 얼마나 가깝게 볼 건지를 설정해줄 수 있다.

여기까지 해주면 웹페이지에 구글 지도가 나타나고 그 안에 서울시에 보일 것이다.

 

 

마커로 위치 표시하기

구글 지도에서 특징 위치를 표시할 때는 마커(Marker)라는 것을 사용할 수 있다. 

google.maps.Marker() 생성자 함수에 마커를 놓고 싶은 위치의 위경도와 라벨(label) 그리고 위에서 생성한 지도 객체를 넘기면 된다.

예를 들어, 서울에 있는 7곳의 쇼핑몰을 구글 지도에 마커로 표시해보자.

 

window.initMap = function () {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 37.5400456, lng: 126.9921017 },
    zoom: 10,
  });
  
  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,
    });
  });
  };

 

이제 구글 지도에 서로 다른 알파벳으로 시작하는 7개의 마커📍가 나타날 것이다.

 

 

 

클릭 시 정보 보여주기

 

각 마커를 클릭했을 때 그 위치에 대한 부가적인 정보를 제공하면 매우 유용할 것이다.

이럴 때는 구글 지도에서 정보창(Info Window)이라 것을 사용할 수 있다.

우선 google.maps.InfoWindow() 생성자로 정보창을 하나 생성한다.

그 다음, 각 마커의 클릭(click) 이벤트가 발생하면 정보창이 뜨도록 설정해주자.

 

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

  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 },
  ];

  const bounds = new google.maps.LatLngBounds();
  const infowindow = new google.maps.InfoWindow();

  malls.forEach(({ label, name, lat, lng }) => {
    const marker = new google.maps.Marker({
      position: { lat, lng },
      label,
      map,
    });
    bounds.extend(marker.position);

    marker.addListener("click", () => {
      infowindow.setContent(name);
      infowindow.open({
        anchor: marker,
        map,
      });
    });
  });

  map.fitBounds(bounds);
};

 

 

728x90
저작자표시 비영리 변경금지

'JavaScript' 카테고리의 다른 글

[JavaScript] resize, ResizeObserver  (0) 2023.05.29
[JavaScript] 자바스크립트 대화상자 명령어  (0) 2023.05.23
[JavaScript] this 이해하기  (0) 2023.05.10
[JavaScript] 이벤트리스너(EventListener)  (0) 2023.05.09
[JavaScript] 자바스크립트 라이브러리 핵심 정리  (0) 2023.05.03

관련글

댓글

티스토리툴바