브라우저 제목

탭-collapsible 및 구글맵을 이용한 현재 위치 찾기

html

<!-- site about -->
    <div data-role="page" id="site_about">
        <div data-role="header" id="header">
            <a href="#" data-rel="back" class="ui-btn ui-icon-back ui-btn-icon-notext">back</a>
            <h1 class="logo"><a href="#main"><img src="img/logo1.png"></a></h1>

            
        </div>
        <div data-role="content" id="content">
            <div data-role="collapsibleset" data-inset="false">
                
<div data-role="collapsible" data-inset="false" data-collapsed="false" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right">

                    <h4>학습사이트에서는</h4>
                    <p>학습사이트에서는 이러쿵 저러쿵합니다. 학습사이트에서는 이러쿵 저러쿵합니다. 
                학습사이트에서는 이러쿵 저러쿵합니다. 학습사이트에서는 이러쿵 저러쿵합니다. 
                학습사이트에서는 이러쿵 저러쿵합니다.</p>
                </div><!-- /collapsible -->
                <div data-role="collapsible" data-inset="false" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right">
                    <h3>사이트연혁</h3>
                    <ul>
                        <li>사이트 연혁1</li>
                        <li>사이트 연혁2</li>
                        <li>사이트 연혁3</li>
                        <li>사이트 연혁4</li>
                        <li>사이트 연혁5</li>
                    </ul>
                </div><!-- /collapsible -->
                <div data-role="collapsible" data-inset="false" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right">
                    <h3>오시는 길</h3>
                    <div id="map_canvas" class="map_style"></div>
                </div><!-- /collapsible -->
            </div>
        </div>
        <div data-role="footer" id="footer" data-position="fixed">
             <div data-role="navbar">
                <ul>
                    <li><a href="#main" data-icon="home" class="ui-btn-active">Home</a></li>
                    <li><a href="#" data-icon="search" id="current_location" >현위치 찾기</a></li>

                    <li><a href="#" data-icon="search" >검색</a></li>
                    <li><a href="#" data-icon="info" >정보</a></li>
                </ul>
            </div>
        </div>
    </div>

 

css

 

#site_about>#content{clear:both;}
.ui-header .ui-title{margin:0;}
.logo img{width:50px;}

 

.map_style {
            padding: 0px;
            height: 400px;
            width: 100%;
        }

 

js

<!-- JQuery-UI-Map을 사용하기 위해 반드시 필요한 태그-->
        <script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>
        <script src="ui/min/jquery.ui.map.full.min.js" type="text/javascript"></script>
        <script src="ui/jquery.ui.map.extensions.js" type="text/javascript"></script>
                
        <script id="panel-init">
            $(function() {
            $( "body>[data-role='panel']" ).panel();
            });
        </script>
        
        <!-- 구글 맵 api /구글 맵 api -->
        <script> 
        
      function initMap() {
        var StartLatLng = new google.maps.LatLng(37.739188, 127.045902);
        $('#map_canvas').gmap({"center" : StartLatLng , "zoom" : 16}  );
        var marker = new google.maps.Marker({
         position: StartLatLng,
          map: gmap
        });
      }
      
    </script>
    <script>
        $(function(){
            
            $("#current_location").click(function() { 

                $("#map_canvas").gmap("getCurrentPosition" ,
                
                function(position, status) {
                    if ( status === "OK" ) {
                        var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude)
                        var markerBlue = "http://www.google.com/intl/en_us/mapfiles/ms/icons/blue-dot.png";
                        $("#map_canvas").gmap("get", "map").panTo(latlng); 
                        $("#map_canvas").gmap("addMarker", {"position": latlng, "icon": markerBlue});                        
                    } else {
                        alert("현재위치를 찾을 수 없습니다. ");
                    }
                }); //$("#map_canvas").gmap() 끝
            }); // $("#current_location").click() 끝
        
        });
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD--8oOwZwAOlWAFJftmVnETKlSkFYpH0o&callback=initMap">
    </script>

제목 날짜
탭-collapsible 및 구글맵을 이용한 현재 위치 찾기 file 2018.02.04
패널을 이용한 메뉴와 그리드 file 2018.02.01
갤러리화면을 만들기 위한 fotorama 플러그인 file 2018.01.31
index ui구성2 file 2018.01.30
index의 ui구성 file 2018.01.29
여러 페이지를 이용하여 화면 구성 file 2018.01.28
한 페이지에 여러화면을 구성 file 2018.01.28
jquey mobile 테마정하기 file 2018.01.28
기본 페이지 작성 file 2018.01.28
phonegap을 사용하기 위한 준비 작업 file 2018.01.24
태그 목록