Itinerary Map Custom Field plugin for Joomla 3.7+ Documentation

Demo:
Requirement: Joomla 3.7+ | Download

INTRODUCTION


This plg_fields_itin.zip plugin is a new type of plugin extension for Joomla introduced in the 3.7 version: Custom Fields.

INSTALLATION


This plugin installs via the usual Joomla installer. Go to your Joomla backend at yoursite.com/administrator, login and go to:

TOP MENU > EXTENSIONS > INSTALL > UPLOAD PACKAGE FILE tab



Click the browse button to select the plg_fields_itin.zip archive on your computer.

Click Upload


PLUGIN SETUP


Once the plugin is uploaded, it installs automatically. You now have to check its global settings. Go to:

TOP MENU > EXTENSIONS > PLUGINS, filter the list by plugin type: FIELDS
And find the GMAP plugin.

As most settings are specific to fields objects, the plugin's global settings are very limited. Only 2 of these:

Google Maps API Key: This is the required key provided by Google so they know how much you use their service so they can check your quota. To get your API Key, go to the Google console API at 
https://console.developers.google.com/

Create a project and visit the LIBRARY page. Include these Libraries:
  • Mandatory: Google Maps JavaScript API: Required to render the map used to set a location, clicking on the map overlay and / or dragging markers
  • Mandatory: Google Places API Web Service: Required to be able to move the locator map to specific addresses
  • Optional: Elevation Maps API 
Once the libraries are added to your console project, you can go to the CREDENTIALS page and get your key. It is recommended you set http referrer restrictions to your key so your API key can only be used to your own domain(s).

Input the credentials API key to the relative field in our plugin setting.


FIRST FIELD CREATION


Now the plugin is set and ready, we can create our first field. Custom Fields are supported by at least 3 components in the Joomla core: com_content (articles), com_users & com_contacts. Choose one of these for your first ITIN Field. Go either to:

TOP MENU > CONTENT > FIELDS (for fields to show in Joomla Articles)
or
TOP MENU > COMPONENTS > CONTACT > FIELDS (for fields to show in a contact page)
or
TOP MENU > USERS > FIELDS (for fields to show in Joomla User profiles)


Click the NEW button, and let's create your first ITIN Custom Field

Title: Set a descriptive title for your GMAP field
Type: if the plugin is enabled, your'll find the field: GoogleMaps Map (gmap) plugin type. Select it
Name: this should be filled automatically after saving the field once
Label: Set the label for your field
Description: You can set a description for the field, it will show when a user woul hover the field label with the mouse cursor
Required: Should the user ba able so submit the form without setting the field
Default Value: Don't set it here. Default values are to be set in the following section

Form Settings section
This section shows settings for the form field map.


Map Width: set the width of the form map. Don't forget to specify % or px units
Map Height: set the height of the form map. Don't forget to specify px unit
Default Latitude & Default Longitude: Default coordinates to load the form map
Default Maptype: Select the default maptype for the backend
Map Custom Styling: You can customize the map layout colors. This will override your MAPTYPE setting in the previous parameter. Basicaly you need to paste in this field, the JSON code you get on https://mapstyle.withgoogle.com/ 
  • Created on .
  • Last updated on .
Disclaimer: Nordmograph is not affiliated with or endorsed by The Joomla! Project™. Any products and services provided through this site are not supported or warrantied by The Joomla! Project or Open Source Matters, Inc. Use of the Joomla!® name, symbol, logo and related trademarks is permitted under a limited license granted by Open Source Matters, Inc.
Copyright © 2021 Nordmograph - Joomla extensions. All Rights Reserved.
Joomla! is Free Software released under the GNU General Public License.
Browser of the future