https://developers.google.com/maps/documentation/javascript/basics?hl=ko-KR 
참고~ 구글api

-- api.css
@CHARSET "EUC-KR";
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#map_canvas {
  height: 80%;
    width:80%;
}

@media print {
  html, body {
    height: auto;
  }

  #map_canvas {
    height: 80%;
    width:80%;
  }
}
----------------------------------------------------------------------------- 

<%@ page contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR"%>
<%  request.setCharacterEncoding("EUC-KR"); %>
<% 
/* 지도를 클릭하면 줌4에서 8로 변경되고 좌표의 마우스커서가 가면 글이 출력된다. 
참고: 뷰포트에서 변경사항을 감지하려면 구성된 zoom_changed 및 center_changed 
이벤트보다는 특정 bounds_changed 이벤트를 사용해야 합니다. Maps API는 후자의 
이벤트를 따로 발생시키므로 뷰포트가 정식으로 변경되기 전에는 getBounds()에서 
유용한 결과를 보고하지 않을 수도 있습니다. 이러한 이벤트 이후에 getBounds()하려면 
대신 bounds_changed 이벤트를 수신해야 합니다. */
%>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0px; padding: 0px }
  #map_canvas { height: 100% }
</style>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
  function initialize() {
    var myLatlng  = new google.maps.LatLng (35.174444, 129.078888);
    var myOptions = {
      zoom: 4,
      center: myLatlng ,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  
  google.maps.event.addListener(map, 'zoom_changed', function() {
   setTimeout(moveToDarwin, 3000);
 });
 
 var marker = new google.maps.Marker({
     position: myLatlng , 
     map: map,
     title:"이거 클릭하니;"
 });
 google.maps.event.addListener(marker, 'click', function() {
   map.setZoom(8);
 });
}
 
function moveToDarwin() {
 var darwin = new google.maps.LatLng(35.174444, 129.078888);
 map.setCenter(darwin);
}

</script>
</head>
<body onload="initialize()">
  <div id="map_canvas" style="width:80%; height:80%"></div>
</body>
</html>

-- 결과 : Map의 위도, 경도 값이 마커로 표시되어 마커의 커서를 가져가면 글내용이 출력되고, 클릭시 줌out된다.

 

 -----------------------------------------------------------------------------  
<%@ page contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR"%>
<%  request.setCharacterEncoding("EUC-KR"); %>
<% 
/* Google Maps API V3의 UI 이벤트는 일반적으로 이벤트 인자를 전달합니다.
이벤트 인자는 이벤트 발생 시 UI 상태를 알리는 이벤트 리스너를 사용해 액세스할 수 있습니다.
예를 들어 UI 'click' 이벤트는 일반적으로 지도의 클릭된 위치를 나타내는 latLng 속성이 포함된
MouseEvent를 전달합니다. 위 동작은 UI 이벤트에 고유하며 MVC 상태 변경 이벤트에서는 인자를
전달하지 않습니다.
객체 속성에 액세스하는 방식과 동일하게 이벤트 리스너 내의 이벤트 인자에 액세스할 수 있습니다.
다음 예제에서는 지도에 대한 이벤트 리스너를 추가하고 사용자가 지도를 클릭할 때 
클릭된 위치에서 마커를 만듭니다. */
%>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0px; padding: 0px }
  #map_canvas { height: 100% }
</style>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
  function initialize() {
    var myLatlng  = new google.maps.LatLng (35.174444, 129.078888);
    var myOptions = {
      zoom: 4,
      center: myLatlng ,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  
  
  google.maps.event.addListener(map, 'zoom_changed', function() {
   setTimeout(moveToDarwin, 3000);
 });
 
 var marker = new google.maps.Marker({
     position: myLatlng , 
     map: map,
     title:"이거 클릭하니;"
 });
 google.maps.event.addListener(marker, 'click', function() {
   //map.setZoom(8);
 });
 
 google.maps.event.addListener(map, 'click', function(event) {
   placeMarker(event.latLng);
});
}
 
function moveToDarwin() {
 var darwin = new google.maps.LatLng(35.174444, 129.078888);
 map.setCenter(darwin);
}
function placeMarker(location) {
 var marker = new google.maps.Marker({
     position: location, 
     map: map
 });

 map.setCenter(location);
}

</script>
</head>
<body onload="initialize()">
  <div id="map_canvas" style="width:80%; height:80%"></div>
</body>
</html>

-- 결과 : 위 내용과 동일하지만 임의 지점에 클릭시 마커가 생성된다.
 


-----------------------------------------------------------------------------  

<%@ page contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR"%>
<%  request.setCharacterEncoding("EUC-KR"); %>
<% 
/* 
이벤트 리스너를 실행할 때는 비공개 및 영구 데이터를 모두 객체에 연결할 수 있다는 
장점이 있습니다. 자바스크립트는 '비공개' 인스턴스 데이터는 지원하지 않지만
내부 함수가 외부 변수에 액세스할 수 있도록 해 주는 클로저를 지원합니다. 
클로저를 사용하면 이벤트 리스너에서 이벤트가 발생한 객체에 속하지 않은 변수에 
액세스할 수 있습니다.
다음 예에서는 이벤트 리스너에서 함수 클로저를 사용하여 마커 집합에 비밀 메시지를
할당합니다. 각 마커를 클릭하면 마커 자체에 포함되지 않은 비밀 메시지의
일부를 검토하게 됩니다.

var zoomLevel;은 줌의 레벨을 화면에 표시해준다.
*/
%>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0px; padding: 0px }
  #map_canvas { height: 100% }
</style>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true">
</script>
<script type="text/javascript">
var map;
  function initialize() {
    var myLatlng  = new google.maps.LatLng (35.174444, 129.078888);
    var myOptions = {
      zoom: 4,
      center: myLatlng ,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  
    
  
  google.maps.event.addListener(map, 'zoom_changed', function() {
   setTimeout(moveToDarwin, 3000);
 });
 
 var marker = new google.maps.Marker({
     position: myLatlng , 
     map: map,
     title:"이거 클릭하니;"
 });
// Add 5 markers to the map at random locations
 var southWest = new google.maps.LatLng(35.174444, 129.078888);
 var northEast = new google.maps.LatLng(36.174444, 129.078888);
 var bounds = new google.maps.LatLngBounds(southWest,northEast);
 map.fitBounds(bounds);
 var lngSpan = northEast.lng() - southWest.lng();
 var latSpan = northEast.lat() - southWest.lat();
 for (var i = 0; i < 5; i++) {
   var location = new google.maps.LatLng(southWest.lat() + latSpan * Math.random(),
       southWest.lng() + lngSpan * Math.random());
   var marker = new google.maps.Marker({
       position: location, 
       map: map
   });
   var j = i + 1;
   marker.setTitle(j.toString());
   attachSecretMessage(marker, i);
 }
 
 var zoomLevel;
 var infowindow = new google.maps.InfoWindow(
   { content: 'Zoom Level Test',
       size: new google.maps.Size(50,50),
       position: myLatlng
   });
 infowindow.open(map);
   
 google.maps.event.addListener(map, 'zoom_changed', function() {
   zoomLevel = map.getZoom();
   infowindow.setContent("Zoom: " + zoomLevel);
   if (zoomLevel == 0) {
     map.setZoom(10);
   }      
 });
}
  
//The five markers show a secret message when clicked
//but that message is not within the marker's instance data

function attachSecretMessage(marker, number) {
 var message = ["This","is","the","secret","message"];
 var infowindow = new google.maps.InfoWindow(
     { content: message[number],
       size: new google.maps.Size(50,50)
     });
 google.maps.event.addListener(marker, 'click', function() {
   infowindow.open(map,marker);
 });
}

function moveToDarwin() {
 var darwin = new google.maps.LatLng(35.174444, 129.078888);
 map.setCenter(darwin);
}
//body 속에 있는 것을 분리하였다.
google.maps.event.addDomListener(window, 'load', initialize); 
</script>
</head>
<body>
  <div id="map_canvas" style="width:80%; height:80%"></div>
</body>
</html>

-- 결과 : 줌의 In과 Out의 크기를 보여준다. 

 

-----------------------------------------------------------------------------  

<%@ page contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR"%>
<%  request.setCharacterEncoding("EUC-KR"); %>
<% 
/* 
기본 UI의 기능이 전혀없다.
*/
%>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0px; padding: 0px }
  #map_canvas { height: 100% }
</style>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true">
</script>
<script type="text/javascript">
function initialize() {
 var myOptions = {
   zoom: 4,
   center: new google.maps.LatLng(-33, 151),
   disableDefaultUI: true,
   mapTypeId: google.maps.MapTypeId.ROADMAP  
 }
 var map = new google.maps.Map(document.getElementById("map_canvas"),
      myOptions);
}
//body 속에 있는 것을 분리하였다.
google.maps.event.addDomListener(window, 'load', initialize); 
</script>
</head>
<body>
  <div id="map_canvas" style="width:80%; height:80%"></div>
</body>
</html>

-- 결과 : 기본 UI의 기능이 전혀 없다.


 

-----------------------------------------------------------------------------  
<%@ page contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR"%>
<%  request.setCharacterEncoding("EUC-KR"); %>
<% 
/* 
UI 동작 또는 컨트롤을 제거, 추가 또는 수정하고 이후의 업데이트로 인해
동작이 변경되지 않게 하여 인터페이스를 원하는 대로 조정할 수 있습니다.
기존 동작을 추가하거나 수정하기만 하려는 경우 애플리케이션에 컨트롤을 
명시적으로 추가해야 합니다.
일부 컨트롤은 지도에 기본적으로 표시되지만 다른 컨트롤은 특별히 요청하지 
않는 한 표시되지 않습니다. 지도에서 컨트롤을 추가하거나 제거하는 것은 
Map options 객체의 필드에서 지정하는데, 컨트롤을 표시하려면 true로
설정하고 숨기려면 false로 설정합니다.

UI의 변경 api.css로 인해서
*/
%>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<link href="api.css" rel="stylesheet" type="text/css">

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

<script type="text/javascript">
var map;

function initialize() {
 var myOptions = {
   zoom: 4,
   center: new google.maps.LatLng(-33, 151),
   panControl: false,
   zoomControl: false,
   scaleControl: true,
   mapTypeId: google.maps.MapTypeId.ROADMAP
 }
 map = new google.maps.Map(document.getElementById("map_canvas"),
       myOptions);
}

//body 속에 있는 것을 분리하였다.
google.maps.event.addDomListener(window, 'load', initialize); 
</script>
</head>
<body>
  <div id="map_canvas" style="width:80%; height:80%"></div>
</body>
</html>

-- 결과 : 몇개의 UI기능이 추가되었다. 

 


-----------------------------------------------------------------------------  
<%@ page contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR"%>
<%  request.setCharacterEncoding("EUC-KR"); %>
<%
/* 
확대/축소 컨트롤은 다음 style 옵션 중 하나로 표시될 수 있습니다.
google.maps.ZoomControlStyle.SMALL은 + 및 - 버튼만으로 구성된
미니 확대/축소 컨트롤을 표시합니다. 이 스타일은 작은 지도에 적합합니다.
터치 기기에서는 이 컨트롤이 터치 이벤트에 응답하는 + 및 - 버튼으로 표시됩니다.
google.maps.ZoomControlStyle.LARGE는 표준 확대/축소 슬라이더 컨트롤을 표시합니다.
터치 기기에서는 이 컨트롤이 터치 이벤트에 응답하는 + 및 - 버튼으로 표시됩니다.
google.maps.ZoomControlStyle.DEFAULT는 지도 크기 및 지도가 실행되는 기기에 
따라 적절한 확대/축소 컨트롤을 선택합니다.
MapType 컨트롤은 다음 style 옵션 중 하나로 표시될 수 있습니다.
google.maps.MapTypeControlStyle.HORIZONTAL_BAR는 Google 
지도에서처럼 가로 막대에 컨트롤 배열을 버튼으로 표시합니다.
google.maps.MapTypeControlStyle.DROPDOWN_MENU는 드롭다운 메뉴를
통해 지도 유형을 선택할 수 있는 단일 버튼 컨트롤을 표시합니다.
google.maps.MapTypeControlStyle.DEFAULT는 '기본' 동작을 표시하며
화면 크기에 따라 달라지고 이후 버전의 API에서 변경될 수 있습니다.
컨트롤 옵션을 수정하는 경우 적절한 MapOptions 값을 true로 설정하여 컨트롤을
명시적으로 활성화해야 합니다. 예를 들어, 확대/축소 컨트롤에서 SMALL 스타일을 
표시하도록 설정하려면 MapOptions 객체에서 다음 코드를 사용합니다.
*/
%>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0px; padding: 0px }
  #map_canvas { height: 100% }
</style>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
  function initialize() {
    var myLatlng  = new google.maps.LatLng (35.174444, 129.078888);
    var myOptions = {
      zoom: 4,
      center: myLatlng ,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  
  google.maps.event.addListener(map, 'zoom_changed', function() {
   setTimeout(moveToDarwin, 3000);
 });
 
 var marker = new google.maps.Marker({
     position: myLatlng , 
     map: map,
     title:"이거 클릭하니;"
 });
 google.maps.event.addListener(marker, 'click', function() {
   map.setZoom(8);
 });
}
 
function moveToDarwin() {
 var darwin = new google.maps.LatLng(35.174444, 129.078888);
 map.setCenter(darwin);
}

//body 속에 있는 것을 분리하였다.
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<body>
 <div id="map_canvas"></div>
</body>
</html>


-- 결과 : 출력이 안된다.
1번 2번 사진과 동일하다
-----------------------------------------------------------------------------  
<%@ page contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR"%>
<%  request.setCharacterEncoding("EUC-KR"); %>

<%
/* 다음 별로 유용하지 않은 간단한 컨트롤이지만 위에서 설명한 여러 패턴을 
결합하여 보여줍니다. 이 컨트롤은 지도의 중심을 특정 기본 위치로 설정하여
DOM 'click' 이벤트에 응답합니다. */
%>

<!DOCTYPE html>
<html DIR="LTR">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"  /> 
<meta http-equiv="content-type" content="text/html; charset=EUC-KR" />
<title>Google Maps JavaScript API v3 예제: 맞춤 컨트롤</title>
<link href="api.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
 
var map;
var chicago = new google.maps.LatLng(41.850033, -87.6500523);

/**
 * The HomeControl adds a control to the map that simply
 * returns the user to Chicago. This constructor takes
 * the control DIV as an argument.
 */

function HomeControl(controlDiv, map) {

  // Set CSS styles for the DIV containing the control
  // Setting padding to 5 px will offset the control
  // from the edge of the map
  controlDiv.style.padding = '5px';

  // Set CSS for the control border
  var controlUI = document.createElement('DIV');
  controlUI.style.backgroundColor = 'white';
  controlUI.style.borderStyle = 'solid';
  controlUI.style.borderWidth = '2px';
  controlUI.style.cursor = 'pointer';
  controlUI.style.textAlign = 'center';
  controlUI.title = 'Click to set the map to Home';
  controlDiv.appendChild(controlUI);

  // Set CSS for the control interior
  var controlText = document.createElement('DIV');
  controlText.style.fontFamily = 'Arial,sans-serif';
  controlText.style.fontSize = '12px';
  controlText.style.paddingLeft = '4px';
  controlText.style.paddingRight = '4px';
  controlText.innerHTML = '<b>Home</b>';
  controlUI.appendChild(controlText);

  // Setup the click event listeners: simply set the map to
  // Chicago
  google.maps.event.addDomListener(controlUI, 'click', function() {
    map.setCenter(chicago)
  });

}

function initialize() {
  var mapDiv = document.getElementById('map_canvas');
  var myOptions = {
    zoom: 12,
    center: chicago,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(mapDiv, myOptions);

  // Create the DIV to hold the control and
  // call the HomeControl() constructor passing
  // in this DIV.
  var homeControlDiv = document.createElement('DIV');
  var homeControl = new HomeControl(homeControlDiv, map);

  homeControlDiv.index = 1;
  map.controls[google.maps.ControlPosition.TOP_RIGHT].push(homeControlDiv);
}

//body 속에 있는 것을 분리하였다.
google.maps.event.addDomListener(window, 'load', initialize); 
</script>
</head>
<body>
<div id="map_canvas" style="width:80%; height:80%"></div>
</body>
</html>

-- 결과 : 위도,경도값을 지정하여서 그값이 홈이다.

 

-----------------------------------------------------------------------------  
<%@ page contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR"%>
<%  request.setCharacterEncoding("EUC-KR"); %>


<!DOCTYPE html>
<html DIR="LTR">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"  /> 
<meta http-equiv="content-type" content="text/html; charset=EUC-KR" />
<title>Google Maps JavaScript API v3 예제: 맞춤 컨트롤</title>
<link href="api.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">

var map;
var chicago = new google.maps.LatLng(41.850033, -87.6500523);

/**
 * The HomeControl adds a control to the map that
 * returns the user to the control's defined home.
 */

// Define a property to hold the Home state
HomeControl.prototype.home_ = null;

// Define setters and getters for this property
HomeControl.prototype.getHome = function() {
  return this.home_;
}

HomeControl.prototype.setHome = function(home) {
  this.home_ = home;
}

function HomeControl(controlDiv, map, home) {

  // We set up a variable for this since we're adding
  // event listeners later.
  var control = this;
  
  // Set the home property upon construction
  control.home_ = home;

  // Set CSS styles for the DIV containing the control
  // Setting padding to 5 px will offset the control
  // from the edge of the map
  controlDiv.style.padding = '5px';

  // Set CSS for the control border
  var goHomeUI = document.createElement('DIV'); 
  goHomeUI.style.backgroundColor = 'white';
  goHomeUI.style.borderStyle = 'solid';
  goHomeUI.style.borderWidth = '2px';
  goHomeUI.style.cursor = 'pointer';
  goHomeUI.style.textAlign = 'center';
  goHomeUI.title = 'Click to set the map to Home';
  controlDiv.appendChild(goHomeUI);

  // Set CSS for the control interior
  var goHomeText = document.createElement('DIV');
  goHomeText.style.fontFamily = 'Arial,sans-serif';
  goHomeText.style.fontSize = '12px';
  goHomeText.style.paddingLeft = '4px';
  goHomeText.style.paddingRight = '4px';
  goHomeText.innerHTML = '<b>Home</b>';
  goHomeUI.appendChild(goHomeText);
  
  // Set CSS for the setHome control border
  var setHomeUI = document.createElement('DIV');
  setHomeUI.style.backgroundColor = 'white';
  setHomeUI.style.borderStyle = 'solid';
  setHomeUI.style.borderWidth = '2px';
  setHomeUI.style.cursor = 'pointer';
  setHomeUI.style.textAlign = 'center';
  setHomeUI.title = 'Click to set Home to the current center';
  controlDiv.appendChild(setHomeUI);

  // Set CSS for the control interior
  var setHomeText = document.createElement('DIV');
  setHomeText.style.fontFamily = 'Arial,sans-serif';
  setHomeText.style.fontSize = '12px';
  setHomeText.style.paddingLeft = '4px';
  setHomeText.style.paddingRight = '4px';
  setHomeText.innerHTML = '<b>Set Home</b>';
  setHomeUI.appendChild(setHomeText);

  // Setup the click event listener for Home:
  // simply set the map to the control's current home property.
  google.maps.event.addDomListener(goHomeUI, 'click', function() {
    var currentHome = control.getHome();
    map.setCenter(currentHome);
  });
  
  // Setup the click event listener for Set Home:
  // Set the control's home to the current Map center.
  google.maps.event.addDomListener(setHomeUI, 'click', function() {
    var newHome = map.getCenter();
    control.setHome(newHome);
  });
}

function initialize() {
  var mapDiv = document.getElementById('map_canvas');
  var myOptions = {
    zoom: 12,
    center: chicago,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(mapDiv, myOptions);

  // Create the DIV to hold the control and
  // call the HomeControl() constructor passing
  // in this DIV.
  var homeControlDiv = document.createElement('DIV');
  var homeControl = new HomeControl(homeControlDiv, map, chicago);

  homeControlDiv.index = 1;
  map.controls[google.maps.ControlPosition.TOP_RIGHT].push(homeControlDiv);
}

//body 속에 있는 것을 분리하였다.
google.maps.event.addDomListener(window, 'load', initialize); 
</script>
</head>
<body>
<div id="map_canvas" style="width:80%; height:80%"></div>
</body>
</html>

-- 결과 : 위의 값과 동일하지만 클릭후 setHome하면 그지정이 홈이된다.



-----------------------------------------------------------------------------   

































 

'progarm_old > [Android]' 카테고리의 다른 글

[Map] 12.03.14 - Google Map - Overlays  (0) 2012.03.14
[Android] 12.03.13 - 암시적 인텐트  (0) 2012.03.13
[Android] 12.03.08 - 구글맵  (0) 2012.03.08
[ANDROID] 12.02.23 - Adapter  (0) 2012.02.23
[ANDROID] 12.02.22 - 키보드관리,이미지크기,라디오버튼  (0) 2012.02.22

+ Recent posts

티스토리툴바