상세 컨텐츠

본문 제목

[MobileWeb]WebGoogleMap에 xml 파싱을 하여 맵에 pin 박아주기.

Android.. Story/Web&App Space..

by HeyLee 2011. 6. 27. 10:08

본문



---------------- 
아 또 오랜만에 쓰게 되는군요.... 요세 토익 공부하느라 정신을 못차리겠습니다..=_=

이래서 학부때 주변에서 토익공부해라 토익공부해라; 할때 컴퓨터 부분만 들이파고있다가 졸업하고 나서 뒷통수 맞는 느낌

이라고 할까요? ;; 저번에 시간이 좀 나서 간단히 공모전에 참가할떄 구글맵 쓴 예제를 오늘은 포스팅해보겠습니다.

대충 요런거 제작해보겠습니다.


구글맵은 구글은에서 제공하는 Map 서비스입니다. 
일반 지도 및 위성 사진 두가지를 제공하고 기본적으로 맵 컨트롤러도 전부 제공해줍니다.

사용할수있는것?...

1. Maps JavaScript API - Javascript를 사용하여 웹페이지에 Google 지도를 삽입합니다. 

2. Maps API for Flash - Flash 기반 웹페이지나 애플리케이션에 ActionScript API를 사용합니다.

3. Google Earth API -진정한 3D 디지털 지구를 웹페이지에 삽입합니다.

4. Static Maps API - 빠르고 간단하게 Google 지도 이미지를 자신의 웹페이지나 모바일 사이트에 삽입합니다
5. 웹 서비스 - url 요청을 사용하여 지오코딩 길찾기 고도 및 장소 정보에 접근 등.

6. 지도 데이터. - 지형지물의 모델(Placemark, 선 및 모양)과 지형지물 모음을 사용하여 Google Data API 피드를 통해 지도 데이터를 보고 저장하고 업데이트합니다. 


이번에 제가 사용한건 1번 자바스크립트로 web에 GoogleMap 띄우는 것 그리고 웹서비스에서 xml 파싱 정도를 이용하였습니다.
2번 3번은 뭐..모바일 환경 홈페이지 제작이였기에 플래쉬 나 구글 어스는 제외 시켰습니다.

제작에 사용된건 대충 이렇습니다. 

markup : html5 - 웹방식 표준제작

화면디자인 요소 : CSS3

동적기능 요소 : 자바 스크립트(ECMA Script)

web에서 App 느낌이 나는 UI제공해주는!!

그 외 : Jquery, Jquery mobile, google Map v3, 포토샵 -_-;


사용 툴 
 eclipse - Java EE -> 동적 웹 제작 , Tomcat 6.0 사용 테스트. (환경 설치는 전 포스팅 참조)
 호스팅은 무료 호스팅 nayana.com. or cafe24.com 에서 받았습니다. 



그렇게 해서 3일간 작업 결과물 http://anyung.nayana.com 

GoogleMap 소스코드.

<?xml version="1.0" encoding="UTF-8"?>


<html>

<head>
 

  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=medium-dpi charset=UTF-8"/> 

  <meta http-equiv="Content-Type"  content="application/xhtml+xml; charset=UTF-8" />


 <meta HTTP-EQUIV="Pragma" CONTENT="no-cache">

 <meta HTTP-EQUIV="Expires" CONTENT="-1">

 

 <title>안양 문화재 Map</title>

 

<script type="text/javascript" src='http://maps.google.com/maps/api/js?sensor=true'></script>

<script type="text/javascript">


    var geocoder;


    var map;

    var markers = [];

    var infowindows = [];

    var addressDong;

    var locationSelect;


      

    function initialize() {

        geocoder = new google.maps.Geocoder();

        var latlng = new google.maps.LatLng(37.38707192644979, 126.93157196044922);// 디폴트로 안양시청찍어줌.

        

        var myOptions = {

            zoom: 12,

            mapTypeControlOptions: {style: google.maps.NavigationControlStyle.ANDROID},

            center: latlng,

            mapTypeId: google.maps.MapTypeId.SATELLITE

        }

 

        detectBrowser();

               

        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);//맵을 그려줌...



        fn_drawObjects(); // 객체를 그려준다.


        

if (navigator.geolocation) {

  navigator.geolocation.getCurrentPosition(success,error);

}

function success(position) {

    var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

     var marker2 = new google.maps.Marker({

         position: latlng, 

         animation: google.maps.Animation.BOUNCE,

         map: map

     });

   }

   function error(msg) {

       var s = document.querySelector('#map_canvas');

     s.innerHTML = typeof msg == 'string' ? msg : "failed";

     s.className = 'fail';

     // console.log(arguments);

   }

    }

    

    function fn_drawObjects() {


        clearObjects();  // 마커, 인포윈도우 삭제


        // 마커정보 가져오기 

        var searchUrl = './markerInfo.xml';

        downloadUrl(searchUrl, function(data, status){

            var xml = parseXml(data); 

     

            var markerNodes = xml.documentElement.getElementsByTagName("marker"); 

           

            // 기존 마커 모두 삭제

            for (var i = 0; i < markerNodes.length; i++) { 

                var address = markerNodes[i].getAttribute("address");

                var store = markerNodes[i].getAttribute("name");  

                var note = markerNodes[i].getAttribute("note");

             var lat = markerNodes[i].getAttribute("lat");

             var lon = markerNodes[i].getAttribute("lon");

                

                fn_createMarker(address, store, note, lat,lon); 

            } // end for

        });

    }

    var index =1;

    function fn_createMarker(address, store, note, lat, lon) {

var latlng = new google.maps.LatLng(lat,lon);

                   var marker = new google.maps.Marker({

                        map: map, 

                        draggable:false,

                        animation: google.maps.Animation.DROP,

                        position: latlng

                    });                   

                    markers.push(marker); 

                    var infowindow = new google.maps.InfoWindow({     

                        content: store+"<br>"+address

                         }); 

                   google.maps.event.addListener(marker, 'click', function() {   infowindow.open(map,marker); });

    }

    

    function downloadUrl(url, callback) { // 동기식

        var request = window.ActiveXObject ? 

        new ActiveXObject('Microsoft.XMLHTTP') : 

        new XMLHttpRequest; 

        request.open('GET', url, false); 

        request.send(null); 

        callback(request.responseText, request.status); 

    } 

    function parseXml(str) { 

      if (window.ActiveXObject) { 

        var doc = new ActiveXObject('Microsoft.XMLDOM'); 

        doc.loadXML(str); 

        return doc; 

      } else if (window.DOMParser) { 

        return (new DOMParser).parseFromString(str, 'text/xml'); 

      } 

    } 


    function doNothing() {} 

    

    function clearObjects() {

        for (var i = 0; i < markers.length; i++) { 

            markers[i].setMap(null); 

        }

        markers.length = 0;

        

        for (var i = 0; i < infowindows.length; i++) { 

            infowindows[i].close();

        } 

        infowindows.length = 0; 

    }

     

    function toggleBounce(store) {


    

     alert("바운딩."+markers);

    

        var infowindow = new google.maps.InfoWindow({

            content: store //+" : "+note

  

        });

        

        infowindow.open(map, marker);


        if (markers[marker].getAnimation() != null) {

          markers[marker].setAnimation(null);

        } else {

          markers.setAnimation(google.maps.Animation.BOUNCE);

        }

      }

    function detectBrowser() {

       var useragent = navigator.userAgent;

       var mapdiv = document.getElementById("map_canvas");


         if(useragent.indexOf('Android') != -1){

         alert("위치추적에 동의하시면 자신의 위치를 보실수있습니다.");

       }

           

       if (useragent.indexOf('iPhone') != -1 || useragent.indexOf('Android') != -1 ) {

         mapdiv.style.width = '100%';

         mapdiv.style.height = '90%';

       } else {

         mapdiv.style.width = '600px';

         mapdiv.style.height = '800px';

       }

     }

</script>


</head>

<body style="margin: 0px; padding: 0px;" onload="initialize()">

<div id="map_canvas">map div</div>

</body>

</html>


제작시 참조 블로그.
http://blog.naver.com/stday?Redirect=Log&logNo=40109221503



그냥 App만 제작하다가 Web제작을 해볼려고하니 나름 제밌네요. 이것저것 많이 찾고 많은 사이트 돌아다니고..=_=

가장 Mobile Web 을 제작하는데 필수적으로 들러야할 홈페이지 및 참조한 사이트 들입니다.



http://www.w3schools.com/
- Web제작하는데 참조할 정보를 많이 제공해줍니다. 기초 문법부터 튜토리얼 까지자세하게 나와있습니다.

http://code.google.com/intl/ko-KR/apis/maps/index.html 
-  Google Map Api 사이트입니다. 정말 도움 많이 되더군요.

http://jquery-ui-map.googlecode.com/svn/trunk/demos/jquery-mobile-example.html
- Jquery Mobile 와  Google Map을 결합 된 프로젝트 예제 소개.
 
 http://jqtouch.com/
- Jquery mobile하고 비슷하지만 다른 것...이랄까요?.. 저는 터치는 사용하지 않았습니다.

http://v.mobileok.kr
- 모바일 web 유효성 검사...하는 곳...html5 문법적으로 틀린게 있으면 "친절하게" 에러 메시지 fail등급을 띄워줍니다.
  대충 봤을때 A등급 만 맞아도 상관없다고 느끼지만..= _=; AAA 등급 받기는 엄청 까다롭습니다..

http://www.appspresso.com/appdev/appMain.do
-  이놈은.. 하이브리드 앱 제작 용. 처음 구상하면서 건드려본놈입니다; 물론 개발 방향이 web방향으로 바뀌어서 건들다 말았지만...  


Google Map만 포스팅 하려다가 어쩌다가보니 Mobile Web까지 전부 소개하게 되어버렸네요.

좋은 참조 되셧다면 댓글이나 하나 남겨주시면 매우매우매우..감사드립니다. 
----------------------


저작자표시 비영리 변경금지

'Android.. Story > Web&App Space..' 카테고리의 다른 글

[모바일 웹]구글 맵스 활용 예제 끄적끄적..  (0) 2011.05.26
[Web&App]html5+CSS3 개발환경. JSP ,MY_SQL, Eclipse 개발 환경 갖추기.(2)  (0) 2011.05.08
[Web&App]html5+CSS3 개발환경. JSP ,MY_SQL, Eclipse 개발 환경 갖추기.  (1) 2011.05.06
[CafeStory] Localhost 접속이 안될때...(127.0.0.1)  (0) 2011.05.06

관련글 더보기

댓글 영역

티스토리툴바