html5에서 지도를 불러와서 어플화면에 표시하는데 .,. 정보
html5에서 지도를 불러와서 어플화면에 표시하는데 .,.본문
제가 html5를 공부하면서 어플을 만드는 중인데요..
구글에서 오픈소스를 불러와서 만들고있씁니다.
그런데 지도를 핸드폰 화면에 표시할때 핸드폰 화면이 다 다르므로 그 사이즈에 맞게 지도의 전체부분을 자르지 않도록 표현하려고 하는데요... 어떻게 해야되는지 모르겠습니다. 알려주시면 감사하겠습니다.
밑에 소스에다 어떻게 추가해야되는지 궁금합니다.
<html>
<head>
<meta name="viewport" content="width=device-width,user-scalable=yes,initial-scale=1.0,maximum-scale=3.0" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 90% }
</style>
<link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.1.0.min.css" />
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB_5CnaVjEalX7s-KjJvnjr3EJSNUbp7mE&sensor=true"
type="text/javascript" ></script>
<script src="jquery.mobile/jquery-1.7.2.min"></script>
<script src="jquery.mobile/jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript" src="ui/min/jquery.ui.map.full.min.js"></script>
<script type="text/javascript" src="ui/jquery.ui.map.extensions.js"></script>
<script type="text/javascript" charset="utf-8">
var latitude = 36.64;
var longitude = 127.48;
var watchId = NULL;
var map = NULL;
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(latitude, longitude),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
watchId = navigator.geolocation.watchPosition(showLocation, errorCallback, 0);
}
function showLocation(position) {
latitude = position.coords.latitude;
longitude = position.coords.longitude;
alert("위도 : " + latitude + " 경도: " + longitude);
}
function onError(posError) {
document.getElementById("message").innerHTML = "Error Code: "
+ posError.code + "Error Message: " + posError.message;
}
function errorCallback(error) {
switch(error.code) {
case error.TIMEOUT:
// Acquire a new position object.
alert("에러");
break;
};
}
</script>
</head>
구글에서 오픈소스를 불러와서 만들고있씁니다.
그런데 지도를 핸드폰 화면에 표시할때 핸드폰 화면이 다 다르므로 그 사이즈에 맞게 지도의 전체부분을 자르지 않도록 표현하려고 하는데요... 어떻게 해야되는지 모르겠습니다. 알려주시면 감사하겠습니다.
밑에 소스에다 어떻게 추가해야되는지 궁금합니다.
<html>
<head>
<meta name="viewport" content="width=device-width,user-scalable=yes,initial-scale=1.0,maximum-scale=3.0" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 90% }
</style>
<link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.1.0.min.css" />
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB_5CnaVjEalX7s-KjJvnjr3EJSNUbp7mE&sensor=true"
type="text/javascript" ></script>
<script src="jquery.mobile/jquery-1.7.2.min"></script>
<script src="jquery.mobile/jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript" src="ui/min/jquery.ui.map.full.min.js"></script>
<script type="text/javascript" src="ui/jquery.ui.map.extensions.js"></script>
<script type="text/javascript" charset="utf-8">
var latitude = 36.64;
var longitude = 127.48;
var watchId = NULL;
var map = NULL;
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(latitude, longitude),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
watchId = navigator.geolocation.watchPosition(showLocation, errorCallback, 0);
}
function showLocation(position) {
latitude = position.coords.latitude;
longitude = position.coords.longitude;
alert("위도 : " + latitude + " 경도: " + longitude);
}
function onError(posError) {
document.getElementById("message").innerHTML = "Error Code: "
+ posError.code + "Error Message: " + posError.message;
}
function errorCallback(error) {
switch(error.code) {
case error.TIMEOUT:
// Acquire a new position object.
alert("에러");
break;
};
}
</script>
</head>
댓글 전체
<div id="map_canvas">지도출력부분</div> 형태라면
상단 css
#map_canvas { width:100%; height: 90% } /* 너비 추가 후 테스트 해 보세요. */
상단 css
#map_canvas { width:100%; height: 90% } /* 너비 추가 후 테스트 해 보세요. */
