어디에서나 바로가기 기능을 사용하실 수 있습니다. 주메뉴 이동은 알트 키 플러스 1 키이고, 부메뉴 이동은 알트 키 플러스 2 키이고, 본문 이동은 알트 키 플러스 3 키입니다. 알트 키 플러스 J 키는 일반모드와 텍스트모드로 전환합니다.

현재위치
  1. HOME
  2. > 기타기능

본문 영역

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

작성자: 관리자 추천: 0  조회: 2935
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> 
<!-- 구글지도 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 


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