폰갭에서 구글 지도 이용하기

폰갭 어플에서 지도 서비스를 위한 구글 이용법

어플 개발을 해 보면 요즘은 지도 서비스를 많이 합니다.

폰갭의 경우 안드로이드 SDK를 활용하기 힘든경우가 있습니다. 이경우 다음과 같이 처리하고 있습니다.

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

<script src="https://maps.googleapis.com/maps/api/js?key=키값&v=3.exp"></script>

        <script>            

            function showPosition(position)

            {              

var map;

            var myLatLng;

            var x=37.4945039; 

            var y=126.8604171; // 기본 gps좌표는 좌표를 고정해서 나타낼때 사용하세요. gps가 없는 경우 사용하기 위해 두었습니다.

            if (position.coords.latitude) {

            var x=position.coords.latitude;

            var y=position.coords.longitude;

            }

            var myLatLng = {lat: x, lng: y};

            var mapOptions = {

            zoom: 11,

            center: myLatLng,

            mapTypeId: google.maps.MapTypeId.ROADMAP

            };

            map = new google.maps.Map(document.getElementById('map_canvas'),

            {

            zoom: 11,

            center: myLatLng,

            mapTypeId: google.maps.MapTypeId.ROADMAP

            });

            var infowindow = new google.maps.InfoWindow({

            content: "MY position"

            });

            var marker = new google.maps.Marker({

            map: map,

            position: myLatLng,

            animation: google.maps.Animation.DROP,

            title: 'ME'

            });

            infowindow.open(map, marker);            

            };            

            function gps_error(error) {

              alert("GPS가 설정되지 않았습니다. 확인후 다시 이용해주세요."+error.message);

            }

            var gps_option={

                maximumAge:3000,

                timeout:5000,

                enableHighAccuracy:true

            }

            function initialize() {               

                navigator.geolocation.getCurrentPosition(showPosition,gps_error,gps_option);                              

            }

이렇게 처리하면 폰의 gps를 찾아서 만약 없다면 alert로 오류를 나타내고 만약 gps를 찾게 되면 지도와 좌표에 표시하게 됩니다.

만약 사용하던중에 자기 위치를 다시 찾는 버튼이 필요하시면 버튼을 만드시고 initialize() 를 한번 처리 하시면 언제던지 지도는 자기 위치를 찾아 줍니다.

위 맛집 지도를 만든 어플인데 위 지도를 처음에는 다음지도를 넣었다가 구글 지도로 바꿨습니다.

지도에서 보시면 자신의 위치가 잘나타납니다. 

           animation: google.maps.Animation.DROP,

이 옵션은 좌표가 꽂히도록 효과를 주는 옵션입니다.