티스토리 뷰
Google Maps Platform 시작하기
https://developers.google.com/maps/gmp-get-started?hl=ko
Google Maps Platform 시작하기 | Google Developers
의견 보내기 Google Maps Platform 시작하기 이 페이지에서는 Google Maps Platform의 API 및 SDK를 사용하기 위한 기본 필수 단계를 설명합니다. 빠른 시작 Google Cloud Console을 사용하여 결제 계정 또는 프로젝
developers.google.com
시작에 앞서 구글 API를 사용하기 위해서는 프로젝트를 등록하고 설정하여야 합니다.
Maps Embed API URL 만들기
다음은 Maps Embed API를 로드하는 URL의 예입니다.
- MAP_MODE지도 모드 .
- YOUR_API_KEY당신의 API 키로. 자세한 내용은 API 키 가져오기 를 참조하십시오 .
- PARAMETERS 지도 모드에 대한 필수 및 선택적 매개변수를 사용합니다.
iframe에 URL 추가
웹페이지에서 Maps Embed API를 사용하려면 구축한 URL을 iframe의 src속성 값으로 설정합니다. iframe height및 width속성을 사용하여 지도 크기를 제어합니다. 예를 들면 다음과 같습니다.
<iframe
width="450"
height="250"
frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/MAP_MODE?key=YOUR_API_KEY&PARAMETERS" allowfullscreen>
</iframe>
위의 iframe 샘플은 추가 속성을 사용합니다.
- allowfullscreen특정 지도 부분이 전체 화면으로 전환되도록 허용하는 속성입니다 .
- frameborder="0"및 속성을 사용 style="border:0"하여 지도 주변에서 표준 iframe 테두리를 제거합니다.
웹사이트의 구조와 디자인에 맞게 iframe의 크기를 조정할 수 있지만 일반적으로 방문자는 더 큰 지도와 더 쉽게 상호작용할 수 있습니다. 포함된 지도는 두 차원 모두에서 크기가 200픽셀 미만인 경우 지원되지 않습니다.
지도 모드 선택
요청 URL에서 사용할 다음 맵 모드 중 하나를 지정할 수 있습니다.
- place: 랜드마크, 비즈니스, 지리적 특징 또는 마을과 같은 특정 장소 또는 주소에 지도 핀을 표시합니다.
- view: 마커나 방향이 없는 지도를 반환합니다.
- directions: 지도에서 두 개 이상의 지정된 지점 사이의 경로와 거리 및 이동 시간을 표시합니다.
- streetview: 지정된 위치에서 대화형 파노라마 보기를 보여줍니다.
- search: 보이는 지도 영역에 대한 검색 결과를 보여줍니다.
place 방법
다음 매개변수를 사용할 수 있습니다.
매개변수 | 유형 | 설명 | 허용되는 값 |
q | 필수 | 지도 마커 위치를 정의합니다. | URL 이스케이프 처리된 장소 이름 , 주소, 플러스 코드 또는 장소 ID Maps Embed API는 공백을 이스케이프할 때 +와 둘 다 지원합니다. %20예를 들어 "City Hall, New York, NY"를 로 변환 하거나 더하기 코드 "849VCWC8+R9"를 로 변환 합니다.City+Hall,New+York,NY849VCWC8%2BR9 |
center | 선택 | 지도 보기의 중심을 정의합니다. | 쉼표로 구분된 위도 및 경도 값을 허용합니다. 예: .37.4218,-122.0840 |
zoom | 선택 | 지도의 초기 확대/축소 수준을 설정합니다. | 0(전 세계)에서 21 (개별 건물) 까지의 값 . 상한은 선택한 위치에서 사용 가능한 지도 데이터에 따라 다를 수 있습니다. |
maptype | 선택 | 로드할 지도 타일의 유형을 정의합니다. | roadmap(기본값) 또는satellite |
language | 선택 | UI 요소 및 지도 타일의 레이블 표시에 사용할 언어를 정의합니다. 기본적으로 방문자는 자신의 언어로 된 지도를 볼 수 있습니다. 이 매개변수는 일부 국가 타일에서만 지원됩니다. 요청된 특정 언어가 타일 세트에 대해 지원되지 않는 경우 해당 타일 세트의 기본 언어가 사용됩니다. | |
region | 선택 | 지정학적 민감도에 따라 표시할 적절한 테두리와 레이블을 정의합니다. | 2자리 ccTLD (최상위 도메인) 값 으로 지정된 지역 코드를 허용합니다 . |
장소 ID 매개변수
Maps Embed API는 장소 이름이나 주소를 제공하는 대신 장소 ID 사용을 지원합니다. 장소 ID는 장소를 고유하게 식별하는 안정적인 방법입니다. 자세한 내용은 Google Places API 문서 를 참조하세요 .
Maps Embed API는 다음 URL 매개변수에 대한 장소 ID를 허용합니다.
- q
- origin
- destination
- waypoints
장소 ID를 사용하려면 먼저 접두사를 추가해야 합니다 place_id : 다음 코드는 길찾기 요청의 출처로 New York City Hall을 지정합니다 origin=place_id:ChIJs--MqP1YwokRBwAhjXWIHn8.
- radius주어진 위도와 경도를 중심으로 파노라마를 검색할 반경을 미터 단위로 설정합니다. 유효한 값은 음이 아닌 정수입니다. 기본값은 50입니다.
- source스트리트 뷰 검색을 선택한 소스로 제한합니다. 유효한 값은 다음과 같습니다.
- default 스트리트 뷰의 기본 소스를 사용합니다. 검색은 특정 소스에 국한되지 않습니다.
- outdoor 야외 컬렉션으로 검색을 제한합니다. 실내 컬렉션은 검색 결과에 포함되지 않습니다. 지정된 위치에 야외 파노라마가 없을 수 있습니다. 또한 검색은 파노라마가 실내인지 실외인지 확인할 수 있는 경우에만 파노라마를 반환합니다. 예를 들어, PhotoSpheres는 실내인지 실외인지 알 수 없기 때문에 반환되지 않습니다.
Place ID는 검색 결과에 따라 지도의 변동이 발생하지 않고 정확한 지점을 의미하므로 신뢰성이 높습니다.
하지만, Google 지도 데이터베이스의 대규모 업데이트로 인해 변경될 수 있고, 12개월 이상 된 Place ID는 새로 고치는 것이 좋습니다. (유효하지 않을 수 있음) 이렇듯 각각의 장단점이 있으니 확인하고 사용하는 것이 좋습니다.
특히 해당 사업장이 폐업하거나 새 위치로 이전하는 경우에도 Place ID는 더 이상 사용되지 않을 수 있습니다.
이렇게 Place ID가 유효하지 않은 경우 API는 NOT_FOUND를 응답합니다.
사용방법
https://developers.google.com/maps/documentation/embed/embedding-map?hl=ko
Embedding a map | Maps Embed API | Google Developers
Easily embed and customize Google Maps on your web page or blog by setting the Google Maps Embed API URL.
developers.google.com
'오늘도 개발자 > 프론트앤드 디자인' 카테고리의 다른 글
무료 웹디자인 사이트 (0) | 2019.01.05 |
---|---|
디자인 분위기를 확 바꿔줄 프리 텍스처 재료 정리 (0) | 2019.01.05 |
[작성 예정] Material Design (0) | 2018.09.20 |
[프론트앤드 디자인 - 용어]Above the fold & below the fold (0) | 2018.09.01 |
- Total
- Today
- Yesterday
- CSPRNG
- 빛의성당
- 스프레드연산자
- 도스 코파스
- 라이트세일
- 이전설치
- WordPress
- 고흐1인칭시점
- 지대공
- 썸머노트
- url복사
- php
- URL디코딩
- FTP권한문제
- 빈화면
- MySQL
- URL인코딩
- Lighitsail
- wordpress #워드프레스 #url
- 워드프레스
- ontent
- 이사
- wp-members
- Theme Customization
- 사용자정의하기
- 코스모스팜
- 11번가 아마존 #우주패스 #우주쓰레기
- Sanitize
- 한빛미디어
- 철거
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |