안녕하세요. @u robotics입니다.
아침의 개발공부를 절다가
피곤해서 누워자다가
바깥에 나갔다가 왔습니다.
나가 놀면서 기획 2개만 정리했을 뿐인데...
시간이 벌써. ㅇ_ㅇ 크흙.
암튼 뭐라도 하나 해보고 가야겠다고 생각하다가
클릭을 잘못해서 지도를 켰습니다.
오 이거 괜찮다 싶어서 따라해봤는데 되네요.
간단하게 구글 지도를 활용하는 법을 해보죠.
https://www.w3schools.com/graphics/google_maps_intro.asp
소스는 이 사이트에 있습니다.
<!DOCTYPE html>
<html>
<body>
<h1>My First Google Map</h1>
<div id="googleMap" style="width:100%;height:400px;"></div>
<script>
function myMap() {
var mapProp= {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:5,
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=myMap"></script>
</body>
</html>
이 소스를 그대로 복사 붙여넣기 하시고,
key = YOUR_KEY
이 부분에서 YOUR_KEY 에 다가
여러분이 받으신 API_KEY를 넣어주시면 됩니다.
웹> Maps JavaScript API
https://developers.google.com/maps/documentation/javascript/?hl=ko
링크 사이트로 가셔서요.
오른쪽 위에 보면 키 가져오기라고 있거든요.
그걸 클릭해주시면,
API_KEY가 나옵니다.
그걸 복사해주셔서
방금 만들었던 YOUR_KEY에 다가
복사 붙여넣기 해주시고,
새로고침 해서 실행해주시면
정상적으로 맵이 뜹니다.
근데 이거 하루 최대 25000건 넘으면 무료가 아닌데요.
방문자가 그 정도로 폭발하면
사실 뭐 0.5달러 정도가 문제가 아닐 것 같긴 합니다. ㅎㅎㅎ
(광고만 찍어도.... )
아무튼 가격이 어떻게 되는지는 링크로 알아보세요.
https://developers.google.com/maps/pricing-and-plans/#details
그 다음에 만들어진 API_KEY를 관리해야 합니다.
https://console.developers.google.com/apis/credentials/key
여기 가보시면 키가 어떻게 된지 알 수 있고, 삭제도 할 수 있어요.
웹으로 지도 한 번 만들어봤네요. ㅋㅋㅋ
감사합니다.