구글지도 연동하기 상세보기

작성자: 관리자 추천: 0 조회: 3139

http://www.sir.co.kr/bbs/board.php?bo_table=g4_tiptech&wr_id=32161

"오늘도망했다"님이 올려주신 팁에서 기능을 추가했습니다.
http://sir.co.kr/bbs/board.php?bo_table=g4_tiptech&wr_id=31980
테스트를 통해서 몇가지 기능을 추가했습니다. ㅋㅋ

<!DOCTYPE html>

<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

테스트 해보시고, 좋으시면 추천 마구 남겨주세요....

등록일: 2013-09-21 06:07:20

이전글:그림자 스타일시트 생성기

다음글: HTML 특수문자 코드표