구글지도 api
잘 사용하던 구글지도 api 가 갑자기 오류...
자세히 알아보니 구글지도도 일일 트랙픽 개념이 있었던 것.
하루 25000건의 트래픽만 허용하고 그 이상은 유료로 결제해야 트래픽이 허용된다.
그리고 키가 없어도 잘 작동했었는데 새로운 정책사항으로 모두 새로운 api 키를
발급받아야 한다고 적혀있어서 이 참에 키를 만들고 새롭게 적용시켜 보았다.
구글지도 사용법 위도경도 api 웹에 활용하기
1. 구글지도 api 에 사용할 위도 경도 알아내기.
▶ 알아 낼 위치를 지도에서 검색 후 [공유] 를 누르고 위 이미지처럼 나타 난 주소의 중간
@ 다음 부분이 위/경도이다. 위 예는 최고집이사의 위도 경도이다.
2. 구글 개발자 콘솔.
▶ 구글 개발자 콘솔에 이미 구글 아이디로 로그인을 만들 때 키를 발급 받아기에 그 키를 그냥
사용하기로 하고 구글 지도만 사용설정 하면 된다.
그리고, 위 파란색 박스 안 경고표시는 사용제한을 하는 것으로 오로지 구글지도 하나에만 사용하게
만들 수 있다. 아니면 기본값인 이 키 하나로 모든 api 사용 할 수 있다.
▶ 만약 키를 발급 받지 못했다면 위 사이트에서 [GET A KEY] 로 키를 얻으면 된다.
3. 구글지도 사용 설정.
▶ 죄측 메뉴 [라이브러리]를 클릭하고...
▶ [Google maps javaScript API] 를 클릭,
만약 안드로이드라면 좌측 파란 박스 [Google Maps Android API] 클릭하면 된다.
▶ 그리고 다음 화면에서 [사용 설정] 를 클릭하면 사용설정은 끝이다.
4. 구글지도 트래픽 확인 및 사용금지.
▶ 좌측 대시보드 메뉴에서 중간부분을 살펴보면 'Google maps javaScript API' 부분이 있고
클릭하면 트래픽을 확인 할 수 있다.
위에서 말했듯이 하루 트래픽은 2만5천이고, 추가 가입은 1천 트래픽당 추가 비용을 미리
결제하면 된다. 아니면 무료 트래픽 초과되면 '죄송합니다'란 문구를 보게 될 것이다.
▶ 사용금지는 대시보드 자체에서 오른쪽 [사용 중지]를 클릭해도 되고 위 이미지처럼 트래픽을
보는 화면에서 파란박스 안 [사용 중지]를 클릭해도 된다.
5. 내 홈페이지에 적용하기.
<style>
#map {
height: 100%;
width: 100%;
}
#map-section {
position: relative;
height: 450px;
width: 100%;
}
@media (max-width: 480px) {
#map-section {display: none;}
</style>
▶ CSS 에 혹은 html 본문 내에 스타일 정의로 위와 같이 적어준다.
@media (max-width: 480px) { //이 부분은 본인은 모바일에서는 맵 표시를 안 하려고 적용시킨 부분이라서
행여 모바일에서도 사용하려면 이 부분을 삭제하면 된다.
map-section // 맵을 보여 줄 박스 정의. map //실제로 맵이 보여지는 부분
<script>
var marker;
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
scrollwheel: false,
center: {lat: 37.593987, lng: 127.1557148},
mapTypeId: 'roadmap'
});
marker = new google.maps.Marker({
title: '최고집이사',
infoWindow: {
content: '<p><strong>포장이사전문업체</strong><br/>경기도 구리시 수택동 883<br/>대표전화: 1666-2498<br/>대한민국</p>'},
map: map,
draggable: true,
animation: google.maps.Animation.DROP,
position: {lat: 37.593987, lng: 127.1557148}
});
marker.addListener('click', toggleBounce);
}
function toggleBounce() {
if (marker.getAnimation() !== null) {
marker.setAnimation(null);
} else {
marker.setAnimation(google.maps.Animation.BOUNCE);
}
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=api 키&callback=initMap">
</script>
▶ 본문 내에서 스크립트를 적거나 아님 링크시켜서 불러와도 된다.
위에서 수정할 부분은 빨간색으로 위도(lat)/경도(lng)와 타이틀을 자신에 맞게 바꾸고, 옵션값도 바꾼다.
zoom : 13 - 말 그대로 지도화면의 줌 인/ 줌 아웃 부분으로 숫자가 클수록 줌 인이 된다.
scrollwheel: false - 마우스휠로 줌이 되는 걸 방지. 값이 true 값이거나 삭제하면 마우스휠이 적용된다.
center 값은 필수로 중앙에 위치하게 만든다.
mapTypeId: 'roadmap' - 거리지도
★ 구글지도 맵 옵션 참고 : https://developers.google.com/maps/documentation/javascript/reference#MapOptions ★
지도에서 마우스 휠 작동금지 등 옵션사항등을 보려면 위 사이트에 방문하면 된다.
잘 된다. ^^
아래가 최종 적용된 태그이다.
잘 모르겠다 하시는 분들은 아래 태그를 드래그해서 위/경도랑 서버키랑 타이틀만 바꿔서 사용해도 된다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Marker Animations</title>
<style>
#map {
height: 100%;
width: 100%;
}
#map-section {
position: relative;
height: 450px;
width: 100%;
}
#map img {
max-width: none;
}
</style>
</head>
<body>
<section id="map-section">
<div id="map">
<script>
var marker;
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
scrollwheel: false,
center: {lat: 37.593987, lng: 127.1557148},
mapTypeId: 'roadmap'
});
marker = new google.maps.Marker({
title: '최고집이사',
infoWindow: {
content: '<p><strong>포장이사전문업체</strong><br/>경기도 구리시 수택동 883<br/>대표전화: 1666-2498<br/>대한민국</p>'},
map: map,
draggable: true,
animation: google.maps.Animation.DROP,
position: {lat: 37.593987, lng: 127.1557148}
});
marker.addListener('click', toggleBounce);
}
function toggleBounce() {
if (marker.getAnimation() !== null) {
marker.setAnimation(null);
} else {
marker.setAnimation(google.maps.Animation.BOUNCE);
}
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=서버키&callback=initMap">
</script>
</div>
</section>
</body>
</html>
이상입니다.
오늘 하루도 행복하세요.
'최고집:이사일상 > 모든리뷰' 카테고리의 다른 글
| [소설추천] 던전사냥꾼(완) 약스포 (0) | 2018.03.27 |
|---|---|
| 로보청소기후기 (0) | 2018.03.13 |
| 구글플레이 새버전 출시 방법 리뷰 (0) | 2018.03.05 |
| 카카오 아이디로 로그인 (0) | 2018.03.04 |
| 구글폼 만들기 - 견적서 양식 만들기 리뷰 - 두번째 (0) | 2018.03.01 |
