지도는 모든 비즈니스 웹 사이트의 필수 요소입니다. 인터넷을 완벽하게 사용하더라도 고객은 자신이 누구이며 어디에 있는지 알고 싶어합니다. Google지도는 현재 사용하기 가장 쉽고 가장 정확하고 무료이기 때문에 많은 웹 사이트의 기본값입니다. 이 자습서를 마치면 반응 형 Google지도를 웹 사이트에 포함시키는 방법을 정확하게 알게됩니다.
기본 Google지도는 항상 반응하지 않으므로 다른 화면 크기로 확장되지 않을 수 있습니다. WordPress 플러그인을 사용하는지 또는 코드를 사용하여 직접 포함하는지에 따라지도를 반응 형으로 만들기 위해 몇 줄의 CSS를 추가해야 할 수도 있습니다.
반응 형 웹 디자인
여기서는 반응 형이 핵심 용어입니다. 웹 사이트에 액세스하는 데 사용하는 장치에 관계없이 사용자 환경과 장치를 고려하여 웹 디자인을 설명합니다. 예를 들어 반응 형 웹 사이트는 데스크톱, 태블릿 또는 스마트 폰에서 웹 사이트를 방문하든 동일한 수준의 경험을 제공해야합니다.
이를 위해 웹 사이트는 다양한 해상도, 화면 크기 및 터치에 적응해야합니다.
반응 형 Google지도를 웹 사이트에 임베드
Google지도를 웹 사이트에 포함시키는 방법에는 세 가지가 있습니다. WordPress 테마를 사용하는 경우 해당 기능이 내장되어있을 수 있습니다. 플러그인을 사용하거나 Google의 코드를 웹 사이트에 직접 삽입 할 수도 있습니다. 첫 번째 및 두 번째 옵션은 WordPress 사용자에게 적합하며 다른 CMS는 플러그인도 사용하므로 여기에서 다룰 수 있습니다. 코드를 사용하는 마지막 옵션은 빌드 방법에 관계없이 대부분의 웹 사이트에서 작동합니다.
워드 프레스 테마를 사용하여 반응 형 Google지도 삽입
일부 WordPress 테마에는 Google지도 전용 기능이 있습니다. 지도는 현대 웹 사이트의 기본 요소이므로 일부 테마 디자이너는지도를 디자인에 직접 구현했습니다. 테마에지도 기능이있는 경우 제대로 작동하려면 Google Maps API가 필요할 수 있습니다. 테마 옵션에 API를 추가하면 방문 할 때마다지도를 작성하기 위해 Google과 직접 대화합니다.
- API 프로세스를 시작하려면 Google 웹 사이트에서이 페이지를 방문하십시오.
- 파란색 시작하기 버튼을 선택하십시오.
- 새 화면 왼쪽 상단에서 3 줄 메뉴 아이콘을 선택하십시오.
- API 및 서비스를 선택한 후 신임 정보를 선택하십시오.
- 신임 정보 작성을 선택한 후 API 키를 선택하십시오.
- 키 제한을 선택하고 HTTP 참조자를 선택하십시오.
- 저장을 선택하십시오.
- API 키를 복사하여 필요한 디자인 옵션 페이지에 붙여 넣습니다.
API 키가 있으면 테마 디자인 도구를 사용하여 웹 사이트에 Google지도를 구현할 수 있습니다. 테마가 반응 형인 한지도도 마찬가지입니다.
플러그인을 사용하여 반응 형 Google지도 삽입
WordPress는 플러그인을 사용하고 Joomla는 확장 프로그램을 사용하고 Drupal은 모듈이나 플러그인을 사용하고 다른 CMS는 유사한 이름 지정 규칙을 사용합니다. 어느 쪽이든, 플러그인은 기능을 추가하기 위해 핵심 CMS에 볼트로 고정 할 수있는 모듈 식 요소를 나타냅니다. 유용한 기능 중 하나는 Google Map입니다. 웹 사이트 테마에지도 요소가 포함되어 있지 않고 직접 코드를 작성하고 싶지 않은 경우 플러그인이 다음으로 가장 좋습니다.
- WordPress에서 플러그인 및 새로 추가로 이동하십시오.
- Google Maps를 검색하고 원하는 플러그인을 선택하십시오.
- 플러그인 내에서 활성화하고 설정으로 이동하십시오.
- 표시된 곳에 위에서 만든 Google Maps API를 추가하고 저장합니다.
- 지도를 표시 할 위치마다 플러그인을 구현하십시오.
다른 CMS는 이름과 메뉴 위치가 약간 다르지만 원리는 거의 동일합니다. 전부는 아니지만 대부분의지도 플러그인에는 Google Maps API가 작동해야합니다.
코드를 사용하여 반응 형 Google지도 포함
WordPress 또는 다른 CMS를 사용하지 않는 경우에도 반응 형 Google지도를 포함 할 수 있습니다. 모듈 대신 코드를 사용해야합니다. 약간의 작업이 필요하지만 동일한 반응 형 맵을 제공합니다.
- Google지도를 방문하여 표시하려는지도가 화면을 채울 때까지 탐색합니다.
- 파란색 공유 링크를 선택하고 Embed Map에서 코드를 복사하십시오.
- 와 사이에있는 코드에 특정 소스 코드를 추가하십시오.
- 지도를 보려는 웹 페이지의 HTML 내에 코드를 추가하십시오.
- 변경 사항을 저장하십시오.
코드:
이것은 내 코드가 아니며 온라인에서 찾았지만 웹 사이트에서 테스트했습니다. 그것은 매력처럼 작동하며 CMS, HTML, Hugo 또는 다른 많은 웹 사이트 언어 또는 페이지 도구 중 하나를 사용하든 작동해야합니다.
