구글맵 자바스크립트 API를 이용하여 구글맵을 페이지에 띄우기 위해서는
세가지가 필요하다.
- 맵을 띄우기 위한 DOM element
- 구글맵 자바스크립트 API 로딩 후 실행할 callback function
- 구글맵 자바스크립트 API 로딩
위 세가지 요소를 제일 간단하게 보여주는 샘플이
에서 제공된다. 상세 내용은 링크 참조.
Simple Map | Maps JavaScript API | Google Developers
This example creates a map that's centered on Sydney, New South Wales, Australia. Read the documentation. var map; function initMap() { map = new google.maps.Map(document.getElementById('map'), { center: {lat: -34.397, lng: 150.644}, zoom: 8 }); } /* Alway
developers-dot-devsite-v2-prod.appspot.com
<!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: 37.566554, lng: 126.978546},
zoom: 12
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDhAJbqfPNwD3xaEUeyktvFWRtytTJhCpY&callback=initMap"
async defer></script>
</body>
</html>구글맵 API에 대한 사용법을 미리 알고 개발하는 것보다
API를 사용한 샘플을 참고해서 적용해 보는 것이 훨씬 빨리 적용할 수 있을 것 같다.
https://developers-dot-devsite-v2-prod.appspot.com/maps/documentation/javascript/examples?hl=ko
Code Samples | Maps JavaScript API | Google Developers
All of the examples contained in the Maps JavaScript API documentation set are listed below for quick reference. From our Terms of Service Innovate, but don't duplicate Don't make a substitute for Google Maps. If your app's primary purpose is navigation, a
developers.google.com
구글맵 Documentation을 보면 위에서 언급한 제일 간단한 예제부터 내가 생각할 수 있는 것 이상으로 맵을 활용할 수 있는 샘플들이 잘 제공되고 있다.
'우리동네 교통사고 다발지역' 카테고리의 다른 글
| [GoogleMap] 구글맵에 마커(Marker)를 추가해 보자 (1) (0) | 2020.02.18 |
|---|---|
| [GoogleMap] Control options for google.maps.Map (0) | 2020.02.18 |
| [GoogleMap] API 키 발급 for Maps JavaScript API (0) | 2020.02.17 |
| [openAPI] 법정동 코드는 어디서 찾을까 (0) | 2020.02.17 |
| [openAPI] 교통 관련 다른 openAPI (0) | 2020.02.17 |
