API를 사용하여 웹 페이지에 Google지도를 추가하는 방법

위치 마커가있는 Google지도를 웹 페이지에 삽입하려면 Google에서 특수 소프트웨어 키를 얻은 다음 관련 JavaScript를 페이지에 추가해야합니다. 프로세스는 간단하지만 최소한 HTML 및 JavaScript에 대한 간단한 배경 지식이 있으면 도움이됩니다.

Google Maps API 키 얻기

지도 및 위치 조회 요청으로 인해 서버를 보호하기 위해 Google은지도 데이터베이스에 대한 액세스를 제한합니다. 애플리케이션 프로그래밍 인터페이스를 사용하여지도 서버에서 데이터를 요청하려면 고유 키를 얻으려면 Google에 개발자로 등록해야합니다. API 키는 Google 서버에 대한 강력한 액세스 (예 : 웹 앱 개발)가 필요한 경우가 아니면 무료입니다.

API 키를 등록하려면 :

Google Cloud Platform 콘솔로 이동하고 Google 계정으로 로그인 한 후 새 프로젝트를 만들거나 기존 프로젝트를 선택합니다.
개인 및 전문적인 계속 API 및 관련 서비스를 활성화합니다.
에 신임장 페이지, 얻을 API 키. 필요에 따라 키에 관련 제한을 설정합니다.
Google에서 권장하는 권장 사항을 사용하여 API 키를 보호하세요.

무료 할당량이 허용하는 것보다 더 자주지도를 표시해야한다고 생각되는 경우 Google과 결제 계약을 설정하세요. 대부분의 웹 사이트, 특히 트래픽이 적은 블로그 나 틈새 사이트는 할당량을 많이 소비하지 않습니다.

웹 페이지에 JavaScript 삽입

웹 페이지의 HTML 문서 BODY 섹션에 다음 코드를 삽입합니다.

//지도 초기화 및 추가
function initMap () {
// 플래그 위치
var flag = {lat : XXX, lng : YYY};
// 플래그를 중심으로하는지도
var map = new google.maps.Map (
document.getElementById ( 'map'), {zoom : 4, center : flag});
// 플래그에 위치한 마커
var marker = new google.maps.Marker ({position : flag, map : map});
}