Google지도-시작하기

Google지도 란 무엇입니까?

Google지도는 다양한 유형의 지리 정보를 제공하는 Google의 무료 웹 매핑 서비스입니다. Google지도를 사용하면 할 수 있습니다.

장소를 검색하거나 한 장소에서 다른 장소로가는 길을 찾아보세요.
전 세계 여러 도시의 가로 및 세로 파노라마 거리 수준 이미지를보고 탐색합니다.
특정 지점의 교통 정보와 같은 특정 정보를 가져옵니다.

Google지도는지도에 표시되는 정보와지도를 맞춤 설정할 수있는 API를 제공합니다. 이 장에서는 HTML 및 JavaScript를 사용하여 웹 페이지에 간단한 Google지도를로드하는 방법에 대해 설명합니다.

웹 페이지에지도를로드하는 단계

웹 페이지에지도를로드하려면 아래 단계를 따르십시오.

1 단계 : HTML 페이지 만들기

아래와 같이 head 및 body 태그가있는 기본 HTML 페이지를 만듭니다.

<!DOCTYPE html>
<html>
   
   <head>
   </head>
   
   <body>
   ..............
   </body>
   
</html>

2 단계 : API로드

아래와 같이 스크립트 태그를 사용하여 Google Maps API를로드하거나 포함합니다.

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
   </head>
   
   <body>
   ..............
   </body>
   
</html>

3 단계 : 컨테이너 생성

지도를 보관하려면 컨테이너 요소를 만들어야합니다. 일반적으로 <div> 태그 (일반 컨테이너)가이 용도로 사용됩니다. 컨테이너 요소를 생성하고 아래와 같이 치수를 정의합니다.

<div id = "sample" style = "width:900px; height:580px;"></div>

4 단계 :지도 옵션

지도를 초기화하기 전에 mapOptions객체 (리터럴처럼 생성됨) 및 맵 초기화 변수에 대한 값을 설정합니다. 지도에는 세 가지 주요 옵션이 있습니다.centre, zoom, 및 maptypeid.

centre−이 속성에서지도를 중앙에 배치 할 위치를 지정해야합니다. 위치를 전달하려면LatLng 필요한 위치의 위도와 경도를 생성자에 전달하여 객체를 생성합니다.
zoom −이 속성에서지도의 확대 / 축소 수준을 지정해야합니다.
maptypeid−이 속성에서 원하는지도 유형을 지정해야합니다. 다음은 Google에서 제공하는지도 유형입니다.
- ROADMAP (일반, 기본 2D지도)
- SATELLITE (사진지도)
- HYBRID (2 개 이상의 다른 유형 조합)
- TERRAIN (산, 강 등이있는지도)

함수 내에서 loadMap(), mapOptions 객체를 생성하고 아래와 같이 center, zoom, mapTypeId에 필요한 값을 설정합니다.

function loadMap() {
   var mapOptions = {
      center:new google.maps.LatLng(17.240498, 82.287598), 
      zoom:9, 
      mapTypeId:google.maps.MapTypeId.ROADMAP
   };
}

5 단계 :지도 개체 만들기

라는 JavaScript 클래스를 인스턴스화하여지도를 만들 수 있습니다. Map. 이 클래스를 인스턴스화하는 동안 필요한 맵에 대한 맵 및 맵 옵션을 보유하기 위해 HTML 컨테이너를 전달해야합니다. 아래와 같이지도 개체를 만듭니다.

var map = new google.maps.Map(document.getElementById("sample"),mapOptions);

6 단계 :지도로드

마지막으로 loadMap () 메소드를 호출하거나 DOM 리스너를 추가하여지도를로드합니다.

google.maps.event.addDomListener(window, 'load', loadMap);
                    or
<body onload = "loadMap()">

예

다음 예제는 확대 / 축소 값이 12 인 Vishakhapatnam이라는 도시의 로드맵을로드하는 방법을 보여줍니다.

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(17.609993, 83.221436), 
               zoom:12, 
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
			
         google.maps.event.addDomListener(window, 'load', loadMap);
      </script>
      
   </head>
   
   <body>
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

다음 출력을 생성합니다-