오늘 작성할 html/css글은 구글지도를 활용하여 웹페이지에 지도를 삽입하는 방법에 관한 글이다.
홈페이지를 만들다 보면...
회사소개 중에서도 약도 안내나 지점 안내 등 다양한 분야에서 지도를 활용할 일이 생기는데
그럴 때 사용하기 간편한 구글API를 소개 해 보겠다.
https://www.google.co.kr/maps/
구글맵스 접속 후 좌측 상단에 지명, 주소 등을 입력하여 원하는 좌표의 지도를 찾는다.
원하는 곳에 마우스커서를 올린 상태에서 우클릭 > 이곳이 궁금한가요?를 선택.
좌측상단에 저런 정보가 뜨는데 아래 자그마한 숫자로 된 좌표값을 한번 눌러봐주자!!
그럼 화면이 한번 움찔하며 저 좌표의 위치를 보여주게되는데
본인이 첨 선택한 그 위치가 맞는지 살펴보자.
제대로 된 좌표가 맞는지 한번 확인해보는 과정이다.
별 이상이 없다면
저 좌표를 가지고 구글 맵을 만들어 넣을 거다.
빨간 게 Y좌표, 파란 게 X좌표인데 지도 상의 경도 위도로 이해하면 편하다.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="euc-kr">
<title>구글맵 API 활용하기</title>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
function initialize() {
/*
http://openapi.map.naver.com/api/geocode.php?key=f32441ebcd3cc9de474f8081df1e54e3&encoding=euc-kr&coord=LatLng&query=서울특별시 강남구 강남대로 456
위와같이 링크에서 뒤에 주소를 적으면 x,y 값을 구할수 있다.
*/
var Y_point = 35.87110100714382; // Y 좌표
var X_point = 128.60169690333006; // X 좌표
var zoomLevel = 16; // 지도의 확대 레벨 : 숫자가 클수록 확대됨
var markerTitle = "위즈소프트"; // 현재 위치 마커에 마우스를 올렸을때 나타나는 정보
var markerMaxWidth = 300; // 마커를 클릭했을때 나타나는 말풍선의 최대 크기
// 말풍선 내용
var contentString = '<div>' +
'<h2>위즈소프트</h2>'+
'<p>위즈소프트는 WEB Agency & SI 분야에서 10년 이상의 풍부한 경험을 보유한<br />' +
'전문 인력으로 구성된 E-Business 전문 기업입니다.</p>' +
//'<a href="http://www.daegu.go.kr" target="_blank">http://www.daegu.go.kr</a>'+ //링크도 넣을 수 있음
'</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_view'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: markerTitle
});
var infowindow = new google.maps.InfoWindow(
{
content: contentString,
maxWidth: markerMaxWidth
}
);
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
}
</script>
</head>
<body onload="initialize()">
<div id="map_view" style="width:500px; height:300px;"></div>
</body>
</html>
빨간색글자로 표시하게 소스코드.
아이프레임을 활용할 수도 있다.
아래 첨부된 샘플들을 활용하면 이해가 더 쉬울 것 같다.
iframe활용.zip
sample.html네이버 지도 api도 상당히 쓰기 쉽고 보기도 좀 더 아름답지만...
계정당 받을 수 있는 api키 값 갯수가 제한되어있어
나의 경우엔 구글지도를 훨씬 많이 쓴다.
확대 축소도 가능하고 정확도도 좋은 편이라 약도로 쓰기엔 무리가 없었음.
무엇보다 키값 제한이 없는게 가장 큰 매리트
ㅋㅋㅋㅋㅋㅋㅋㅋ
이상 구글맵 API를 활용하여 약도넣는 방법이었다.
'웹관련자료 > html/css' 카테고리의 다른 글
| 로딩바 이미지와 로딩바 만드는 방법 - GIF애니메이션 (0) | 2015.12.08 |
|---|---|
| 에디트플러스 설치파일 + 키젠 사용방법 및 다운로드 (0) | 2015.12.04 |
| [폰트]Bitstream Vera Sans Mono - 퍼블리싱이나 코딩하기 좋은 글씨체 (0) | 2015.01.18 |
| 에디트플러스/알ftp 접속계정정보 백업하기(XP와 윈도우7) (0) | 2014.12.10 |
| 플래시(FLASH)에 div띄우기 - z-index정도만 주의하면 문제없음. 샘플파일 첨부 (0) | 2014.11.16 |
