Google Maps allows you to display maps on your web page:
Google지도를 사용하면 웹 페이지에지도를 표시 할 수 있습니다.
A Basic Web Page
기본 웹 페이지
To demonstrate how to add a Google Map to a web page, we will use a basic HTML page:
웹 페이지에 Google지도를 추가하는 방법을 보여주기 위해 기본 HTML 페이지를 사용합니다.
Example
1 2 3 4 5 6 7 8 9 10 | <!DOCTYPE html> <html> <body> <h1>My First Google Map</h1> <div id="map">My map will go here</div> </body> <html> | cs |
Set the Map Size
지도 크기 설정
Example
1 | <div id="map" style="width:400px;height:400px"> | cs |
Create a Function to Set The Map Properties
지도 속성을 설정하는 함수 만들기
This example defines a Google Map centered in London, England:
이 예는 영국의 런던 중심의 Google지도를 정의합니다.
Example
1 2 3 4 5 6 7 8 | function myMap() { var mapOptions = { center: new google.maps.LatLng(51.5, -0.12), zoom: 10, mapTypeId: google.maps.MapTypeId.HYBRID } var map = new google.maps.Map(document.getElementById("map"), mapOptions); } | cs |
Example Explained
예제 설명
The mapOptions variable defines the properties for the map.
하는 MapOptions 변수는 맵의 속성을 정의합니다.
The center property specifies where to center the map (using latitude and longitude coordinates).
중심 속성 (위도와 경도 좌표를 사용)를지도 중앙 위치를 지정한다.
The zoom property specifies the zoom level for the map (try to experiment with the zoom level).
줌 속성은 맵의 줌 레벨을 (줌 레벨을 실험하려고)을 지정합니다.
The mapTypeId property specifies the map type to display. The following map types are supported: ROADMAP, SATELLITE, HYBRID, and TERRAIN.
관련 mapTypeId의 속성은 표시 할지도 유형을 지정합니다. ROADMAP, SATELLITE, HYBRID 및 TERRAIN과 같은지도 유형이 지원됩니다.
The line: var map=new google.maps.Map(document.getElementById("map"), mapOptions); creates a new map inside the <div> element with id="map", using the parameters that are passed (mapOptions).
줄 : var map = new google.maps.Map (document.getElementById ( "map"), mapOptions); 전달 된 매개 변수 (mapOptions)를 사용하여 id = "map"인 <div> 요소 내에 새 맵을 만듭니다.
Add the Google Maps API
Google Maps API 추가
Finally, show the map on the page!
마지막으로, 페이지에지도를 보여주십시오!
The functionality of the map is provided by a JavaScript library located at Google. Add a script to refer to the Google Maps API with a callback to the myMap function:
지도의 기능은 Google에있는 자바 스크립트 라이브러리에 의해 제공됩니다. myMap 함수에 대한 콜백을 사용하여 Google Maps API를 참조하는 스크립트를 추가합니다.
Example
1 | <script src="https://maps.googleapis.com/maps/api/js?callback=myMap"></script> | cs |
Go to our Google Maps Tutorial to learn more about Google Maps.
Google지도 에 대한 자세한 내용은 Google지도 자습서 로 이동하십시오 .
'HTML' 카테고리의 다른 글
| [R]HTML5 비디오(HTML5 Video) (0) | 2018.07.16 |
|---|---|
| [R]HTML 멀티미디어(HTML Multimedia) (0) | 2018.07.15 |
| HTML5 SVG (0) | 2018.07.13 |
| [R]HTML5 Canvas (0) | 2018.07.12 |
| [R]HTML5 스타일 가이드 및 코딩 규칙(HTML5 Style Guide and Coding Conventions) (0) | 2018.07.11 |
