구글 지도 API키 생성 및 기초 HTML 예제
안녕하세요.
고코더 입니다.
구글 맵은 가장 잘만들어진 지도 프로그램입니다.
전세계 모든 장소의 메타 데이터를 모았고
성능도 완벽합니다.
한국은 다음,네이버가 독자적으로
최적화된 국내에 지도 서비스를 시행 하고 있지만
글로벌 서비스를 만든다고 하면
구글맵이 최선일 것입니다.
기능면에서도 많은게 포함되어 있기 때문에
사실 구글 맵으로 제작하는게 더 좋습니다.
그래서 오늘은 구글 개발자 센터에서
구글 맵 API를 발급 받고
간단하게 실행해보겠습니다.
1. 구글 맵 API 발급
해당 사이트에 접속합니다.
구글 개발자 센터 입니다.
당연히 구글 로그인이 필수 입니다.
그리고 WebAPI에서
Google Maps Javascript API를 선택해주세요
우리가 흔히 사용하는
구글 지도 활용 범위는
아래에처럼 "지도에 지형지물과 임의의 데이터를 시각화합니다."
이 쪽 부분입니다.
그러면 이제 다음 화면에서 키가져오기를 클릭 합니다.
새로운 프로젝트명을 입력합니다.
그러면 API 키가 발급 됩니다.
2. 구글 지도 테스트
키를 발급받았다면
아래 HTML에 API키를 교체해서
한번 웹브라우저에 실행해보세요.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | <!DOCTYPE html> <html> <head> <title>Simple Map</title> <meta name="viewport" content="initial-scale=1.0"> <meta charset="utf-8"> <style> /* Always set the map height explicitly to define the size of the div * element that contains the map. */ #map { height: 100%; } /* Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; } </style> </head> <body> <div id="map"></div> <script> var map; function initMap() { map = new google.maps.Map(document.getElementById('map'), { center: {lat: -34.397, lng: 150.644}, zoom: 8 }); } </script> <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script> </body> </html> | cs |
이렇게 구글 지도가 활성화 됩니다.
이젠 여기서 구글 API가 제공하는 옵션 값만 추가해
필요한 기능을 만들어 주면 되겠네요.
그리고 API키 호출 제한 수가 있기 때문에
API 제한설정을 통해
HTTP 리퍼러 승인한 사이트에서만
실행 할 수 있도록
만들어주세요
그럼 API 키 발급과 동시에 가장 기초적인 구글지도 예제를 실행해보았습니다.
마무리
국내 메인 포털의 데이터를 활용할 이유가 없다면
구글 지도 API로 사이트를 개발하는걸 추천 드립니다.
'IT_Developers > 개발기타' 카테고리의 다른 글
| 사이트 - 무료 HTML 디자인 템플릿 모음 / webjangi.com (0) | 2019.03.12 |
|---|---|
| 위젯 - RSS URL로 HTML 리스트 출력 / rssdog.com (0) | 2019.03.08 |
| 에디터플러스 - editplus 무설치 버전으로 만들기 (0) | 2019.03.01 |
| 웨비나란 - Web + Seminar / 온라인 세미나 (0) | 2019.02.19 |
| 개발기타 - 인프런 무료강의 모음 (0) | 2019.02.14 |
댓글