Google Maps JavaScript API 튜토리얼 : 웹 사이트에 맞춤지도 추가

Google지도는 매일 수십 년 전에 상상을 초월한 방식으로 길을 탐색하고 장소를 찾는 데 도움이됩니다. 길 찾기에 유용 할뿐만 아니라, 데이터 시각화에 사용되는지도의 예 (예 : 전 세계에 COVID-19의 확산을 시각화하기 위해 최근 몇 개의 웹 사이트에서지도를 사용하고 있는지)도 있습니다. 오늘은 Google Maps JavaScript API를 사용하여 웹 사이트 및 애플리케이션에 대한 맞춤지도를 작성하는 방법에 대해 알아 보겠습니다..


Google지도를 사용하기 위해 Google Maps JavaScript API를 파헤쳐지도를 작성해야하는 이유가 궁금합니다. 정적지도 대신 사용 가능한 워드 프레스 플러그인 중 하나를 사용하여 번거 로움없이 코딩하십시오.

물론 웹 사이트에 업체 위치를 표시하려는 경우 두 가지 모두 훌륭한 옵션입니다. 그러나 Google Maps JavaScript API는 사전 제작 된 플러그인이 제공하는 것보다 더 복잡한 맞춤형지도를 만들려는 경우 시간을보다 효과적으로 제어.

Google Maps JavaScript API 튜토리얼

코딩에 시간을 소비하지 않고 웹 사이트에지도를 표시하는보다 간단한 방법을 원한다면 수달의 Google지도 차단.

Google Maps JavaScript API 키 받기

시작하기 전에 먼저 Google Maps에 대한 API 키를 가져와야합니다. 당신은 그것을 얻을 수 있습니다 여기. Google Maps API는 완전히 무료는 아니지만 대부분의 경우 충분한 무료 요금제와 함께 제공됩니다..

API 키가 있습니까? 로터리에서 세 번째 출구로 나가서 튜토리얼을 계속하십시오. ��

간단한지도 만들기

기본 설정이 포함 된 기본 Google지도 인스턴스입니다.기본 설정의 기본 Google지도 인스턴스.

먼저 간단한 Google지도를 만들어 시작해 보겠습니다. JavaScript와 CSS를 분리 할 수 ​​있지만이 자습서에서는 단일 HTML 파일을 사용하고 있습니다. 사용할 구조는 다음과 같습니다.

html>
<html>
<머리>
<표제>간단한지도 제목>
<메타 이름 ="뷰포트" 내용 ="초기 규모 = 1.0">
<메타 문자셋 ="utf-8">
<스타일>
#map {
높이 : 100 %;
}

html, 본문 {
높이 : 100 %;
여백 : 0;
패딩 : 0;
}
스타일>
머리>
<신체>
<div id ="지도">사업부>
<스크립트>
지도하자;
함수 initMap () {
map = new google.maps.Map (document.getElementById ( ‘map’), {
센터 : {
위도 : 51.513329,
lng : -0.088950
},
줌 : 14
});
}
스크립트>
<스크립트 src ="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback = initMap" 비동기 지연>스크립트>
신체>
html>

Google Maps API가로드되면지도를 초기화하는 initMap 함수를 호출합니다. 코드를 더 세분화하면지도의 ID를 가진 빈 div를 사용하여지도를 렌더링 할 위치를 선언합니다..

지도하자;
함수 initMap () {
map = new google.maps.Map (document.getElementById ( ‘map’), {
센터 : {
위도 : 51.513329,
lng : -0.088950
},
줌 : 14
});
}

JavaScript에서는 먼저 함수 외부에 맵 변수를 설정하여 전역 범위의 일부이므로 나중에 맵을 수정할 수 있습니다. initMap 함수에서 먼저 새로운 Google Map을 선언하고 map의 ID로 요소를 호출하여 렌더링하도록 설정합니다. 그런 다음지도 중심과 확대 / 축소 수준 인 옵션을 지정합니다..

우리는 런던시의 좌표를 사용합니다, 런던 한가운데서 역사적인 랜드 마크, 지도 센터로. 나중에 Maps API를 사용하여지도에서 모든 위치의 좌표를 찾는 방법에 대해 설명합니다. 하지만 지금은 궁금하다면 latlong.net 모든 주소의 좌표를 빠르게 찾기 위해.

지도 유형

기본지도가 완성되었으므로 Google Maps JavaScript API가 제공하는 맞춤 설정 옵션을 살펴볼 수 있습니다. 우리가 사용할 첫 번째 옵션은 지도 유형. Google지도는 다음과 같은 네 가지 유형의지도를 지원합니다.

  • 로드맵 : 일반적으로 표시되는 기본 맵.
  • 위성 : 사용 가능한 경우 Google지도 및 Google 어스의 위성보기.
  • 하이브리드 : 로드맵과 위성보기의 혼합.
  • 지형 : 산 및 계곡과 같은 지형 정보를 기반으로하는지도.

지도 옵션에서 mapType 속성을 추가하여 다음과 같이 원하는보기를 선택할 수 있습니다.

map = new google.maps.Map (document.getElementById ( ‘map’), {
센터 : {
위도 : 51.513329,
lng : -0.08895
},
줌 : 14,
mapTypeId : ‘하이브리드’
});

이 예에서는 하이브리드 맵을 사용하고 있습니다. 다양한 유형을 실험하여 사용 사례에 적합한 유형을 확인할 수 있습니다..

지도 옵션

지도 유형 후에, 우리는 지도 컨트롤. Google지도를 사용하면지도에서 6 개의 컨트롤 중 하나를 사용할 수 있습니다. 컨트롤 목록을 찾을 수 있습니다 그들의 웹 사이트에서.

다음과 같이 사용하려는 컨트롤과 필요한 경우 해당 위치를 지정할 수 있습니다.

map = new google.maps.Map (document.getElementById ( ‘map’), {
센터 : {
위도 : 51.513329,
lng : -0.08895
},
줌 : 14,
mapTypeId : ‘하이브리드’,
scaleControl : true,
fullscreenControlOptions : {
위치 : google.maps.ControlPosition.RIGHT_BOTTOM
},

});

Google은 scaleControl을 활성화합니다.이 컨트롤은지도의 저작권과 함께 맨 아래에지도의 크기를 TRUE로 선언하여 표시합니다. 다음 줄에서는 fullscreenControlOptions 속성을 사용하여 fullscreenControl의 모양을 기본 오른쪽 위 위치에서 오른쪽 아래로 변경합니다. 마찬가지로 다른 컨트롤의 위치를 ​​조정할 수 있습니다.

내장 된 것 이외의 것을하는 컨트롤을 원하십니까? 걱정하지 마세요. Google지도를 사용하면지도에 대한 맞춤 컨트롤을 만들 수도 있습니다..

마커에 대해 이야기합시다!

마커 추가

마커는 놀랍고 맵을 사용하여 많은 대화 형 응용 프로그램을 만들 수 있습니다. 예를 들어, 일부 호텔 예약 웹 사이트는 마커를 사용하여지도에서 호텔의 위치를 ​​보여줍니다. 그리고 그들은 또한 추가하기 매우 쉽습니다.

하자 마커를 추가 다음 코드를 사용하여 런던 브리지로

let marker = new google.maps.Marker ({
위치 : {
위도 : 51.506821,
lng : -0.0879
},
지도 :지도,
제목 : ‘런던 브리지’
});

위에서 볼 수 있듯이 마커 코드에는 세 가지 속성이 있습니다. 첫 번째는 좌표입니다. 그런 다음 처음에 맵을 저장 한 맵 변수를 전달하고 마지막으로 마커의 제목을 전달합니다..

위의 코드 블록에 icon 속성을 사용하여 URL을 사용자 정의 마커 아이콘에 전달할 수도 있습니다..

정보창 추가

마커에서 빠진 것이있을 수 있습니다. 일반적으로지도에서 마커를 클릭하면 자세한 정보가 포함 된 팝업이 표시됩니다. 그 팝업 자체는 다른 구성 요소입니다 정보창.

맞춤 마커가있는 Google지도맞춤 마커가있는 Google지도.

다행스럽게도 InfoWindow를 마커에 쉽게 첨부 할 수 있습니다..

infoWindow = new google.maps.InfoWindow ({
내용 : ‘

런던 브릿지


});

marker.addListener ( ‘click’, function () {
infoWindow.open (지도, 마커);
});

먼저 InfoWindow 컴포넌트를 저장하는 새로운 infoWindow 변수를 만듭니다. 클릭하면 표시되는 HTML이 포함 된 콘텐츠의 속성 만 전달합니다. 그런 다음 마커에 클릭시 이벤트 리스너를 추가하여 마커를 클릭하면 infoWindow를 열도록 지시합니다..

마찬가지로 마커와 infoWindow를 사용하여지도와 대화식 환경을 만들 수 있습니다.

이제 잠시 잠깐 멈추고 진행 상황을 되돌아 보는 것이 가장 좋은 순간입니다. 30 줄의 코드만으로 Google Maps JavaScript API를 사용하여 마커 및 정보 상자가있는 맞춤지도를 만들었습니다. 초보자에게 어려워 보일 수있는 일을 Google Maps API를 사용하는 것이 얼마나 쉬운 지 주목할 가치가 있습니다..

동적 수정 & 이벤트 리스너

마커 및지도 옵션이 반드시 사전 제작 된 Google지도 플러그인을 버리고 API로 전환하는 이유는 아닙니다. 그들은 유망하지만 많은 플러그인이 이미 이러한 기능을 제공합니다. 플러그인으로는 불가능한 것을 시도해 봅시다.

동적 수정

구글 맵스 많은 방법 지도와 상호 작용하고 동작을 수정합니다. DOM을 다루는 데 익숙하다면 이러한 방법에 많은 문제가 없어야합니다..

이러한 방법 중 일부를 사용하면지도의 중심 좌표를 반환하는 getCenter와 같은지도에서 정보를 얻을 수 있습니다. 마찬가지로 일부는 setCenter와 같은 동작을 변경하여 맵의 중심을 변경합니다.

많은 메소드가 있으며 모든 메소드를 살펴 봐야 API로 가능한 것이 무엇인지 알 수 있습니다. 이 방법 중 하나를지도와 함께 사용하겠습니다.

예를 들어지도의 중심을 런던 시로 다시 가져 오는 버튼을 추가 할 수 있습니다..

먼저 코드에 버튼을 추가해야합니다.

<버튼 id ="bringToCenter">가운데 버튼으로 가져 오기>

이제 setCenter 메소드를 트리거하는 이벤트 리스너를 버튼에 연결합니다.

const centerButton = document.querySelector ( ‘#bringToCenter’);

centerButton.addEventListener ( ‘click’, function (e) {
e.preventDefault ();
map.setCenter ({
위도 : 51.513329,
lng : -0.08895
});
});

그게 다야. 간단 하죠? map.setCenter를 사용했습니다. 여기서 map은 맵을 유지하기 위해 처음에 선언 한 변수입니다..

다른 방법으로 실험하고 API의 한계를 탐색해야합니다..

이벤트 리스너

JavaScript 개발자에게 친숙한 또 다른 개념은 이벤트 리스너입니다. 특정 이벤트에 작업을 첨부 할 수 있습니다. 즉, 센터 변경과 같은 이벤트가 발생하면 해당 작업이 트리거됩니다..

지도의 아무 곳이나 클릭하면지도의 좌표를 얻는 Google지도 문서의 예 중 하나를 살펴 보겠습니다..

infoWindowLatLang;

map.addListener ( ‘click’, function (mapsMouseEvent) {
if (infoWindowLatLang) infoWindowLatLang.close ();

infoWindowLatLang = 새로운 google.maps.InfoWindow ({
위치 : mapsMouseEvent.latLng
});

infoWindowLatLang.setContent (mapsMouseEvent.latLng.toString ());
infoWindowLatLang.open (지도);
});

보시다시피, 개념은 이벤트 리스너가 JavaScript에서 작동하는 방식과 거의 동일합니다. 먼저지도에 onClick 이벤트 리스너를 연결합니다. 이벤트 리스너 내에서 사용자가 클릭하는 위치의 좌표를 가져와 InfoWindow 안에 넣습니다..

확인하면 Otter의 Google Map 블록, 이 이벤트 리스너와 메소드를 사용하여 드래그 추가와 같은 작업을 수행하는 방법을 볼 수 있습니다. & 마커 삭제 및 마커를 클릭하여 제거.

사용자 정의 컨트롤 만들기

마지막으로,이 기사를 작성하는 예제로 끝납니다. 맞춤형 컨트롤 Google지도 용.

앞에서 언급했듯이지도 중앙에 마커를 추가하는 맞춤 버튼을 만들고 있습니다. 이것에 대한 코드는 약간 복잡해 보이지만 간단합니다..

먼저, 버튼을 기능으로 작성합니다.지도 중앙에 마커를 추가하는 이벤트 리스너가 있습니다..

위 코드 블록의 YOUR_API_KEY를 API 키로 바꿔야합니다. 주어진 위도와 경도를 중심으로 간단한 Google지도를 렌더링합니다..

MarkerControl 함수 (controlDiv, map) {
const controlUI = document.createElement ( ‘div’);
controlUI.style.backgroundColor = ‘#fff’;
controlUI.style.border = ‘2px 솔리드 #fff’;
controlUI.style.borderRadius = ‘3px’;
controlUI.style.boxShadow = ‘0 2px 6px rgba (0,0,0, .3)’;
controlUI.style.cursor = ‘포인터’;
controlUI.style.margin = ’10px’;
controlDiv.appendChild (controlUI);

const controlText = document.createElement ( ‘img’);
controlText.style.padding = ‘5px’;
controlText.title = ‘마커를 추가하려면 클릭하십시오’;
controlText.src = ‘https://maps.google.com/mapfiles/ms/icons/red-pushpin.png’;
controlUI.appendChild (controlText);

controlUI.addEventListener ( ‘click’, function () {
새로운 google.maps.Marker ({
위치 : map.getCenter (),
지도 :지도
});
});
}

위의 코드 대부분은 버튼에 대한 요소를 만듭니다. 마지막으로지도 중앙에 마커를 추가하는 이벤트 리스너를 버튼에 연결합니다..

이제 버튼을 맵에 첨부해야합니다.이 코드는 다음 코드로 수행됩니다.

const markerControlDiv = document.createElement ( ‘div’);
const markerControl = 새로운 MarkerControl (markerControlDiv, 맵);
markerControlDiv.index = 1;
map.controls [google.maps.ControlPosition.LEFT_BOTTOM] .push (markerControlDiv);

위의 코드는 버튼을지도의 왼쪽 하단 위치에 연결합니다. 그게 다야. JavaScript API를 사용하여 Google지도에 맞춤 컨트롤을 추가하는 데 필요한 전부입니다..

맞춤 검색 버튼이있는 Google지도왼쪽 하단에 맞춤 버튼이있는 Google지도.

결론

이 기사에서 수행 한 모든 작업의 ​​실제 예는 온라인에서 볼 수 있습니다. 코드 샌드 박스.

이것이이 기사의 내용이므로 Google Maps JavaScript API를 사용하여 자신감을 가지 셨기를 바랍니다. 사용하기가 매우 간단하고 맵으로 원하는 것을 거의 구축 할 수 있습니다!

이제 오늘 배운 내용을 사용하고 Google지도를 사용하여 직접 데모 프로젝트를 작성하여 연습해야합니다. 궁금한 점이 있으면 의견에 알려주십시오. 우리는 그들에게 답변을 드리겠습니다!

WordPress 사이트 속도를 높이기위한 충돌 과정에 참여하는 것을 잊지 마십시오. 몇 가지 간단한 수정으로로드 시간을 50-80 % 줄일 수 있습니다.

Karol K의 레이아웃 및 프리젠 테이션.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map