페이지에 구글지도(API) 쉽게 넣기 > 그누보드5 팁자료실

그누보드5 팁자료실

페이지에 구글지도(API) 쉽게 넣기 정보

페이지에 구글지도(API) 쉽게 넣기

본문

2019.12.30 추가

구글 정책 변경으로 더이상 작동하지 않습니다 ^^

키 발급을 통해서만 가능하다고 합니다!

 

------------

 

오시는 길 등의 페이지에 구글지도를 사용할때

마커를 포함한 구글지도를 바로 쓸 수 있는 코드 입니다.

 

------------

01. https://www.google.co.kr/maps 에서 마커를 표기할 주소를 검색.

 

02. 검색된 지도(위치)의 마커를 우클릭 > 이곳이궁금한가요? 클릭.

 

1925655678_1550819050.9185.png

 

 

03. 하단에 뜨는 박스에 표기되는 위치 좌표를 메모. (37.565928, 126.976852)

 

1925655678_1550819114.2213.png 

 

 

04. 지도가 들어갈페이지에 아래 코드를 입력 (그누5 기본에디터 에서도 입력가능)

 


 
// 지도키. 해외에서 공개된 키라고합니다.
// 그냥써도 무방하지만 자신의 키가 있다면 넣어주세요. (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>
추천
8

댓글 25개

<div id="map_canvas" style="width: 100%; height: 400px; margin:0px;"></div>

를 반응형으로 수정

<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>
꼭 필요했던 것인데..
덕분에 잘 사용하겠습니다. 그리고 수정할 내용도 없이 작동도 잘되네요..
거듭 감사의 말씀 드립니다. 고맙습니다..
음 사이트 소유를 물어보는 팝업이 뜨는것 같네요.
확인하셔서 키 값만 바꾸어 주시는것이 좋을것 같습니다~

공개키는 구글에서 공개 한것이 아니라 해외에서 돌아다니는 거라서
그대로 쓰기에는 한계가 있을것 같네요~
전체 2,426 |RSS
그누보드5 팁자료실 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT