728x90
1. 구글 맵 API 발급
https://developers.google.com/maps?hl=ko
Google Maps Platform | Google for Developers
수백만 개의 웹사이트와 앱이 Google Maps Platform을 사용하여 사용자에게 효과적인 서비스 환경을 제공하고 있습니다.
developers.google.com
위 사이트에서 API KEY 발급 받는다
2. 구글맵 기본 소스 적용
구글 맵에서 지원하는 기본 소스
<!DOCTYPE html>
<html>
<head>
<title>Simple Marker</title>
<!-- The callback parameter is required, so we use console.debug as a noop -->
<script async src="https://maps.googleapis.com/maps/api/js?key={나의API KEY}&callback=console.debug&libraries=maps,marker&v=beta">
</script>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
gmp-map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<gmp-map center="40.12150192260742,-100.45039367675781" zoom="4" map-id="DEMO_MAP_ID">
<gmp-advanced-marker position="40.12150192260742,-100.45039367675781" title="My location"></gmp-advanced-marker>
</gmp-map>
</body>
</html>'API사용' 카테고리의 다른 글
| [Mapbox] 맵 박스에 행정안전구역 범죄주의구간 표시하기 (0) | 2025.03.21 |
|---|---|
| [Mapbox] 맵 박스 지도 위성사진으로 교체하기 (0) | 2025.03.14 |
| [Mapbox] 맵 박스 눈/비 내리는 효과 예제 (0) | 2025.03.13 |
| [Mapbox] 맵 박스 3D 건물 세우기 예제 (0) | 2025.03.13 |
| [Mapbox] 맵 박스 기본 사용법 및 셋팅하기 (0) | 2025.03.13 |
