A Cozmoslabs Product

Map Custom Field

Overview

This Extra Field Type is available in WordPress Creation Kit Hobbyist or Pro. The Map Field allows to add a Map in a Post, Page or Custom Post Type. Inside the Map you can Pin a location.

Creating a Map Field

To add a Map Field to a previously created Custom Meta Box, under the Meta Box Fields tab simply insert a Field Title and under Field Type make sure you select Map.

WordPress Creation Kit - Custom Fields Creator - Meta Box Fields - Map Field

The Map Field contains options to customize it:

  1. Description – Allows you to specify a description for the Map Field
  2. Required – Select whether the field is required or not
  3. Default Latitude – The latitude at which the Map Field should be displayed when no pins are attached
  4. Default Longitude – The longitude at which the Map Field should be displayed when no pins are attached
  5. Default Zoom – Add a number from 0 to 19. The higher the number the higher the zoom
  6. Map Height – The height of the map

Page, Post or Custom Post Type Edit Screen

This is how the Map Field we created above looks like in the Edit Screen:

WordPress Creation Kit - Custom Fields Creator - Meta Box Fields - Map Field (Editor)

Google Maps API

In order to make the Map Field work you will need to add your Google Maps API in WCK -> Start and Settings -> Extra Settings -> Google Maps API -> Save.

wordpress-creation-kit-custom-fields-creator-meta-box-fields-map-field-extra-settings

How to create your Google Maps API Key

First you will need to login into your Google account and then access Google Developers Console. Here you will be able to Register your application for Google Maps JavaScript API.

Profile Builder - Map Field - Google Map API Key

We will select to Create a new project and click on Continue.

Profile Builder - Map Field - Google Map Enabled API Key

Now the API is enabled for our project. We have to create credentials so we will click on “Go to credentials”.

Profile Builder - Map Field - Google Map Add Credentials

We will select Google Maps JavaScript API that will be called from a Web browser (Javascript). We need to click on “What credentials do I need?” to continue.

Profile Builder - Map Field - Google Map Create an API Key

We can give our API Key a Name like Google Map API Key. Also, we can add multiple HTTP referrers so that we can limit map loading only for these URLs. If you wish to allow an entire domain to load the Google Maps you can add an asterix at the end of the URL.

http://www.yourdomain.com/*

If we don’t add a HTTP referrer, requests will be accepted from any referrer (domain). To continue we have to click on “Create API key”

Profile Builder - Map Field - Google Map Get Your Credentials

Our API Key is now Created. Copy and Paste it in Profile Builder -> Manage Fields -> Map Field -> Google Maps API Key. To finish the process and go to API Manager click on “Done”.

Profile Builder - Map Field - Google Map API Manager

Enable Google Maps JavaScript API

Profile Builder - Map Field - Google Map JavaScript API

To enable Google Maps JavaScript API we have to go to Google APIs -> API Manager -> Overview -> And click on Google Maps JavaScript API.

Profile Builder - Map Field - Google Map Enable JavaScript API

The Ultimate Membership Bundle

Combine the power of Profile Builder with Paid Member Subscriptions to set up user registration, memberships, and recurring revenue.

Get 25% off with the bundle

Help & Support

We’re here to help you every step of the way.

Open a Support Ticket