페이지에 구글지도(API) 쉽게 넣기 정보
페이지에 구글지도(API) 쉽게 넣기본문
2019.12.30 추가
구글 정책 변경으로 더이상 작동하지 않습니다 ^^
키 발급을 통해서만 가능하다고 합니다!
------------
오시는 길 등의 페이지에 구글지도를 사용할때
마커를 포함한 구글지도를 바로 쓸 수 있는 코드 입니다.
------------
01. https://www.google.co.kr/maps 에서 마커를 표기할 주소를 검색.
02. 검색된 지도(위치)의 마커를 우클릭 > 이곳이궁금한가요? 클릭.
03. 하단에 뜨는 박스에 표기되는 위치 좌표를 메모. (37.565928, 126.976852)
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
8
댓글 25개
오 공개된 키값이 있네요...
2년정도 쓰고있는데 무리없이 잘쓰고 있네요
뷰가 많은 사이트는 아직 안해봐서 모르겠어요 ㅎ
뷰가 많은 사이트는 아직 안해봐서 모르겠어요 ㅎ
감합니다
^^
구글지도 설치 하였더니 잘 됩니다. 좋은 정보 감사합니다.
잘되신다니 다행입니다~
감사합니다
감사합니다!
<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>
공유 감사합니다~
정말 감사합니다 ㅠㅠ;
펄스나인님 ... 자꾸 이러시면 계속 좋아할수밖에... ㅎㅎㅎ
펄스나인님 ... 자꾸 이러시면 계속 좋아할수밖에... ㅎㅎㅎ
ㅋㅋ 좋아하셔도됩니다!!
고맙습니다.. 찾고 있던 정보인데...
유용하게 사용하겠습니다..
유용하게 사용하겠습니다..
도움이 되었으면 좋겠습니다 ^^
꼭 필요했던 것인데..
덕분에 잘 사용하겠습니다. 그리고 수정할 내용도 없이 작동도 잘되네요..
거듭 감사의 말씀 드립니다. 고맙습니다..
덕분에 잘 사용하겠습니다. 그리고 수정할 내용도 없이 작동도 잘되네요..
거듭 감사의 말씀 드립니다. 고맙습니다..
별말씀을요 !
잘되신다니~ 다행입니다 ^^
잘되신다니~ 다행입니다 ^^
공개키 지금도 작동하나요? 안되는것 같아서요ㅠ
음 사이트 소유를 물어보는 팝업이 뜨는것 같네요.
확인하셔서 키 값만 바꾸어 주시는것이 좋을것 같습니다~
공개키는 구글에서 공개 한것이 아니라 해외에서 돌아다니는 거라서
그대로 쓰기에는 한계가 있을것 같네요~
확인하셔서 키 값만 바꾸어 주시는것이 좋을것 같습니다~
공개키는 구글에서 공개 한것이 아니라 해외에서 돌아다니는 거라서
그대로 쓰기에는 한계가 있을것 같네요~
예. 답변 감사합니다.
감사합니다! ㅠㅠ
^^
정말고맙습니다 ㅠ
아마 안되실거에요 정책 변경으로..ㅠㅠ
답변주셔서 감사합니다! 키값만 변경해서 한번 써볼려고 했었습니다 ㅎㅎ 감사합니다! ㅎㅎ
넵 ^^