Where The Streets Have No Name

appspresso에서 google map으로 현재 위치 표시 본문

Developement/Mobile

appspresso에서 google map으로 현재 위치 표시

highheat 2011. 8. 17. 19:02 
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">	
    <link rel="stylesheet" href="css/jquery.mobile-1.0a4.1.min.css" /> 
	<script src="/appspresso/appspresso.js"></script>
	<script src="js/jquery-1.5.2.min.js"></script>
	<script type="text/javascript" src="js/jquery.mobile-1.0a4.1.min.js"></script>
	<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.1&sensor=true"></script>
	<script>
	//activate ax.log(), remove when you release app
	ax.runMode = Ax.MODE_DEBUG;
	</script>
	<script type="text/javascript">
		
		$('#page-map').live("pagecreate", function() {		
			var suc = function(position) {
				initialize(position.coords.latitude,position.coords.longitude);
		    };
		    var locFail = function(e) {		    	
		    	ax.ext.ui.alert('Can\'t retrieve position.\nError: ' + e.message, function(){});
		    };
		    navigator.geolocation.getCurrentPosition(suc, locFail, {timeout:30000});			
		});
		
		function initialize(lat,lng) {			
			var latlng = new google.maps.LatLng(lat, lng);
			var myOptions = {
				zoom: 14,
				center: latlng,
				mapTypeId: google.maps.MapTypeId.ROADMAP
		    };
		    var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
			
			var marker = new google.maps.Marker({
      			position: latlng, 
      			map: map
  			});
			map.setCenter(latlng);
		}
	</script>
</head>
<body>
<div data-role="page" id="page-map" style="width:100%; height:100%;">
	<div data-role="header"><h1>Main Page</h1></div>
	<div data-role="content" style="width:100%; height:100%; padding:0;"> 
		<div id="map_canvas" style="width:100%; height:100%;"></div>
	</div>
</div>	
</body>
</html>
'Developement/Mobile' Related Articles more