"오늘도망했다"님이 올려주신 팁에서 기능을 추가했습니다.
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개
게시글 목록
| 번호 | 제목 |
|---|---|
| 32610 | |
| 32609 | |
| 32604 | |
| 32601 | |
| 32587 | |
| 32583 | |
| 32574 | |
| 32571 | |
| 32558 | |
| 32557 | |
| 32554 | |
| 32550 | |
| 32532 | |
| 32516 | |
| 32512 | |
| 32507 | |
| 32490 | |
| 32488 | |
| 32464 | |
| 32459 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기