본문 바로가기

스크립트/Image,Text관련

google api 로 현재위치 찾기

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name="viewport" content="width=620" />

<title></title>
</head>
<body>

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

 <script type="text/javascript">

function success(position) {
  

 var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
  var myOptions = {
    zoom: 17,
    center: latlng,
    mapTypeControl: false,
    navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
    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
  });
}

 

function error(msg) {
 
    var s = document.querySelector('#map_canvas');
  s.innerHTML = typeof msg == 'string' ? msg : "failed";
  s.className = 'fail';
  // console.log(arguments);
}

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(success);
} else {
  error('not supported');
}
</script>   

 <div id="map_canvas" style="width:500px; height:300px"></div>

</body>
</html>

[출처] [html5]구글지도 api로 자신의 위치 찾기!|작성자 별님반