Project/Q-Map
[Q-Map] Javascript Google Map 사용하기
UroA
2016. 7. 18. 01:17
Google Map 사용하기
https://developers.google.com/maps/documentation/javascript/?hl=ko 사이트를 통해 Google Map 을 시작할 수 있습니다.
프로젝트 생성 & API키 받기
먼저 Google Map을 사용하고자 하는 프로젝트를 생성해야합니다. Google 계정을 통해 로그인 후 '키 가져오기' 버튼을 클릭하여 프로젝트를 생성 후 아래의 순서로 API Key를 할당 받습니다.
Google Map 사용하기
이제 할당받은 API Key 를 통해 다음과 같이 Google Map 을 사용할 수 있습니다. (YOUR_API_KEY에 본인이 할당받은 Key 사용)
(https://developers.google.com/maps/documentation/javascript/examples/map-simple?hl=ko 참조)
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</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>