구글지도API 를 이용하여 회사소개에 지도 넣기
회사 소개 페이지에서 약도 또는 찾아오시는 길 을
구글 지도 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 로 제한을 두었습니다.
위와 같이 간단한 스크립트로 구글 지도를 달 수 있습니다.
완성된 소스를 소스보기를 클릭하여 다운로드 받아보시기 바랍니다.
서치하다가 좋은팁같아서 퍼왔습니다~~
구글 지도 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 로 제한을 두었습니다.
위와 같이 간단한 스크립트로 구글 지도를 달 수 있습니다.
완성된 소스를 소스보기를 클릭하여 다운로드 받아보시기 바랍니다.
서치하다가 좋은팁같아서 퍼왔습니다~~
댓글 11개
rumi717
12년 전
감사합니다~~
12년 전
고맙습니다.
3xLargeHeart
12년 전
어이쿠~아주 좋은 팁이네요..
12년 전
감사합니다~~
12년 전
유용하게 쓸 수 있는 자료입니다. 감사합니다
12년 전
찾던건데...여기 있네요 ^^
12년 전
꼭 필요한건데 감사합니다.
12년 전
와우.. 좋은 팁입니다. 추천합니다.
12년 전
good!!!
스피드애드
12년 전
감사합니다
12년 전
팁으로 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=ko"></script>
요로케하시면 ko를 en 으로 바꿔서 영문지도로 쓸 수도 있답니다.
요로케하시면 ko를 en 으로 바꿔서 영문지도로 쓸 수도 있답니다.
게시판 목록
그누4 팁자료실
그누보드4와 관련된 팁을 여러분들과 함께 공유하세요.
나누면 즐거움이 커집니다.
나누면 즐거움이 커집니다.
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 3229 | 11년 전 | 4246 | ||
| 3228 |
평범한아빠
|
11년 전 | 9106 | |
| 3227 |
다케미카코
|
11년 전 | 5382 | |
| 3226 | 11년 전 | 10951 | ||
| 3225 | 11년 전 | 6115 | ||
| 3224 | 11년 전 | 7623 | ||
| 3223 |
다케미카코
|
11년 전 | 11669 | |
| 3222 | 11년 전 | 5185 | ||
| 3221 | 11년 전 | 5317 | ||
| 3220 | 11년 전 | 7095 | ||
| 3219 |
다케미카코
|
11년 전 | 4278 | |
| 3218 |
다케미카코
|
11년 전 | 4788 | |
| 3217 | 11년 전 | 4983 | ||
| 3216 |
다케미카코
|
11년 전 | 11455 | |
| 3215 | 11년 전 | 4875 | ||
| 3214 | 12년 전 | 7994 | ||
| 3213 | 12년 전 | 2659 | ||
| 3212 | 12년 전 | 5416 | ||
| 3211 | 12년 전 | 4831 | ||
| 3210 | 12년 전 | 10025 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기