My Maps location: Locations & Categories

1. Get a Google Maps API key

Each time you use the Google Maps APIs, if you domain has been created after June 22 2016, you must include a key, to validate your request.
Get a key and enable API: https://developers.google.com/maps/documentation/javascript/get-api-key

More information: https://developers.google.com/maps/documentation/javascript/usage?hl=en

The first step is to cretae a project and then type the name of the project.

If i want to allow all requests from mydomain, then the pattern to follow is *.joomunited.com/*
If you want to just allow single domain for example mydomain.com then pattern would be joomunited.com/*

On a localhost environment, you can put any valid key and it will work without any domain referring.

The API key is generated then, this is the key you need to copy to add to My Maps location.

Add the key to My Maps Location.

From the Components > My Maps Location > Option view, you can add a key in the configuration.

Paste the key.

Step by step resumé:

So the steps i follow are

Go to the Google API Console
Create or select a project
Click on Continue to enable the API and any related services
On the Credentials page, get a Browser key (and set the API Credentials)
To prevent quota theft, secure your API key following those best practices

2. Manage categories of location

Location are classified in categories. Those categories can be displayed as filter in frontend or used as a predefined parameter in a menu item to load some categorized locations.

If you have a lot of locations, it's recommended to use categories. You can create categories and sub categories.
To create a category, please go in My Maps location > Category and click on New

Then from the category screen you'll need to add a title and a parent category in case you want to create a subcategory

You can also define a default marker for location in the ctaegory using the tab Marker selection

Note: a category is created by default named "My category" allowing you to start adding locations directly after install

3. Create a location

In order to create a location, please go in My Maps location > Locations > New

There is 3 mandatory fields:

Name of the location
Category of the location
Location details (address)

For the address you got 3 solution to add it:

Use the search field (recommended)
Navigate onto the map and use the cursor to point a location
Fill an address (must be Google Maps valid)

To add a location with the search engine, type the name of the place you want to add.

On selection, the latitude and longitude fields will be filled automatically. My maps is also integrated with Google places! It means you can search for a shop or anything else that is registered on Google Maps, our component will get all the place information.

You can also move on the map and put a marker directly, the result will be the same and you’ll get a latitude and a longitude automatically filled.

Be careful with the address field and zip code if you fill it manually, it must match with a Google Maps known address.

All other information of the location (description, hours,...) are displayed in the detailed view of the location.

The contact link in the location detail edition, is the possibility to add a contact link, mailto or URL per location. On frontend it will a contact button that will open the URL or execute the mailto action.

4. Other location information

On each location you can add an image and a marker.

Location image: Image will be displayed as a thumbnail in the tooltip of the location and at a bigger size on the location detail page.
Use category icon: Use Icon that you put in category field of my map locations
Marker Background: pick the color for your background marker
Marker will be displayed on the map as location marker icon. You also got some nice marker sets for your locations included in My Maps Location extension.
Use a Custom Link will override the link to the detail of the location by a custom URL.

My Maps location is using the Joomla native multilingual feature. You can define a language in categories of location and in locations. On language switch, locations will be filtered like any other Joomla content in order to display the language approved content.

The location description field is one of the most important.
It will be displayed on the location detail page and, depending on the theme, as an intro text of the location in search results. More important, the description is a WYSIWYG editor with all the plugin loaded inside, it means that you can anything you want in it (images, videos...).

Here's the intro text displayed in location search results.

The tag field is the same tag system as Joomla. You can add tags and sub-tags then load it in frontend as filter. To manage all the tags, just load the Joomla tag component: Menu Component > Tags
On frontend, depending of the configuration, tags can be displayed as checkbox (like bellow) or as a dropdown list.

My Maps Location got additional fields to fill meta information (for search engines). This fields are loaded on the location detail page.

5. Display locations on frontend

In order to display your locations on frontend you can use:

A menu to display location search engine, single location or category of locations
A module to display a search field or select a set of locations
An editor button to display single or multiple locations in any editor

From the Joomla menu manager, add an element and select as type “Location search and display”. It will display the location search engine with filters.
Select “Location detail view” to display a single predefined location.

If you select “Location search and display” you have some display parameters. Some may override default component parameters.

From the main tab of the menu you can setup:

Enter address: you can force a default address to be displayed on page load. It can be left empty
Distance: the distance to lock search, referring the address above. It can be left as -1 (default)
Category: load a specific category of location
Search limit: limit the number of search results. 10 will only return the 10 first results on location search
Ordering: order search results by Date, Title, Distance (default)

Then on the My Maps Location menu tab, you can setup:

Select Component: My Maps Location or all 3rd party integration like K2, Jomsocial...
Default category ID (3rd party extensions): Default category to load when a 3rd party extension is in used, like K2, Hikashop or Adsmanager, CB list ID for comunity builder
Child category locations: Display also as search results locations from sub categories, not only the one selected above
Theme: select one of the 3 themes default, full width and sidebar of the search and result display theme available for the menu item
Map provider: Select Google Maps, Bing Maps, Mapbox, OpenStreetMap, Baidu or Mapquest to style your Maps
Enable Search Tags: Allows search queries to be done using location tag names
Designs: Depending of the map source you have several map types and colors
Map layer: Add some data (layer) to you maps. There are KML layer, Traffic layer, Transit layer and Bicycling layer.
Google Map Layer Url: Use the Data layer to store your custom data, or to display GeoJSON data on a Google map
Bing Maps type: If Bing Maps is your map provider, select the appearance and data of Bing Maps
OpenStreetMap type: If OpenStreetMap is your map provider, then you can add some data (layer) to you maps
Location tooltip: On map load, automatically open location tooltip after location search
Map zoom: Define a default zoom level on the map
Map and search results width and height options

Frontend display based on theme

Result for a single location search display:

Display locations using a module

My maps location comes with 2 modules for native locations + other for 3rd party integration (like a module to display K2 item locations)

The Map module allows you to display your locations with the same filters as the menu but in a module position. The locations will be displayed as Map or List. You can select a set of locations or select location categories.

My Maps Location Map – Search Module will display a search engine with some filters as option like the map width or the component in which the location will be searched (search for K2 location only for axample).

Display module on frontend:

Display locations using an editor button

The editor button will be loaded in your Joomla editor (usually in articles or HTML custom modules). You’ll see the button at the bottom of your editor.
On click you’ll see a lightbox that allows you to select one or several locations you’ve added before.

Then you can select one or some location and push the button to add it in your article. If you don’t specify any zoom level, it will be automatically loaded to fit you location area.
The tag code you’ll see in your WYSIWYG editor will be like this model: {mymaplocations mapid width height}

Ex: {mymaplocation id=1 width=58% height=400px zoom=10 type=google} this code will display a map with the location ID=1, with 58% width, 400px height, 10 times zoom and Google type. Using the comma to add more than one location in a map. Ex: {mymaplocation id=1 width=58% height=400px zoom=10 type=google} the location ID = 1, 2, 3.