Google 지도 오버레이

Google 지도 <span class="color_h1" 오버레이

Google 지도에 마커 추가

Google 지도 - 오버레이

오버레이는 지도의 경도에 바인딩됩니다/위도가 있는 개체 지도를 드래그하거나 확대/축소하면 움직이는 좌표입니다.

Google Maps API에는 다음과 같은 오버레이가 있습니다.

지도의 지점은 마커를 사용하여 표시되며 종종 맞춤 아이콘을 표시합니다. 마커는 GMarker 유형의 개체이며 아이콘은 GIcon 유형의 개체를 사용하여 사용자 정의할 수 있습니다.
지도의 선은 폴리라인(포인트 모음을 나타냄)을 사용하여 표시됩니다. 선은 GPolyline 유형의 객체입니다.
지도의 영역은 다각형(임의 모양의 영역인 경우) 또는 기본 오버레이(직사각형 영역인 경우)로 표시됩니다. 다각형은 닫힌 폴리선과 유사하므로 어떠한 모양이라도 될 수 있습니다. 지상 오버레이는 일반적으로 타일과 직접 또는 간접적으로 연결된 지도 영역에 사용됩니다.
지도 자체가 타일 오버레이를 사용하여 표시됩니다. 자신만의 타일 시리즈가 있는 경우 GTileLayerOverlay 클래스를 사용하여 지도의 기존 타일을 변경하거나 GMapType을 사용하여 자신만의 지도 유형을 만들 수도 있습니다.
정보 창도 특수 오버레이입니다. 단, 정보창은 지도에 자동으로 추가되며 지도에는 GInfoWindow 유형의 개체만 추가할 수 있다는 점에 유의하세요.

Google 지도 - 마커

마크를 추가하여 지도의 지점을 식별하세요. 기본적으로 G_DEFAULT_ICON을 사용합니다(사용자 정의 아이콘을 지정할 수도 있음). GMarker 생성자는 GLatLng 및 GMarkerOptions(선택 사항) 객체를 매개변수로 사용합니다.

마커는 대화형으로 설계되었습니다. 예를 들어, 기본적으로 이벤트 리스너에서 정보 창을 여는 데 자주 사용되는 "클릭" 이벤트를 수신합니다.

setMap()을 통해 지도에 마커를 추가하는 방법:

Instance

<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>

<script>
var myCenter=new google.maps.LatLng(51.508742,-0.120850);

function initialize()
{
var mapProp = {
  center:myCenter,
  zoom:5,
  mapTypeId:google.maps.MapTypeId.ROADMAP
  };

var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);

var marker=new google.maps.Marker({
  position:myCenter,
  });

marker.setMap(map);
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>

<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

Google 지도 - 드래그 가능한 마커

다음 예 애니메이션 속성을 사용하여 마커를 드래그하는 방법이 소개됩니다.

Instance

<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>

<script>
var myCenter=new google.maps.LatLng(51.508742,-0.120850);
var marker;

function initialize()
{
var mapProp = {
  center:myCenter,
  zoom:5,
  mapTypeId:google.maps.MapTypeId.ROADMAP
  };

var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);

marker=new google.maps.Marker({
  position:myCenter,
  animation:google.maps.Animation.BOUNCE
  });

marker.setMap(map);
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>

<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>

Run Instance»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

Google 지도 - 아이콘

마커를 사용자 정의할 수 있습니다. 기본 아이콘을 대체하여 표시할 새 아이콘:

Instance

<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>

<script>
var myCenter=new google.maps.LatLng(51.508742,-0.120850);

function initialize()
{
var mapProp = {
  center:myCenter,
  zoom:5,
  mapTypeId:google.maps.MapTypeId.ROADMAP
  };

var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);

var marker=new google.maps.Marker({
  position:myCenter,
  icon:'pinkball.png'
  });

marker.setMap(map);
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>

<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>

Run Instance»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

Google 지도 - 폴리라인

GPolyline 개체는 지도에 선형 오버레이를 만듭니다. GPolyline은 일련의 점을 가져와 해당 점을 연결하는 정렬된 일련의 선 세그먼트를 만듭니다.

Polyline은 다음 속성을 지원합니다.

path - 여러 직선의 위도/경도 좌표를 지정합니다.
스트로크 컬러 - 직선의 16진수 색상 값을 지정합니다(형식: "#FFFFFF")
스트로크Opacity - 선의 불투명도를 지정합니다(값은 0.0입니다). ~ 1.0)
strokeWeight - 선의 너비를 픽셀 단위로 정의합니다.
editable - 사용자가 라인을 편집할 수 있는지 여부를 정의합니다(true/false).

Instance

<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>

<script>
var x=new google.maps.LatLng(52.395715,4.888916);
var stavanger=new google.maps.LatLng(58.983991,5.734863);
var amsterdam=new google.maps.LatLng(52.395715,4.888916);
var london=new google.maps.LatLng(51.508742,-0.120850);

function initialize()
{
var mapProp = {
  center:x,
  zoom:4,
  mapTypeId:google.maps.MapTypeId.ROADMAP
  };
  
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);

var myTrip=[stavanger,amsterdam,london];
var flightPath=new google.maps.Polyline({
  path:myTrip,
  strokeColor:"#0000FF",
  strokeOpacity:0.8,
  strokeWeight:2
  });

flightPath.setMap(map);
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>

<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>

Run Instance»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

Google 지도 - 다각형

GPolygon 개체는 순서가 지정된 일련의 점으로 구성된다는 점에서 GPolyline 개체와 유사합니다. 그러나 폴리라인처럼 두 개의 끝점을 갖는 대신 다각형은 닫힌 루프를 형성하는 영역을 정의하도록 설계되었습니다.

폴리라인과 마찬가지로 다각형 가장자리(선)의 색상, 두께, 투명도는 물론 닫힌 채워진 영역의 색상과 투명도도 맞춤설정할 수 있습니다. 색상은 16진수 HTML 스타일이어야 합니다.

Polygon은 다음 속성을 지원합니다.

path - 여러 직선 위도의 좌표를 지정합니다(첫 번째와 마지막 좌표가 동일함).
strokColor - 직선의 16진수 색상 값을 지정합니다(형식: " #FFFFFF")
strokeOpacity - 선의 투명도를 지정합니다(값은 0.0). ~ 1.0)
strokeWeight - 선의 너비를 픽셀 단위로 정의합니다.
fillColor - 닫힌 영역의 16진수 색상 값을 지정합니다(형식: "#FFFFFF").
fillOpacity - 채우기 색상의 투명도를 지정합니다(값은 다음과 같습니다). 0.0 ~ 1.0)
editable - 사용자가 라인을 편집할 수 있는지 여부를 정의합니다(true/false)

Instance

<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>

<script>
var x=new google.maps.LatLng(52.395715,4.888916);
var stavanger=new google.maps.LatLng(58.983991,5.734863);
var amsterdam=new google.maps.LatLng(52.395715,4.888916);
var london=new google.maps.LatLng(51.508742,-0.120850);

function initialize()
{
var mapProp = {
  center:x,
  zoom:4,
  mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);

var myTrip=[stavanger,amsterdam,london,stavanger];
var flightPath=new google.maps.Polygon({
  path:myTrip,
  strokeColor:"#0000FF",
  strokeOpacity:0.8,
  strokeWeight:2,
  fillColor:"#0000FF",
  fillOpacity:0.4
  });

flightPath.setMap(map);
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>

<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>

인스턴스 실행 »

"인스턴스 실행" 버튼을 클릭하여 온라인 인스턴스

Google 지도 - Circle

Circle은 다음 속성을 지원합니다.

center - 원의 중심점 매개변수를 지정합니다. google.maps.LatLng
radius - 원의 반경을 미터 단위로 지정합니다.
스트로크컬러 - 호의 16진수 색상 값을 지정합니다(형식: "#FFFFFF").
strokeOpacity - 호의 투명도를 지정합니다(값은 0.0입니다) ~ 1.0)
strokeWeight - 선의 너비를 픽셀 단위로 정의합니다.
fillColor - 원 채우기 값의 16진수 색상 값을 지정합니다(형식: "#FFFFFF").
fillOpacity - 채우기 색상의 투명도를 지정합니다(값은 다음과 같습니다). 0.0 ~ 1.0)
사용자가 라인을 편집할 수 있는지 정의합니다(true/false)

Instance

<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>

<script>
var amsterdam=new google.maps.LatLng(52.395715,4.888916);
function initialize()
{
var mapProp = {
  center:amsterdam,
  zoom:7,
  mapTypeId:google.maps.MapTypeId.ROADMAP
  };
  
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);

var myCity = new google.maps.Circle({
  center:amsterdam,
  radius:20000,
  strokeColor:"#0000FF",
  strokeOpacity:0.8,
  strokeWeight:2,
  fillColor:"#0000FF",
  fillOpacity:0.4
  });

myCity.setMap(map);
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>

<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>

인스턴스 실행»

"인스턴스 실행" 버튼을 클릭하여 온라인 인스턴스를 봅니다.

Google 지도 - 정보 창

마커에 텍스트 정보 창을 표시합니다.

Instances

<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>

<script>
var myCenter=new google.maps.LatLng(51.508742,-0.120850);

function initialize()
{
var mapProp = {
  center:myCenter,
  zoom:5,
  mapTypeId:google.maps.MapTypeId.ROADMAP
  };

var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);

var marker=new google.maps.Marker({
  position:myCenter,
  });

marker.setMap(map);

var infowindow = new google.maps.InfoWindow({
  content:"Hello World!"
  });

infowindow.open(map,marker);
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>

<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요