본문 바로가기
Programming/Web

google map & tabs with jquery

by Chan_찬 2012. 2. 10.
728x90
반응형
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps AJAX + mySQL/PHP Example</title>
    <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAR0TWf73rulOP_SnETQPFKxRj5djmSsmVAgDaRb1psFcJlThRhxSjxifqM96NjrBsBn2XrZWSE-QQqQ" 
       type="text/javascript"></script>
       
    <script src="http://code.jquery.com/jquery.min.js"></script>
    <!--script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script-->
    <script src="http://www.sunsean.com/idTabs/jquery.idTabs.min.js"></script>
    
    
    
    
    <script type="text/javascript">
    //<![CDATA[
    function getNavigatorInfoStr()
    {
        var name = navigator.appName, ver = navigator.appVersion,
            ver_int = parseInt(navigator.appVersion), ua = navigator.userAgent, infostr;
        if(name == "Microsoft Internet Explorer")
        {

            if(ver.indexOf("MSIE 3.0") != -1) return "Internet Explorer 3.0x";
            if(ver_int != 4) return "Internet Explorer " + ver.substring(0, ver.indexOf(" "));
     
            var real_ver = parseInt(ua.substring(ua.indexOf("MSIE ") + 5));
            if(real_ver >= 7) infostr = "Windows Internet Explorer ";
            else infostr = "Microsoft Internet Explorer ";
     
            if(ua.indexOf("MSIE 5.5") != -1) return infostr + "5.5";
            else return infostr + real_ver + ".x";
     
            return "Internet Explorer";
        }
        else if(name == "Netscape")
        {
            if(parseInt(ua.substring(8, 8)) <= 4){
              return "Netscape " + ver.substring(0, ver.indexOf(" "));
            }else if(ua.lastIndexOf(" ") < ua.lastIndexOf("/")){
              return ua.substring(ua.lastIndexOf(" "));
            }else return "Netscape";
        }
        else {
            return name;
        }
    }
createXHR = function(){
    var XHR = null;
    //XMLHttpRequest 를 생성한다.
    if(window.XMLHttpRequest){
        //IE를 제외한 브라우저
        var XHR = new XMLHttpRequest() ;
    } else if(window.ActiveXObject){
        //Win IE4+
        try {
            var XHR = new ActiveXObject("Msxml2.XMLHTTP") ;
        } catch (e) {
            try {
                var XHR = new ActiveXObject("Microsoft.XMLHTTP") ;
            } catch (e2) {
                //var XHR = null;
                alert('ERROR:createXHR 1');
                return XHR;
            }
        }
    }else {
        // XMLHttpRequest를 지원하지 않는 경우
        //var XHR = null;
        alert('ERROR:createXHR 2');
        return XHR;
    }
    return XHR;
}     

 function f_xml(){
    var client = createXHR();
    var xmlText="";
    var marker = new Array();
    client.open("GET", "phpsqlajax_expectedoutput.xml",false);
    client.onreadystatechange = function(){
        if(this.readyState == 4 && this.status == 200) {//서버 데이터 처리가 완료된경우 4 , 200
            if(this.responseXML != null && this.responseXML.documentElement.getElementsByTagName('marker')){
                xmlText = this.responseXML;
            }else{
            //
            }
        } else if (this.readyState == 4 && this.status != 200) {
            if(this.responseXML != null && this.responseXML.documentElement.getElementsByTagName('marker')){
                xmlText = this.responseXML;
            }
        }
        var markers = xmlText.documentElement.getElementsByTagName("marker");//alert(markers.length);
        for (var i = 0; i < markers.length; i++) {
            var name = markers[i].getAttribute("name");
            var address = markers[i].getAttribute("address");
            var type = markers[i].getAttribute("type");
            var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
                                parseFloat(markers[i].getAttribute("lng")));
            marker[i] = createMarker(point, name, address, type);
        }
    };
    client.send();
    return marker;
}
    var iconBlue = new GIcon(); 
    iconBlue.image = 'http://labs.google.com/ridefinder/images/mm_20_blue.png';
    iconBlue.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
    iconBlue.iconSize = new GSize(12, 20);
    iconBlue.shadowSize = new GSize(22, 20);
    iconBlue.iconAnchor = new GPoint(6, 20);
    iconBlue.infoWindowAnchor = new GPoint(5, 1);
    var iconRed = new GIcon(); 
    iconRed.image = 'http://labs.google.com/ridefinder/images/mm_20_red.png';
    iconRed.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
    iconRed.iconSize = new GSize(12, 20);
    iconRed.shadowSize = new GSize(22, 20);
    iconRed.iconAnchor = new GPoint(6, 20);
    iconRed.infoWindowAnchor = new GPoint(5, 1);
    var customIcons = [];
    customIcons["restaurant"] = iconBlue;
    customIcons["bar"] = iconRed;
function load() {
     if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.addControl(new GSmallMapControl());
        map.addControl(new GMapTypeControl());
        map.setCenter(new GLatLng(47.614495, -122.341861), 13);
        
/* 
        GDownloadUrl("phpsqlajax_expectedoutput.xml", function(data, responseCode){
            var xml = GXml.parse(data);
            var makers = xml.documentElement.getElementByTagName("marker");
            for(var i=0;i<marker.length;i++){
                var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng")));
                map.addOverlay(createMarker(point, markers[i].getAttribute("name"), markers[i].firstChild.nodeValue));
            }
            //document.getElementById("side_bar").innerHTML = side_bar_html;
        });
        */
        var marker = new Array();
        marker = f_xml();
        
        for(var i=0;i<marker.length;i++){ map.addOverlay(marker[i])};
        
        
        // 사용자 브라우저 확인
        //document.getElementById('browser').innerHTML = getNavigatorInfoStr();
        var browserIndex = navigator.userAgent;
        var browserName = "";
        if (browserIndex.indexOf('iPhone') != -1){
            browserName = "iPhone";
        }else if(browserIndex.indexOf('MSIE')!=-1){
            browserName = "Internet Explorer";
        }else
            browserName = browserIndex;
            
        document.getElementById('browser').innerHTML = browserName;
        }
}
function createMarker(point, name, address, type) {
  var marker = new GMarker(point, customIcons[type]);
  var html = "<b>" + name + "</b> <br/>" + address;
  GEvent.addListener(marker, 'click', function() {
    marker.openInfoWindowHtml(html);
  });
  return marker;
}
    
    //]]>
  </script>
  
<style>
/* 메뉴 전체 스타일 */
#menu {  
  width: 960px; /* 메뉴 너비 */
  height: 40px; /* 메뉴 높이 */
  clear: both; /* 플로팅 사용하지 않음 */
}
/* 메인 메뉴 스타일 */
ul.idTabs { 
  float: left; /* 왼쪽으로 플로팅 */
  width: 960px; /* 메인 메뉴 너비 */
  margin: 0; /* 여백 */
  padding: 0; /* 안여백 */ 
  list-style: none; /* 불릿 없앰 */
  background:  #39F; /* 배경색 */
  -moz-border-radius-topright: 10px; /* 탭 모양 만듦(topleft와 topright를 둥글게 처리) */
  -webkit-border-top-right-radius: 10px;
  -moz-border-radius-topleft: 10px;
  -webkit-border-top-left-radius: 10px;  
}
 /* 메인 메뉴 항목 스타일 */
ul.idTabs li {
  display: inline; /* 가로로 배치 */
}
/* 메인 메뉴 링크 스타일 */
ul.idTabs li a { 
  float: left; /* 왼쪽으로 플로팅 */
  font: bold 14px 굴림;  /* 텍스트 스타일 */
  line-height: 40px; /* 줄간격 */
  color: #fff; /* 글자색 */
  text-decoration: none; /* 밑줄없앰 */
  text-shadow: 1px 1px 1px #880000; /* 텍스트 그림자 */
  margin: 0; /* 여백 */
  padding: 0 30px; /* 안여백 */
  background: #39F; /* 배경색 */
  -moz-border-radius-topright: 10px; /* 탭 모양 만듦(topleft와 topright를 둥글게 처리) */
  -webkit-border-top-right-radius: 10px;
  -moz-border-radius-topleft: 10px;
  -webkit-border-top-left-radius: 10px;     
}

/* 현재 선택된 링크 스타일과 마우스 오버 상태일 때 링크 스타일 */
ul.idTabs .current a, ul.idTabs li:hover > a  { 
  color: #fff; /*글자색 */
  text-decoration: none; /* 밑줄 없앰 */
  text-shadow: 1px 1px 1px #330000;  /* 텍스트 그림자 */
  background:  #36F;  /* 배경색 */
  -moz-border-radius-topright: 10px; /* 탭 모양 만듦 */
  -webkit-border-top-right-radius: 10px;
  -moz-border-radius-topleft: 10px;
  -webkit-border-top-left-radius: 10px; 
}
/* 서브 메뉴 스타일 */
ul.idTabs  ul {  
  display: none; /* 기본으로 화면에 표시 안함 */
}
 /* 메인 메뉴 위에 마우스 오버한 후 나타나는 서브 메뉴 스타일 */
ul.idTabs li:hover > ul {
  position: absolute;  /* 고정 위치 포지셔닝 */
  display: block;  /* 영역 확보 */
  width: 920px; /* 너비 */
  height: 45px; /* 높이 */
  margin: 40px 0 0 0; /* 여백 */
  background: #33F;  /* 배경색 */
  -moz-border-radius-bottomright: 10px; /* 탭 모양 만듦(bottoleft와 bottoright를 둥글게 처리) */
  -webkit-border-bottom-right-radius: 10px;
  -moz-border-radius-bottomleft: 10px;
  -webkit-border-bottom-left-radius: 10px; 
}
/* 메인 메뉴 항목에 마우스 오버한 후 나타나는 서브 메뉴 항목의 링크 스타일 */
ul.idTabs li:hover > ul li a { 
  float: left; /* 왼쪽으로 플로팅 */
  font: bold 14px 굴림; /* 텍스트 스타일 */
  line-height: 45px; /* 줄간격 */
  color: #fff; /* 글자색 */
  text-decoration: none; /* 밑줄 없앰 */
  text-shadow: 1px 1px 1px #110000; /* 텍스트 그림자 */
  margin: 0; /* 여백 */
  padding: 0 30px 0 0; /* 안여백 */
  background: #33F;  /* 배경색 */
}
/* 메인 메뉴 항목에 마우스 오버한 후 서브 메뉴 항목에 마우스 오버했을 때 스타일 */
ul.idTabs li:hover > ul li a:hover {
  color: #120000; /*글자색 */
  text-decoration: none; /* 밑줄 없앰 */
  text-shadow: none; /* 텍스트 그림자 */
}
</style>
  
  </head>
  <body onload="load()" onunload="GUnload()">
    <div id="map" style="width: 500px; height: 300px" title="Google Map"></div>
    <div id="browser" title="browserName">browser</div>
    <div>
        <p id="text">text</p>
        <p id="html">html</p>
    </div>
<!-- tab start -->
<script>
$(document).ready(function(){
    $('#menu').tabs({
        fxSlide:true,
        fxFade: true,
        fxSpeed: normal
    });
});
</script>


<div id="menu">
    <ul class="idTabs">
        <li><a href="#tabs-1"> 투표율 </a></li>
        <li><a href="#tabs-2"> 예측조사</a>
            <ul>
              <li><a href="#"> 지역구 </a></li>
              <li><a href="#"> 비례대표</a></li>
            </ul>
        </li>
        <li><a href="#tabs-3"> 개표현황 </a>
            <ul>
                <li><a href="#"> 지역구 </a></li>
                <li><a href="#"> 비례대표 </a></li>          
                <li><a href="#"> 10대 관심지 </a></li>          
            </ul> 
        </li>  
        <li><a href="phpsqlajax_map.htm"> 개표결과 </a>            
            <ul>
              <li><a href="#"> 지역구 </a></li>
              <li><a href="#"> 비례대표</a></li>
            </ul>
        </li>
    </ul>
    <div id="tabs-1">
        <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
    </div>
    <div id="tabs-2">
        <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
    </div>
    <div id="tabs-3">
        <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
        <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
    </div>
</div>
<!-- tab end -->
<!-- tab end -->
    <div id="ll">
    <a href="#" onclick="alert(location.href);">url출력</a>
    <a href="#" onclick="location.reload();">새로고침</a>
    <a href="#" onclick="location.href='HistoryEx.html'">이동</a>
    <br />
    <a href="#" onclick="history.back();"><-이전 페이지</a>
    <a href="#" onclick="history.forward();">앞페이지-></a>
    <br />
    <a href="#" onclick="history.go(-1);"><-이전 페이지</a>
    <a href="#" onclick="history.go(+1);">앞페이지-></a>
    </div>
    
    

<script>
$('#ll').hide();
    $('<p> A new paragraph!</p>');
    $('<input type="button" value="toggle" id="tb">').insertBefore('#browser');
    $('<input type="button" value="wide" id="tbwide">').insertBefore('#browser');
    //$('div').remove(':contains("browser")');
    //$('p:last').text('<strong>text!</strong>');
    $('p:first').html('<strong>html!</strong>');
    
    $('#tb').click(function(){
        //$('#map').fadeOut();
        $('#map').toggle('slow');
    });
    
    $('#tbwide').click(function(){
        //anmating css properties
        $('#map').animate({
            //padding:'100px'
            height:'+=50px',
            width: '+=50px'
            //height:'hide'
        }, 4000, 'swing');
        });
    
    $('#tb').hover(
    function(){
        $('#tb').css('color','red');
    },function(){
        $('#tb').css('color','');
    });
    
    $('<div id="tDiv"></div>').css({
        width:'100px',
        height:'100px'
    }).appendTo('browser');
    
    
</script>

  </body>
</html>
728x90
728x90
BIG
저작자표시 비영리 동일조건

'Programming > Web' 카테고리의 다른 글

HTML Color Codes  (0) 2012.07.11
HTML escape 이스케이프 문자  (0) 2012.02.15
모바일웹 - 가로보기, 세로보기  (0) 2012.02.10
블로그에 구글맵 삽입하기/Google Map  (0) 2012.02.09
JavaScript, jQuery, AJAX 강좌 모음  (0) 2012.01.16
Buy me a coffeeBuy me a coffee

관련글

댓글

티스토리툴바