이전: google.load의 지도 모듈

2021년 10월 13일에 google.load에 '지도' 모듈을 제공하는 서비스가 사용 중지됩니다. 따라서 2021년 10월 13일 이후에 google.load에서 '지도' 모듈을 사용하려고 하면 오류('지도' 모듈은 지원되지 않습니다)가 표시되고 지도가 로드되지 않습니다. 잠재적인 서비스 중단을 방지하려면 대안 중 하나로 전환해야 합니다.

어떤 조치를 취해야 하나요?

먼저 google.load 로더를 로드하는 <script> 태그를 삭제한 다음 google.load 호출을 삭제합니다. 다른 용도로 Google 로더를 사용 중인 경우 로더 <script> 태그를 그대로 두어도 됩니다.

이어서 Maps JavaScript API를 로드하는 새로운 방법을 구현합니다(다음 옵션 중 하나 선택).

• <script> 태그를 사용하여 인라인 로드
• 다른 JavaScript 파일에서 동적 로드

현재 Google 로더를 사용하고 있는 예

다음 예는 현재 Google 로더를 사용하여 Maps JavaScript API를 로드하는 방법을 보여줍니다(두 개의 <script> 블록이 있음).

이전

<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load("maps", "3.exp", {
    "callback": initMap,
    "key": "YOUR_KEY",
    "libraries": "places,visualization"
});
function initMap() {
  // Google Maps JS API is loaded and available
}
</script>

<script> 태그를 사용하여 인라인 로드(권장)

이 접근 방식을 사용하면 페이지가 로드되는 동시에 Maps JavaScript API가 로드됩니다. 인라인 로드를 구현하려면 먼저 www.google.com/jsapi('이전')를 로드하는 <script> 태그를 다음 예에 표시된 <script> 태그로 바꿉니다.

<script async src="https://maps.googleapis.com/maps/api/js?libraries=places,visualization&key=YOUR_API_KEY&v=weekly&callback=initMap">
</script>

그런 다음 JavaScript 코드에서 더 이상 필요하지 않은 google.load 함수 호출을 삭제합니다. 다음 예는 지도 라이브러리가 성공적으로 로드되면 호출되는 빈 initMap() 함수를 보여줍니다.

<script type='text/javascript'>
function initMap() {
  // Google Maps JS API is loaded and available
}
</script>

관련 문서 참고하기

다른 JavaScript 파일에서 동적 로드

동적 로드를 사용하면 Maps JavaScript API가 로드되는 시점을 관리할 수 있습니다. 예를 들어 사용자가 버튼을 클릭하거나 다른 작업을 실행할 때까지 기다렸다가 Maps JavaScript API를 로드할 수 있습니다. 동적 로드를 구현하려면 먼저 www.google.com/jsapi('이전')를 로드하는 <script> 태그를 다음 예에 표시된 대로 <script> 태그를 프로그래매틱 방식으로 추가하는 코드로 바꿉니다.

var script = document.createElement('script');
script.src =
'https://maps.googleapis.com/maps/api/js?libraries=places,visualization&key=YOUR_API_KEY&v=weekly&callback=initMap';
script.async=true;

그러고 나서 다음과 같이 창 객체에 콜백 함수를 연결합니다.

window.initMap = function() {
  // Google Maps JS API is loaded and available
};

마지막으로 다음과 같이 페이지 헤더에 <script> 태그를 추가합니다.

document.head.appendChild(script);

관련 문서 참고하기