Drupal을 사용하여 맞춤 Google지도 만들기

Acquia의 교육 웹 사이트를 Drupal 7로 업데이트하기로 결정했을 때, 이벤트 페이지에 예정된 모든 코스의 위치와 각 코스의지도를 보여주는지도가 있어야 사용자가 이벤트의 위치를 ​​빠르게 파악할 수 있습니다. 일어날 것입니다. 방문자는 Google지도에서지도를 열어 길을 찾을 수도 있습니다.

과거에는 Drupal에 저장된 위치 데이터로지도를 만드는 것이 어려웠습니다. 이를 처리하는 데 사용할 수있는 수많은 모듈과 방법이 있지만 올바른 조합을 찾는 것은 까다로울 수 있습니다. 교육 사이트의 경우 다음 세 가지 모듈 (필요한 다른 모듈과 함께)을 사용하여 모든 작업을 수행하는 방법을 알아 냈습니다.

이 연습에서는 이러한 모듈을 사용하여 사용자 지정 이벤트 맵을 생성하는 방법을 보여줍니다. IP Geolocation View & Maps를 사용하여 사이트 방문자로부터 위치 데이터를 수집하고 각 모듈을 구성하는 것으로 시작하고, 뷰어의 위치를 ​​나타내는 핀과 함께 예정된 이벤트의 위치를 ​​보여주는 글로벌 맵을 생성합니다.



결과를 볼 수 있습니다. 여기 .

01 단계

먼저 Location, Location CCK, GMap, GMap Location 및 IP Geolocation Views & Maps (IPGV & M) 모듈을 활성화해야합니다. 필요한 몇 가지 종속성 (예 :보기)이 있으므로 계속해서 활성화하십시오.

02 단계

위치 모듈 구성

위치 모듈 구성

관리> 구성> 콘텐츠> 위치로 이동하여 위치 모듈을 구성합니다. Main Settings에서 Open map link in new window 옵션을 활성화하고 Map Links 탭은 그대로 두었습니다. 지오 코딩 옵션 탭의 Google지도 지오 코딩 최소 정확도 드롭 다운에서 주소 수준 정확도를 선택했습니다. 또한 코스를 운영하는 각 국가의 Google지도 버튼을 선택했습니다. 새로운 국가에서 이벤트를 추가하는 경우 여기로 돌아와 해당 국가에 대한 지오 코딩을 활성화해야합니다.

03 단계

GMap 모듈을 구성하려면 관리> 구성> 서비스> Gmap으로 이동하여 Google Maps API 키를 입력합니다. 사용할지도 기본값을 입력합니다. 이벤트 페이지 디자인에 맞추기 위해 기본 너비 350px, 기본 높이 160px, 기본 중앙 없음을 사용했습니다. 마커 작업 옵션을 정보 창 열기로 설정하여 사용자가 마커를 클릭 할 때 팝업이 표시되도록 할 수 있습니다.

04 단계

IPGV & M 모듈을 사용하면 사용자로부터 위치 정보를 수집 할 수 있습니다. 지도가있는 페이지를 방문하면 해당 위치를지도에 표시하고 이벤트에 대한 방향을 제공하는 데 사용할 수 있습니다. 관리> 구성> 시스템> ip_geoloc로 이동하여 구성하십시오. Employ Smart IP…와 함께 Employ the Google Maps API…를 백업으로 선택했습니다. 또한 사용자 위치 데이터를 수집하려는 URL (모든 이벤트 노드 및 기본 이벤트 랜딩 페이지)을 입력했습니다. 다른 옵션은 기본값으로 두었습니다.

05 단계

위치 필드 만들기

서있는 고양이를 그리는 방법
위치 필드 만들기

각 이벤트 노드의 이벤트 위치에 대한 Google지도를 표시하려고했습니다. 위치 모듈을 사용하여 주소를 가져와지도에 표시하기 위해 위도와 경도로 지오 코딩하는 위치 필드를 만들 수 있습니다. 온라인 이벤트와 같이 위치 데이터를 입력하지 않은 경우 빈지도가 표시되는 것을 방지하기 위해 기본값 설정에 기본값을 설정하지 않았습니다.

06 단계

컬렉션 설정에서 위치 이름, 거리 위치, 추가, 국가,시, 주 /도 (두 번째 메뉴에서 드롭 다운 선택), 우편 번호 및 좌표 선택기 (이 어떤 이유로 지오 코딩이 실패 할 경우 편집기가 위도와 경도를 입력 할 수 있습니다.) 디스플레이 설정에서 좌표 선택기, 지방 이름, 국가 이름 및 좌표를 선택했습니다. GMap 매크로는 간단히 [gmap]으로 설정되고 GMap 마커는 파란색입니다.

07 단계

이벤트 컨텐츠 유형의 디스플레이 관리 탭에서 위치 필드의 형식으로지도가있는 주소를 선택하십시오. 이제 주소가있는 이벤트를 볼 때 실제 주소와 위치의지도를 볼 수 있습니다. Google지도에 대한 링크가지도 아래에 제공되어 사용자가 자신의 위치에서 길 찾기와 같이 상호 작용할 수 있습니다.

08 단계

이벤트를 저장 한 후지도가 나타나지 않으면 뒤로 돌아가서 노드를 편집하여 위도와 경도가 위치 데이터 아래에 표시되도록합니다. 그렇지 않은 경우 해당 국가에 대해 지오 코딩을 활성화하거나 위도와 경도를 수동으로 입력해야 할 수 있습니다. 그래도 작동하지 않으면 위의 모든 설정을 다시 확인하세요. 마지막 수단으로 해당 특정 모듈에 대한 문제 목록을 확인하십시오. Drupal 사이트 거기에서 도움을받을 수 있는지 확인하십시오.

09 단계

보기 모듈은 디스플레이를 만듭니다.

보기 모듈은 디스플레이를 만듭니다.

마지막으로해야 할 일은 세계지도에서 우리의 모든 이벤트를 보여주는 디스플레이를 만드는 것입니다. IPGV & M 모듈과 함께보기 모듈을 사용하여이를 수행 할 수 있습니다. 보기는 가장 단순한 웹 사이트를 제외한 모든 웹 사이트에서 사용되는 유비쿼터스 모듈 중 하나입니다. IPGV & M에서 필요하므로이 시점에서 이미 활성화되어 있어야합니다.

10 단계

새보기 (관리자> 구조>보기> 추가)를 만들고 표시 형식이지도로 설정된 블록 만들기 (IPGV & M을 통한 Google API)를 선택합니다. 이 옵션의 설정에서 위도 및 경도 필드에 대한 드롭 다운 선택 항목을 볼 수 있습니다. 보기의 필드 목록에 해당 필드를 이미 추가 한 경우 선택합니다. 그렇지 않으면 지금은 공백으로 두십시오. 필드를 추가 한 후 추가 할 수 있습니다. 기본 위치 마커는 기본값으로 설정된 상태로 둡니다.

11 단계

지도 옵션은 까다로운 것들이 나오는 곳입니다. 원하는 결과를 얻으려면 옵션을 가지고 놀아야합니다. 우리는 다음을 사용했습니다.

{'mapTypeId':'roadmap', 'disableDefaultUI':true, 'zoom':2, 'zoomControl':true, 'scaleC ontrol':true,'centerLat':20, 'centerLng':-30}

지도 스타일 (CSS 속성)에서지도 자체에 대한 CSS 스타일을 추가합니다. 여기서는 height : 400px; width : 100 %를 사용합니다. 지도 중앙 맞춤 옵션에서 방문자의 현재 위치를지도 중앙에 맞추기를 선택하고 사용자 아이콘 색상에 대한 16 진수 색상 코드 (# 제외)를 입력합니다.

12 단계

위치 : 위도 및 위치 : 경도 필드를보기에 추가합니다. 이러한 필드를 표시에서 제외로 설정해야합니다. 그런 다음 누군가지도의 마커를 클릭 할 때 팝업에 표시 할 다른 필드를 추가합니다. 예를 들어 콘텐츠 : 제목, 콘텐츠 : 날짜, 위치 : 도시 등이 있습니다. 시작 날짜가 미래인 이벤트 노드 만 표시하도록보기에 필터를 추가했습니다 (콘텐츠 : 날짜 (시작 날짜)> 지금).

13 단계

보기를 저장하고 사이트에서 표시 할 블록을 추가하십시오. 우리지도를 볼 수 있습니다 여기 .

이 기사는 원래 259 호에 게재되었습니다. 넷 매거진 .

: 데이브 마이 버그

마음에 드 셨나요? 읽어보세요!

새로운 해리 포터 레고 세트 2018