구글 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">'+
'대표전화: 070-7600-3500 , FAX: 02-865-3528<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">'+
'대표전화: 070-7600-3500 , FAX: 02-865-3528<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
테스트 해보시고, 좋으시면 추천 마구 남겨주세요....
댓글 16개
12년 전
doctype 그리고 css 에서 문제가 생긴것이 발견되어 수정했습니다. 수정내용은 팁에 날짜로 표기하였습니다.
takumi22
12년 전
정보 감사합니다.
신현종실장
12년 전
좋습니당
11년 전
네이버지도맵 키값 등록하고 어쩌고 고생했는데 이건 다 필요없이 가능하군요.
굿입니다. ^^
굿입니다. ^^
djgmd12345
10년 전
감사합니당
guswjd
8년 전
지도 API 자료 감사합니다.
게시글 목록
| 번호 | 제목 |
|---|---|
| 33411 | |
| 33410 | |
| 33409 | |
| 33408 | |
| 33407 | |
| 33404 | |
| 33403 | |
| 33402 | |
| 33399 | |
| 33398 | |
| 33390 | |
| 33386 | |
| 33377 | |
| 33356 | |
| 33348 | |
| 33340 | |
| 33334 | |
| 33333 | |
| 33329 | |
| 33322 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기