시작페이지로 즐겨찾기추가
로그인
회원가입 l 출석체크 l 마이페이지 l CGIMALL
happycgi
자료실 사이트등록 랭킹100 프로그램리뷰 관리자추천자료 초보가이드
커뮤니티
전체 펼쳐보기
퀵메뉴링크 jquery , CSS , PHP , Javascript , 무료폰트 , ASP
상세검색
 > OPEN API > 구글지도API 를 이용하여 회사소개에 지도 넣기 상세정보
사이트등록
현재접속자 새로고침
구글지도API 를 이용하여 회사소개에 지도 넣기
소스통계정보 오류신고 및 문의
랭킹BEST
해피팀
네티즌
트위터로 보내기 페이스북으로 보내기 싸이월드 공감
소스분류 OPEN API
다운로드 횟수 2201 회
간단설명 구글지도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 로 제한을 두었습니다.





위와 같이 간단한 스크립트로 구글 지도를 달 수 있습니다.
완성된 소스를 소스보기를 클릭하여 다운로드 받아보시기 바랍니다.


감사합니다.


네티즌 의견   이용하신 자료의 후기를 자유롭게 작성하세요. (상업적인 광고 및 도배성 글 등은 사전통보없이 삭제될 수 있습니다.)
내용 아이디 의견남기기
그런데 키값없이 그냥 저 소스를 타업체 홈페이지 제작시 약도로 사용해도 저작권 같은 법적인 문제없이 완전히 무료인가요? 궁굼합니다~ 꼭 답변 부탁드려요~~
2014-05-27 10:32:26
dhepd
찬성 58
반대 61
:왕하하: 우선 정보 감사합니다.
그런데, 하나의 마커 표시가 아닌 여러곳을 할려면 어떻게 해야되나요?
2014-05-26 09:23:58
착한아이
찬성 53
반대 49
:네맞아요: 친절한 설명 감사합니다~~~
2013-11-21 04:30:26
얌얌
찬성 46
반대 54
1
이름
내용
:네맞아요: :화나는군요: :잠와: :우울해: :이건아냐: :왕하하: 왕웃음~ 놀램~
평가하기 훌륭함 매우좋음 좋음 괜찮음 보통 별로
도배방지키
 17683468 보이는 도배방지키를 입력하세요.