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

매출이 오르면 내리는 수수료! 지금 수수료센터에서 전자결제(PG)수수료 비교견적 신청해 보세요!

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

공개키는 구글에서 공개 한것이 아니라 해외에서 돌아다니는 거라서
그대로 쓰기에는 한계가 있을것 같네요~
전체 33 |RSS

회원로그인

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