HTML 구글 지도

HTML에서는 이전 기사의 요소와 함께 몇 가지 속성과 속성을 논의했습니다. 웹 기술에는 온라인 사용자를 유치할 수 있는 많은 기능이 있습니다. Google 지도는 웹사이트에 위치를 표시하기 위해 HTML 코드에 동일한 Google 지도를 사용한다는 점에서 Google 회사의 기능 중 하나입니다. 주로 회사 웹사이트에서 해당 지역의 위치를 ​​정확히 식별하는 데 사용됩니다. 회사의 지리적 위치에 대한 위도와 경도를 찾고 설정하기 위해 자바스크립트 언어를 사용하여 HTML을 호출합니다.

구문:

HTML에는 웹페이지 콘텐츠를 개발하기 위한 모든 태그에 대한 일반 구문이 있습니다.

<script src="google-api%20url">
function()
{
}
</script>

HTML Google 지도의 구문은 스크립트 태그에 Google API를 추가한 다음 웹페이지 콘텐츠의 지리적 위치를 설정하는 것입니다. 우리는 사용자를 유치하기 위해 일부 HTML 요소와 속성을 웹 페이지에 정렬하고 사용할 수 있으며 이는 회사와 비즈니스의 성장이 될 것입니다. 비즈니스 요구에 따라 사용자 친화적인 환경으로 웹페이지를 맞춤화해 드립니다.

HTML로 Google 지도를 만드는 방법은 무엇입니까?

<script>를 사용하여 웹페이지에서 Google 지도 API를 호출하겠습니다. 꼬리표. 주로 HTML 페이지에 Google 지도를 추가한 후 마커를 설정할 수 있습니다. 여기에는 세 단계가 포함됩니다. 1. 먼저 HTML 페이지를 생성하겠습니다. 2. 그런 다음 마커가 포함된 지도를 추가합니다. 3. 마지막으로 위치를 인증하기 위한 API 키를 얻습니다. 맞춤형 안내서를 기반으로 사전 정의된 태그를 사용하여 HTML 페이지를 생성하고 <div>를 사용하여 필요한 경우 페이지의 스타일 속성을 정렬합니다. 요소; 웹사이트에서 별도의 모듈 보기로 콘텐츠를 분리할 예정입니다.</script>

마커가 포함된 지도를 추가하는 것은 웹페이지에 Google 지도를 만드는 두 번째 단계입니다. 이 섹션에서는 자바스크립트 API의 지도를 웹페이지에 로드하는 방법을 설명하고 API를 사용하여 웹페이지에 마커가 있는 지도를 추가하는 자바스크립트 함수를 작성합니다. 스크립트 태그에 API를 추가하면 스크립트가 지도 API를 로드한 후 콜백 매개변수가 initMap 함수와 같은 일부 조건을 실행합니다. 웹 페이지 스크립트에서 비동기 속성을 사용하면 브라우저는 API가 웹 페이지의 나머지 렌더링 페이지 콘텐츠를 로드하도록 허용합니다. 스크립트 태그 Google 지도 API URL에서 API 키가 포함된 키 매개변수를 볼 수 있습니다. 이 섹션에서는 키를 설정하지 않고 자동으로 API 키를 생성한 다음 매개변수와 함께 initMap 함수를 사용하여 콜백 매개변수를 호출합니다.

initMap 함수는 스크립트 태그 HTML 태그와 함께 javascript 함수를 사용하여 웹 페이지를 로드할 때마다 지도를 초기화하고 추가하는 데 사용됩니다. getElementById()는

HTML의 태그. 스크립트 함수에서는 Java 프로그래밍 언어와 동일한 새 연산자를 사용하여 지도 인스턴스를 생성합니다. new google.maps.Map()은 javascript 함수에서 Google 지도 인스턴스를 생성하기 위한 구문입니다.

와 같은 HTML의 사전 정의된 태그를 사용하여 웹페이지에서 지도를 찾는 위치에 대한 측면 탐색 기능을 사용합니다. 지도는 첫 번째 위도 및 경도와 같은 순서로 HTML 페이지를 조정합니다. 웹 페이지에서 최소 및 최대 크기와 세로 및 가로 탐색의 확대/축소 옵션을 설정합니다. 확대/축소 속성을 0으로 설정한 경우 확대/축소 단면 보기에서 가장 낮은 부분이 되며 전체 지도를 한 페이지에 표시합니다. 웹 페이지의 고해상도 이미지로 확대/축소 속성에서 더 높은 값을 설정할 수 있습니다. position 속성을 이용하여 웹페이지에서 마커의 위치를 ​​설정해보겠습니다.

웹페이지에서 지도를 생성할 때 세 번째 단계에서 API 키를 받게 됩니다. 이 키는 맞춤형 API 키에서 지도 및 자바스크립트 기능을 인증하는 데 사용됩니다. API 키 생성 옵션이 포함된 Google Cloud Platform 콘솔 도구를 사용합니다.

HTML Google 지도의 예

다음은 HTML Google 지도의 예입니다.

예시 #1

코드:

<div id="m" style="width:402px;height:433px;background:green"></div>
<script>
function sample() {
var m1 = {
center: new google.maps.LatLng(52.3, -0.14),
zoom: 13,
mapss: google.maps.MapTypeId.HYBRID
}
var m2 = new google.maps.Map(document.getElementById("m"), m1);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU&callback=sample"></script>

출력:

예시 #2

코드:

<style>
#m {
height: 403px;
width: 102%;
}
</style>


<div id="m"></div>
<script>
function initMap() {
var loc = {lat: -26.334, lng: 132.034};
var m1 = new google.maps.Map(
document.getElementById('m'), {zoom: 3, center: loc});
var mar = new google.maps.Marker({position: loc, map: m1});
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>

출력:

예시 #3

코드:

<div id="m1" style="width:402px;height:303px;"></div>
<br>
<div id="m2" style="width:402px;height:303px;"></div>
<br>
<div id="m3" style="width:402px;height:303px;"></div>
<br>
<div id="m4" style="width:402px;height:303px;"></div>
<script>
function sample() {
var choice1 = {
center: new google.maps.LatLng(51.503442,-0.120540),
zoom:7,
mapTypes: google.maps.MapTypeId.ROADMAP
};
var choice2 = {
center: new google.maps.LatLng(51.503442,-0.120540),
zoom:7,
mapTypes: google.maps.MapTypeId.SATELLITE
};
var choice3 = {
center: new google.maps.LatLng(51.503442,-0.120540),
zoom:7,
mapTypes: google.maps.MapTypeId.HYBRID
};
var choice4 = {
center: new google.maps.LatLng(51.503442,-0.120540),
zoom:7,
mapTypes: google.maps.MapTypeId.TERRAIN
};
var i = new google.maps.Map(document.getElementById("m1"),choice1);
var j = new google.maps.Map(document.getElementById("m2"),choice2);
var k = new google.maps.Map(document.getElementById("m3"),choice3);
var l = new google.maps.Map(document.getElementById("m4"),choice4);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU&callback=sample"></script>

출력:

위의 예에서는 웹페이지에서 지도 API를 호출하기 위해 사전 정의된 HTML 요소, 속성 및 자바스크립트 함수가 포함된 세 가지 스타일의 Google 지도를 사용합니다.

결론

문서의 지도 API를 사용하여 자바스크립트 함수에서 위치를 식별합니다. 이는 전적으로 센서를 기반으로 합니다. Google 지도에서 모바일을 사용할 때 소스 위치에서 목적지 방향으로만 데이터를 가져오도록 위치를 활성화합니다. 또한 애플리케이션이 사용자 위치를 감지하기 위해 센서를 허용하는지 확인하고 브라우저 호환성 문제를 확인합니다. 센서 매개변수가 장기간 사용되지 않습니다.

위 내용은 HTML 구글 지도의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!