폰갭에서 구글 지도 이용하기
폰갭 어플에서 지도 서비스를 위한 구글 이용법
어플 개발을 해 보면 요즘은 지도 서비스를 많이 합니다.
폰갭의 경우 안드로이드 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,
이 옵션은 좌표가 꽂히도록 효과를 주는 옵션입니다.
