Toolset Reference Sites의 고급 구글지도 기능 – 위치정보와 거리로 검색

구글지도을 사용하는 reference sites를 업데이트 했습니다. Real Estate site는, 위치정보 기능과 마커의 사용자정의 스타일을 사용해서, 반경내에서 필터링하는 방법을 보여줍니다.

거리와 위치정보(geolocation)로 필터링

Real Estate site의 Map Search page를 방문합니다.

속성 검색(property search)으로 글을 거리로 필터링할 수 있습니다. 이제 현재 위치 또는 특정 위치의 주어진 반경 내에서 속성(properties)을 찾을 수 있습니다.

특정 위치 근처 검색

입력 필드를 사용해서 주소를 입력합니다. 입력시 구글지도에서 일치하는 위치를 물어봅니다. “Search map” 버튼을 누르면, 지정된 반경 내의 모든 속성을 볼 수 있습니다.

Searching properties according to a distance from a point of interest
관심 지점으로 부터의 거리에 따른 속성 검색

위치 정보(Geolocation)

또는 현재 위치를 사용할 수도 있습니다.

  1. Use my location 버튼을 누릅니다.
  2. 내 위치를 공유할 지를 묻습니다. 동의하면 현재 위치(지리적 좌표로:위도와 경도)가 입력 필드에 전달됩니다.
  3. “Search map”을 클릭하면, 선택한 반경 내의 모든 속성들이 표시됩니다.
Clicking on the “Use my location” detects your current location
“Use my location”을 클릭하면 현재 위치가 감지됩니다.

post types별로 다른 마커 사용

툴셋으로 사용자정의 아이콘으로 마커를 만들 수 있습니다.

Real Estate 사이트에 4개의 post types이 있습니다: Offices, Apartments, Lands, 및 Houses. 각각의 post type은 다른 색의 마커로 지도에 표시됩니다.

Styling markers - each kind of property uses a different icon
마커 스타일링 – 유형별로 다른 아이콘 사용

어떻게 구현할까요? 마커에 사용자정의 아이콘을 사용하고, post slug를 표시하는 이미지 URL 안에 wpv-post-type 숏코드를 사용합니다. representing the post slug:

Using different markers for different post types
post types별로 다른 마커 사용

예를 들어, Office post type에 속하는 글은 다음 아이콘으로 표시됩니다:
https://real-estate-wordpress.discover-wp.com/files/2015/11/marker-office.png

Customizing the marker Icons에 대해 자세히 알아보십시오.

Showing post fields in the marker pop-up tooltips

You can display post fields in your marker tooltips. In our Real Estate site when you click on a marker, you will see the property image, the post title, and the property price.

Adding pop-up tooltips to markers
Adding pop-up tooltips to markers

To customize the information displayed in the marker pop-up, use the Marker data tab when inserting your markers.

Where to set up your custom content to appear in the marker pop-up
Where to set up your custom content to appear in the marker pop-up

Clustering – grouping together close-by markers

The Travel destination site collects tours from around the world. When some of these places are located close to each other it can be tricky to show them all on a global map.

This is where clustering can help.

Clusters group together markers which are closely located to each other on a map. They are represented by a single, cluster icon on a map:

Clustering - grouping together markers which are closely located to each other
Clustering – grouping together markers which are closely located to each other

When you zoom into the map view, individual markers will appear on the expanded map area. In our example, they represent tours.

Clusters turn into individual markers upon zooming in
Clusters turn into individual markers upon zooming in

Re-focusing the map

When you play with a Google map, you might lose its initial state. Now it is easy to refocus it around a marker.

In our Travel destination site, pick the tour you want and scroll down the page to view the map.

  1. Drag your map to move it.
  2. Press the “Focus map on a marker” button to retrieve the initial focus of the map. The map will be centered according to the marker.

Go ahead and create a new test site in discover-wp.com to play around with these features.
You can also visit our documentation to learn other Toolset Map features.

Step 1. Drag your map to move it.
Step 1. Drag your map to move it.
2. Press the “Focus map on a marker” button to re-center the map
2. Press the “Focus map on a marker” button to recenter the map

Displaying all posts on one map and highlighting the current post

You can display all posts on a map and highlight the current post.

Visit an individual property page of the Real Estate site. You will see all the properties as grey markers and the current property shown with the orange marker.

Displaying all posts on one map and highlighting the current post
Displaying all posts on one map and highlighting the current post

Use the following steps to implement this.

In the template for your single posts:

  1. Insert a shortcode that renders a map.
  2. Insert the marker that reflects the current post’s location. Customize it so that it stands out. For example, you can use a custom icon.
  3. Insert a View that displays all markers on the same map you inserted in step 1. To prevent the current post’s marker from appearing twice on the map, make sure that the Don’t include current page in query result option is checked in the View editor.

What is your favorite Toolset Maps feature?

Go ahead and create a new test site in discover-wp.com to play around with these features.

You can also visit our documentation to learn other Toolset Map features.

Please tell us which is your favorite one.

If you have used any of these features in your project, feel free to share the link in the comments. We will be happy to see how you use Toolset Maps.

출처: Advanced Google Maps Features in Toolset Reference Sites – Geolocation and Filter-by-Distance

Leave a comment