페이지에 구글지도(API) 쉽게 넣기
2019.12.30 추가
구글 정책 변경으로 더이상 작동하지 않습니다 ^^
키 발급을 통해서만 가능하다고 합니다!
------------
오시는 길 등의 페이지에 구글지도를 사용할때
마커를 포함한 구글지도를 바로 쓸 수 있는 코드 입니다.
------------
01. https://www.google.co.kr/maps 에서 마커를 표기할 주소를 검색.
02. 검색된 지도(위치)의 마커를 우클릭 > 이곳이궁금한가요? 클릭.
03. 하단에 뜨는 박스에 표기되는 위치 좌표를 메모. (37.565928, 126.976852)
04. 지도가 들어갈페이지에 아래 코드를 입력 (그누5 기본에디터 에서도 입력가능)
[code]
// 지도키. 해외에서 공개된 키라고합니다.
// 그냥써도 무방하지만 자신의 키가 있다면 넣어주세요. (key=키값)
// 한글지도의 경우 language=en을 language=ko 로 바꿔주시면 됩니다.
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBwlNqAEil52XRPHmSVb4Luk18qQG9GqcM&sensor=false&language=en"></script>
// 37.2915450, 127.0430790 을 지우고 메모해두었던 좌표를 넣습니다.
// 예) new google.maps.LatLng(좌표, 좌표)
<script>
function initialize() {
var myLatlng = new google.maps.LatLng(37.2915450, 127.0430790); // 좌표값
var mapOptions = {
zoom: 14, // 지도 확대레벨 조정
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: "회사명" // 마커에 마우스를 올렸을때 간략하게 표기될 설명글
});
}
window.onload = initialize;
</script>
// 아래의 div를 지도가 표기될곳에 넣어주세요.
// 가로세로 크기는 편하신대로 변경 하시면 됩니다.
<div id="map_canvas" style="width: 100%; height: 400px; margin:0px;"></div>
[/code]
댓글 25개
뷰가 많은 사이트는 아직 안해봐서 모르겠어요 ㅎ
를 반응형으로 수정
[code]<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div id="map_canvas" class="embed-container"></div>[/code]
펄스나인님 ... 자꾸 이러시면 계속 좋아할수밖에... ㅎㅎㅎ
유용하게 사용하겠습니다..
덕분에 잘 사용하겠습니다. 그리고 수정할 내용도 없이 작동도 잘되네요..
거듭 감사의 말씀 드립니다. 고맙습니다..
잘되신다니~ 다행입니다 ^^
확인하셔서 키 값만 바꾸어 주시는것이 좋을것 같습니다~
공개키는 구글에서 공개 한것이 아니라 해외에서 돌아다니는 거라서
그대로 쓰기에는 한계가 있을것 같네요~
게시판 목록
그누보드5 팁자료실
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 공지 | 3년 전 | 4402 | ||
| 2694 | 2개월 전 | 188 | ||
| 2693 | 2개월 전 | 148 | ||
| 2692 | 2개월 전 | 158 | ||
| 2691 | 2개월 전 | 175 | ||
| 2690 | 2개월 전 | 326 | ||
| 2689 | 2개월 전 | 236 | ||
| 2688 |
 SIR개발팀 |
2개월 전 | 441 | |
| 2687 | 2개월 전 | 292 | ||
| 2686 |
선택과집중
|
2개월 전 | 331 | |
| 2685 | 2개월 전 | 291 | ||
| 2684 | 2개월 전 | 348 | ||
| 2683 | 2개월 전 | 482 | ||
| 2682 | 2개월 전 | 278 | ||
| 2681 | 3개월 전 | 303 | ||
| 2680 |
선택과집중
|
3개월 전 | 278 | |
| 2679 | 3개월 전 | 331 | ||
| 2678 |
 Xenon54 |
3개월 전 | 429 | |
| 2677 |
Xenon54 |
3개월 전 | 502 | |
| 2676 | 3개월 전 | 326 | ||
| 2675 | 3개월 전 | 305 | ||
| 2674 |
선택과집중
|
3개월 전 | 481 | |
| 2673 |
 ideaman |
3개월 전 | 322 | |
| 2672 | 3개월 전 | 335 | ||
| 2671 | 3개월 전 | 284 | ||
| 2670 | 3개월 전 | 261 | ||
| 2669 | 3개월 전 | 374 | ||
| 2668 | 3개월 전 | 290 | ||
| 2667 |
선택과집중
|
3개월 전 | 484 | |
| 2666 |
선택과집중
|
3개월 전 | 471 | |
| 2665 |
선택과집중
|
3개월 전 | 409 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기