구글 Maps API 연동하여 회사지도 넣기 (2013-05-16 수정) 정보
구글 Maps API 연동하여 회사지도 넣기 (2013-05-16 수정)
관련링크
본문
"오늘도망했다"님이 올려주신 팁에서 기능을 추가했습니다.
http://sir.co.kr/bbs/board.php?bo_table=g4_tiptech&wr_id=31980
테스트를 통해서 몇가지 기능을 추가했습니다. ㅋㅋ
<!DOCTYPE html>
<!-- 구글지도 v3.0은 html5를 사용하므로 DOCTYPE이 필요합니다.
만약 페이지 내용이 2px 정도의 줄간격이 생기면 DocType 삭제하세요 (2013-05-16) -->
<html>
<head>
<title>소스 구글 지도 API 연동하여 회사소개에 지도 넣기</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
html, body {
/* height: 100%; IE에서 지도위치가 브라우저 하단에 고정되는 현상 발생해서 삭제 (2013-05-16) */
margin: 0;
padding: 0;
}
#map-canvas, #map_canvas {
width : 700px; /* 구글 지도 넓이 */
height: 600px; /* 구글 지도 높이 */
font-size:12px;
}
/* 말풍선관련 css 시작 */
.map_Heading { /* 말풍선 타이틀(회사명) css */
line-height:30px;
font-size:20px;
font-weight:bold;
color:#30C;
}
.map_Content { /* 말풍선 내용 css */
font-size:12px;
color:#333;
}
/* 말풍선 회사홈페이지 링크 css */
a:link.map_Content { text-decoration: none; color: #333; }
a:active.map_Content { text-decoration: none; color: #333; }
a:visited.map_Content { text-decoration: none; color: #333; }
a:hover.map_Content { text-decoration: none; color: #A2002E; }
/* 말풍선관련 css 끝 */
@media print {
html, body {
height: auto;
}
#map_canvas {
height: 650px;
}
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
function initialize() {
/*
http://maps.googleapis.com/maps/api/geocode/xml?sensor=true&address=서울시 구로구 구로동 851
위의 링크에서 뒤에 주소를 적으면 x,y 값을 구할수 있습니다.
<location>
<lat>37.4037838</lat> 이것이 Y_point
<lng>126.9731414</lng> 이것이 X-point
</location>
*/
var Y_point = 37.4808224; // lat 값
var X_point = 126.8926653; // lng 값
var zoomLevel = 17; // 첫 로딩시 보일 지도의 확대 레벨
var markerTitle = "해피정닷컴"; // 현재 위치 마커에 마우스를 올렸을때 나타나는 이름
var markerMaxWidth = 300; // 마커를 클릭했을때 나타나는 말풍선의 최대 크기
// 말풍선 내용
var contentString = '<div>' +
'<div>'+
'홈페이지 A/S <b>O</b>ne<b>S</b>top<b>S</b>ervice' +
'</div>'+
'<span class="map_Heading">'+markerTitle+'</span>'+
'<div class="map_Content">'+
'대표전화: *** 개인정보보호를 위한 전화번호 노출방지 *** , FAX: *** 개인정보보호를 위한 전화번호 노출방지 ***<br />'+
'서울시 구로구 구로동 851<br />' +
'<a href="http://www.happyjung.com" target="_blank" class="map_Content">http://www.happyjung.com</a>'+
'</div>'+
'</div>';
var myLatlng = new google.maps.LatLng(Y_point, X_point);
var mapOptions = {
zoom: zoomLevel,
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,
draggable:true,
animation: google.maps.Animation.DROP,
title: markerTitle
});
var infowindow = new google.maps.InfoWindow({
content: contentString,
maxWidth: markerMaxWidth
});
infowindow.open(map, marker);
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<table cellpadding="0" cellspacing="3" bgcolor="#f4f4f4">
<tr><td bgcolor="#ffffff"><table width="100%" cellpadding="0" cellspacing="1" bgcolor="#cccccc" >
<tr><td bgcolor="#ffffff"><table width="100%" cellpadding="3" cellspacing="1" bgcolor="#eeeeee">
<tr><td bgcolor="#ffffff"><div id="map_canvas" style="border:1px solid #ccc; margin:0 0 0px 0;"></div></td></tr>
</table></td></tr>
</table></td></tr>
</table>
</body>
</html>
참고자료
http://sir.co.kr/bbs/board.php?bo_table=g4_tiptech&wr_id=31980
http://www.happycgi.com/detail.cgi?number=14849
http://blog.naver.com/PostView.nhn?blogId=fbstar&logNo=100146300148
https://developers.google.com/maps/documentation/javascript/events?hl=ko
테스트 해보시고, 좋으시면 추천 마구 남겨주세요....
http://sir.co.kr/bbs/board.php?bo_table=g4_tiptech&wr_id=31980
테스트를 통해서 몇가지 기능을 추가했습니다. ㅋㅋ
<!DOCTYPE html>
<!-- 구글지도 v3.0은 html5를 사용하므로 DOCTYPE이 필요합니다.
만약 페이지 내용이 2px 정도의 줄간격이 생기면 DocType 삭제하세요 (2013-05-16) -->
<html>
<head>
<title>소스 구글 지도 API 연동하여 회사소개에 지도 넣기</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
html, body {
/* height: 100%; IE에서 지도위치가 브라우저 하단에 고정되는 현상 발생해서 삭제 (2013-05-16) */
margin: 0;
padding: 0;
}
#map-canvas, #map_canvas {
width : 700px; /* 구글 지도 넓이 */
height: 600px; /* 구글 지도 높이 */
font-size:12px;
}
/* 말풍선관련 css 시작 */
.map_Heading { /* 말풍선 타이틀(회사명) css */
line-height:30px;
font-size:20px;
font-weight:bold;
color:#30C;
}
.map_Content { /* 말풍선 내용 css */
font-size:12px;
color:#333;
}
/* 말풍선 회사홈페이지 링크 css */
a:link.map_Content { text-decoration: none; color: #333; }
a:active.map_Content { text-decoration: none; color: #333; }
a:visited.map_Content { text-decoration: none; color: #333; }
a:hover.map_Content { text-decoration: none; color: #A2002E; }
/* 말풍선관련 css 끝 */
@media print {
html, body {
height: auto;
}
#map_canvas {
height: 650px;
}
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
function initialize() {
/*
http://maps.googleapis.com/maps/api/geocode/xml?sensor=true&address=서울시 구로구 구로동 851
위의 링크에서 뒤에 주소를 적으면 x,y 값을 구할수 있습니다.
<location>
<lat>37.4037838</lat> 이것이 Y_point
<lng>126.9731414</lng> 이것이 X-point
</location>
*/
var Y_point = 37.4808224; // lat 값
var X_point = 126.8926653; // lng 값
var zoomLevel = 17; // 첫 로딩시 보일 지도의 확대 레벨
var markerTitle = "해피정닷컴"; // 현재 위치 마커에 마우스를 올렸을때 나타나는 이름
var markerMaxWidth = 300; // 마커를 클릭했을때 나타나는 말풍선의 최대 크기
// 말풍선 내용
var contentString = '<div>' +
'<div>'+
'홈페이지 A/S <b>O</b>ne<b>S</b>top<b>S</b>ervice' +
'</div>'+
'<span class="map_Heading">'+markerTitle+'</span>'+
'<div class="map_Content">'+
'대표전화: *** 개인정보보호를 위한 전화번호 노출방지 *** , FAX: *** 개인정보보호를 위한 전화번호 노출방지 ***<br />'+
'서울시 구로구 구로동 851<br />' +
'<a href="http://www.happyjung.com" target="_blank" class="map_Content">http://www.happyjung.com</a>'+
'</div>'+
'</div>';
var myLatlng = new google.maps.LatLng(Y_point, X_point);
var mapOptions = {
zoom: zoomLevel,
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,
draggable:true,
animation: google.maps.Animation.DROP,
title: markerTitle
});
var infowindow = new google.maps.InfoWindow({
content: contentString,
maxWidth: markerMaxWidth
});
infowindow.open(map, marker);
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<table cellpadding="0" cellspacing="3" bgcolor="#f4f4f4">
<tr><td bgcolor="#ffffff"><table width="100%" cellpadding="0" cellspacing="1" bgcolor="#cccccc" >
<tr><td bgcolor="#ffffff"><table width="100%" cellpadding="3" cellspacing="1" bgcolor="#eeeeee">
<tr><td bgcolor="#ffffff"><div id="map_canvas" style="border:1px solid #ccc; margin:0 0 0px 0;"></div></td></tr>
</table></td></tr>
</table></td></tr>
</table>
</body>
</html>
참고자료
http://sir.co.kr/bbs/board.php?bo_table=g4_tiptech&wr_id=31980
http://www.happycgi.com/detail.cgi?number=14849
http://blog.naver.com/PostView.nhn?blogId=fbstar&logNo=100146300148
https://developers.google.com/maps/documentation/javascript/events?hl=ko
테스트 해보시고, 좋으시면 추천 마구 남겨주세요....
추천
4
4
댓글 16개
ㅠㅠㅠㅠ 구글맵 v2 로 api 연동해 놓은 사이트가 있는데 (부동산회사: 지금도 관리해주고 있는) 한 두달 전 쯤? 지도는 뜨는데 geolocation 이 "Google was not able to detect your location" 이런 메세지가 뜨면서 geolocation 부분이 먹통이 되더라구요.
그때 v3 로 갈아 타느라 밤세 고생좀 했었는데... 이런 정보는 좀 미리 미리 올려주셨으면 참 좋았을텐데 말입니다. :D
그래도 유용한 정보 공유해주셔서 감사합니다.
그때 v3 로 갈아 타느라 밤세 고생좀 했었는데... 이런 정보는 좀 미리 미리 올려주셨으면 참 좋았을텐데 말입니다. :D
그래도 유용한 정보 공유해주셔서 감사합니다.
^^;; 저도 엊그제 관련팁을 발견하고 적용하면서 정리한 내용이라서요 ^^
감사합니다 바로 적용해봐야겠네요^^
잘 적용되시면 좋겠네요 ^^
완전 잘되네요. 감사...
위의 소스대로 파일 만들어서 루트에 업로드하고
게시판 html 글쓰기 해서 iframe 으로 넣었는데,
다른분들은 어떻게 하시는지...
그누 초보라서요..^^;;
http://book160.kr/bbs/board.php?bo_table=02_5
위의 소스대로 파일 만들어서 루트에 업로드하고
게시판 html 글쓰기 해서 iframe 으로 넣었는데,
다른분들은 어떻게 하시는지...
그누 초보라서요..^^;;
http://book160.kr/bbs/board.php?bo_table=02_5
말풍선을 기본 안뜨게 하셧군요 ^^
지도 화면이 작으니 안뜨는것이 보기는 좋으네요 ^^
지도 화면이 작으니 안뜨는것이 보기는 좋으네요 ^^
감사합니다.
잘 사용하겠습니다.
잘 사용하겠습니다.
유용하게 사용하시면 감사합니다. ^^
감사합니다..
덕분에 좋은 정보 얻어갑니다. ^^
덕분에 좋은 정보 얻어갑니다. ^^
냉사리님 감사합니다. ^^
doctype 그리고 css 에서 문제가 생긴것이 발견되어 수정했습니다. 수정내용은 팁에 날짜로 표기하였습니다.
정보 감사합니다.
좋습니당
네이버지도맵 키값 등록하고 어쩌고 고생했는데 이건 다 필요없이 가능하군요.
굿입니다. ^^
굿입니다. ^^
감사합니당
지도 API 자료 감사합니다.
