구글맵 소스 및 주소

*구글맵 사용시 구글맵을 사용할수있게 키 를 발급 받아야합니다*
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyAPStlbgB8ilyQ8NEIdteNqIgbTvPx6eVM"></script>


<!-- GoogoleMap Asynchronously Loading the API ********************************************* -->
<script type="text/javascript">
      function initialize() {
        var mapLocation = new google.maps.LatLng('36.322473', '127.412501'); // 지도에서 가운데로 위치할 위도와 경도
        var markLocation = new google.maps.LatLng('36.322473', '127.412501'); // 마커가 위치할 위도와 경도
         
        var mapOptions = {
          center: mapLocation, // 지도에서 가운데로 위치할 위도와 경도(변수)
          zoom: 18, // 지도 zoom단계
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map-canvas"), // id: map-canvas, body에 있는 div태그의 id와 같아야 함
            mapOptions);
         
        var size_x = 60; // 마커로 사용할 이미지의 가로 크기
        var size_y = 60; // 마커로 사용할 이미지의 세로 크기
         
        // 마커로 사용할 이미지 주소
        var image = new google.maps.MarkerImage( 'http://www.larva.re.kr/home/img/boximage3.png',
                            new google.maps.Size(size_x, size_y),
                            '',
                            '',
                            new google.maps.Size(size_x, size_y));
         
        var marker;
        marker = new google.maps.Marker({
               position: markLocation, // 마커가 위치할 위도와 경도(변수)
               map: map,
               icon: image, // 마커로 사용할 이미지(변수)
//             info: '말풍선 안에 들어갈 내용',
               title: '서대전네거리역이지롱~' // 마커에 마우스 포인트를 갖다댔을 때 뜨는 타이틀
        });
         
        var content = "이곳은 서대전네거리역이다! <br/> 지하철 타러 가자~"; // 말풍선 안에 들어갈 내용
         
        // 마커를 클릭했을 때의 이벤트. 말풍선 뿅~
        var infowindow = new google.maps.InfoWindow({ content: content});
 
        google.maps.event.addListener(marker, "click", function() {
            infowindow.open(map,marker);
        });
         
 
         
      }
      google.maps.event.addDomListener(window, 'load', initialize);
</script>







   ↓ <body>와 </body>사이에 넣는다.
?
1
<div id="map-canvas" style="width: 100%; height: 400px"></div>




















댓글

댓글 쓰기

이 블로그의 인기 게시물

전자정부프레임워크 MSSQL 연동하기

전자정부프레임워크는 Mssql 을 지원해주지않아서  폴더와 파일들을 다 만들어줘야함. - 전자정부프레임워크 + MS SQL 연동방법 -  1. pom.xml에 아래 내용 추가(1) <dependency>  <groupId>net.sourceforge.jtds</groupId>  <artifactId>jtds</artifactId>  <version>1.3.1</version> </dependency> 2. pom.xml에 아래 내용 추가(2), 내용이 있을경우 주석해제 <dependency>  <groupId>commons-dbcp</groupId>  <artifactId>commons-dbcp</artifactId>  <version>1.4</version> </dependency> 3. globals.properties에 아래 내용 추가 후 다른 DB설정 부분 주석처리 또는 삭제 Globals.DriverClassName=net.sourceforge.jtds.jdbc.Driver Globals.Url=jdbc:jtds:sqlserver://localhost:1433/DB명 4. context-datasource.xml 수정 <!-- Mssql  --> <bean id="dataSource-mssql" class="org.apache.commons.dbcp.BasicDataSource" destroy-method="close">  <property name="driverClassName" value="${Globals.DriverClassName}"/>  <pr...
자세한 내용 보기

request.getServletContext 가 빨간줄 생길때

http://blog.naver.com/PostView.nhn?blogId=javaking75&logNo=220072102739  참조~ 버전을 바꿔줍니다   <dependency>              <groupId> javax.servlet </groupId>              <artifactId> javax.servlet-api </artifactId>              <version> 3.0.1 </version>              <scope> provided </scope>          </dependency>          <dependency>              <groupId> javax.servlet.jsp </groupId>              <artifactId> jsp-api </artifactId...
자세한 내용 보기

자바스크립트로 confirm 을 이용한 페이지 이동

<a onclick="del(${one.no})" style="cursor: pointer;" />삭제</a>    여길 누르면 자바스크립트의 함수가 실행됨 <script> function del(no){ var is = confirm("정말삭제하시겠습니까?");   확인을 누르면 이동, 취소누르면 아무 이벤트도 발생안함. if(is){ alert("바보="+no); location.href="<c:url value='/ErniW7HVND/OpenYard/LIBNews/LIBNewsDelete.lib?no='"+no+" />"; return true; } else{ return false; } } </script>
자세한 내용 보기