지도 통합을 추가하면 고객의 위치를 찾는 데 도움이 되는 웹사이트에 이점이 있습니다. 이제 MetForm을 사용하면 Google 지도 위치를 양식에 쉽게 추가할 수 있습니다.
How to Create a Map Integration #
이는 고객이나 양식 제출자를 더 잘 아는 데 도움이 되는 매우 유용한 기능입니다. MetForm을 사용하면 두 단계를 채택하여 지도 통합을 쉽게 만들 수 있습니다. 이 통합을 추가하는 방법을 살펴보겠습니다.
전제 조건: #
For Google Maps integration to your WordPress forms, you need to have the following plugins installed on your WordPress site:
당신은 MetForm Professional Plan to use this feature.
Step 1: Generate and insert map API key #
Access your WordPress admin dashboard.
- Hover your mouse on MetForm and click Settings
- Visit general -> map
- 누르세요 "여기서 양식 만들기" 링크 like the image
로그인하거나 가입해야 하는 Google Cloud Platform으로 리디렉션됩니다.
이제 탐색 메뉴를 클릭해야 합니다.
- 찾다 API 및 서비스
- Go to Library
- Find Maps JavaScript API and Places API
다음으로 JavaScript API를 클릭하고 활성화해야 합니다.
Like JavaScript, you need to enable the Places API.
However, you’ll also need to enable the Geocoding API. This is required so the address can auto-fill automatically whenever a pin is placed or moved on the map.
다음, go to Credentials.
딸깍 하는 소리 + Create credentials and select API key.
- You’ll see a window now. From here, select the Map JavaScript API and Places API for the API restrictions
- Press ok
Your API key has been generated, copy it.
Now, return to MetForm, enter that copied key in the API box and press the 변경 사항을 저장하다 단추.
자세히 알아보기 MetForm의 일반 설정.
Step 2: Add a New Form to Integrate with the Map #
You need to create a form.To do it, go to 양식 from MetForm. A popup from settings will open up after clicking the Add New button.
- Select General
- Take a new blank template
Go to the form settings –
- 에서 General tab, write a title for your form
- Scroll down and click the Edit content button
This will redirect you to the Elementor dashboard, from where you need to drag and drop the MetForm Google Map Location widget.
Customize the Widget #
그만큼 콘텐츠 탭 offers these controls –
- Map API Notice: Instructions to configure Map API from MetForm → Settings, with a “Configure form here” link and a reminder to enable Maps JavaScript API, Places API, and Geocoding API
- 라벨 표시: Toggle (Yes/No) — controls whether a label shows above the input.
- 위치: Dropdown (currently “Top”) — sets label position (top or left of the input)
- 상표: Text field (“Google Map Location”) — the label text that will be displayed
- 이름: Text field (“mf-map-location”) — unique field name, must be entered without spaces or special characters
Settings part –
Required?: Turn “Yes” to make this field mandatory for form submission.
경고 메시지: The message shown to the user if they try to submit without filling this required field.
Map Settings –
- Show Map: Toggles whether an interactive map appears below the address search box.
- Select Point by Clicking Map: If “Yes,” users can click anywhere on the map to set the location.
- Draggable Marker: If “Yes,” users can drag the pin to fine-tune the exact location.
- Default Latitude: Sets the starting latitude coordinate the map centers on by default.
- Default Longitude: Sets the starting longitude coordinate the map centers on by default.
- Default Zoom: Controls how zoomed-in the map is when it first loads (higher = closer).
- Map Height (px): Sets the height of the map display in pixels.
Let’s style the map. Go to the the Style tab.
상표:
- 색상: Choose the color of the label text
- 타이포그래피: Set the font style for the label
- 심: Adjust top, right, bottom, and left padding
- 여유: Adjust top, right, bottom, and left margin
입력:
- 심: Adjust top, right, bottom, and left padding
- 여유: Adjust top, right, bottom, and left margin
- State: Switch between Normal, Hover, and Focus states
- Input Color: Set the color of the input field
- 배경 유형: Choose the background style
- 테두리 유형: Select the border style, default or custom
- 타이포그래피: Set the font style for the input text
- 국경 반경: Adjust the roundness of the input corners
Place Holder:
- 타이포그래피: Set the font style for the placeholder text
- 색상: Choose the color of the placeholder text
After customization, update the changes and check if it works fine.
지도 통합의 최종 모습은 다음과 같습니다.
