회사 소개 페이지에서 약도 또는 찾아오시는 길 을
구글 지도 API 를 이용하여 나타나도록 해보겠습니다.
샘플로 파일을 하나 업로드 해 두었으며, 소스파일 다운로드를 하셔서 다운로드 받으시면 됩니다.
기본적으로 구글 지도는
<!DOCTYPE html>
<html>
<head>
<meta charset="euc-kr">
<title>구글지도 회사 위치</title>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
function initialize() {
var myLatlng = new google.maps.LatLng(35.87110100714382, 128.60169690333006);
var mapOptions = {
zoom: 17,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"style="width:500px; height:300px;"></div>
</body>
</html>
위의 소스만 있으면 구글 지도는 나타납니다.
아래에 body 태그안에 div 태그에 width 와 height 가 지도의 가로 세로 크기입니다.
적당한 값을 주시면 되며
상단에
var myLatlng = new google.maps.LatLng(35.87110100714382, 128.60169690333006);
위의 소스에 현재 위치를 x, y 로 좌표값을 넣어주시면 됩니다.
현재 주소에 대한 x, y 좌표 값은 아래 링크에서 얻으실 수 있습니다.
http://openapi.map.naver.com/api/geocode.php?key=f32441ebcd3cc9de474f8081df1e54e3&encoding=euc-kr&coord=LatLng&query=대구중구동인동1가
위와 같이 주소를 적으면 xml 로 x,y 값을 확인할 수 있습니다.
위의 기본적인 소스에서 현재 위치에 대한 마커를 찍으실려면
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: "대구시청"
});
위의 소스를 var map 아래에 추가하시면 됩니다.
title 에 내용은 마커에 마우스를 가져다대면 나타나는 이름입니다.
여기에 추가적으로 마커를 클릭하면 말풍선을 띄워 관련 정보를 띄울수도 있습니다.
var infowindow = new google.maps.InfoWindow(
{
content: "<h1>대구시청</h1>",
maxWidth: 300
}
);
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
위의 소스를 추가하시면 됩니다.
content 에 내용은 말풍선 안의 내용입니다. html 태그로 디자인 하셔도 됩니다.
maxWidth 는 말풍선의 최대 크기 제한입니다. 300px 로 제한을 두었습니다.
위와 같이 간단한 스크립트로 구글 지도를 달 수 있습니다.
완성된 소스를 소스보기를 클릭하여 다운로드 받아보시기 바랍니다.
감사합니다.
|
