GoogleMap PRO documentation for the component

The controlpanel is where you can get an overview of the possibilities within GoogleMap Pro. You have all the quick buttons that you need to make an informed choice about what you want to do. At the right a panel shows you the latest uploaded destinations, lines/shapes and comments.

Basically the controlpanel is there to provide easy access to all the possibilities of the GoogleMap Pro component.

This is the destinations list.You can delete, publish, order, edit, copy and add new destinations here. The list is meant to provide you with an overview of all the destinations added to the component.

The list is here showing you: ID, destination name, address, town, category, order, created by, date and if it's published.

 

The screenshot above is displaying an actual destination.

The destination gives you the following options: 

• Name (required)
• Lattitude (required). Can be tranfered from the "google by map" or "google by address". Can also be manually entered.
• Longitude (required). Can be tranfered from the "google by map" or "google by address" .Can also be manually entered.
• Description. This field accepts html, but you will have to know how to use it. An editor is not used to prevent mistakes.
• Picture. A picture can be added to the field. When uploaded it can be deleted. The size of the picture can be defined in the configuration.
• Category (required).
• Icon. Choose an icon from the list. This tells you what icon will be displayed on the map. The icons are located: components/com_googlepro/icons/
• Route accepted. Whether the destination should be in the route selection dropdown.
• Menu link. You can enter a menu link to attach the destination.
• Published.
• Google by address: You have the possibility to transfer the coordinates by typing in an address here. This is also good to fill out to show address information in the marker. Alsomandatory if you want the weather to be shown.
• Google by map: This gives you a possibility to find the exact location on a map, and then transfer the coordinates.
• Custom fields:If custom fields have been added to the category you have picked, then you will see a custom field tab witht eh given custom fields you have created for this category.

 

This is the list of thecategories.  You can delete, publish, edit and add new categories here. The list is meant to provide you with an overview of all the categories added to the component.

The list is here showing you: ID, category name, setCenter, width, height and if it's published.

 

 

The screenshots above is displaying an actual category.

The first tab gives you the following options: 

• Name (required)
• setCenter (required). This is the coordinates for the center of the map when loaded. An example is: 8.574,7.45 (notice the comma seperating the lattitude and longitude.)
• Width (required). The width of the map. An example: 100% OR 400px
• Height (required). The height of the map. An example: 400px (NOTE: never used % when declaring height.)
• Zoomlevel. The zoomlevel of the map when it loads.
• Image. Choose an icon from the list. The icon is used in the category view if you want an icon displayed next to the name. The icons are located: components/com_googlepro/icons/
• Pre description. This is a description that will be shown before the map. (NOTE: do not work in crome and safari due to tab bug)
• After description. This is a description that will be shown after the map. (NOTE: do not work in crome and safari due to tab bug
• Published

 

The second tab gives you the following options:  

• Marker name. Indicates if the name should be shown on the marker.
• Marker picture. Indicates if the picture should be shown on the marker. 
• Marker address. Indicates if the address should be shown on the marker.
• Marker text. Indicates if the description should be shown on the marker.
• Marker link. Indicates if the menulink should be shown on the marker.
• Marker custom fields. Indicates if the custom fields should be shown on the marker.
• Marker picture. Indicates if the picture should be shown on the marker.
• Link to destination page. Indicates if a link should be added to the infowindow linking to the destination landing page.
• Show weather. Indicates if the weather should be shown on the marker. Only applicable if the address information is filled out.
• Marker popup onload. Indicates if the first marker should popup onload.
• User interaction. Should the users frontend be able to interact with the component.
• Add/edit destinations (requires userinteraction is yes).  Gives the logged in user the possibility to upload and edit destinations to the map.
• Add/edit shapes/lines (requires userinteraction is yes).  Gives the logged in user the possibility to upload and edit shapes/lines to the map.
• Add comments (requires userinteraction is yes). Gives the logged in user the possibility to add comments to the map.
• Paypal integration (requires userinteraction is yes). If enabled, gives you the possibility to require users to go via paypal before adding destinations/lines/shapes.
• Routeplanning. Should the user be able to routeplan?
• Find address. Indicates if a user should be able to search for a location on the map.
• Find on map. Displays a list of destinations if enabled.
• Search destinations. Gives the user the possibility to search for destinations.
• Use customized balloon. Indicates if the balloon should be the standard popup or if you are using the customized.
• Clustering. If set to yes, clustering is enabled. CLustering options can be set in the configuration panel. Clustering basically means that if a vast amount of markers are in a small dense area, then it will cluster into one marker, and when zooming in becomming more and more markers.
• Map Controls. You can choose between small and large map controls in the frontend. Large controls are suited for big maps, whereas small maps would look better with small controls.
• Map Scale control. Add a scale in the bottom left corner. Can come in handy if you want to see how long there is from a to b on the map.
• Map scroll zoom. Enable the user to zoom with scroll on the mouse.
• Enable continues zoom. Smoothly zooms in on a map rather than repainting it.
• Streetview. Enabled the user will be able to see the streets in real pictures and see how it looks exactly. The streetview is contrelled by a draggable marker. (NOTE:: Streetview can only be found in the blue areas of the map. And remeber to zoom in when using it!)
• Map type control. Normal map type control (map, satelite and hybrid). Extended map type control (map, satelite,hybrid and terrain.)
• Map type onload. You can pick from normal, satelite,hybrid and terrain. This decides how the map will start onload (NOTE: DO not pick terrain if extended view is not selected on map type control)
• Adsense.If enabled, then the user can search via a search bar in the bottom left for companies etc.This should only be enabled if you have an adsense account with google, and know how to properly use it. Go to this link to learn more: click here
• Adsafe. The level of entegrity in the ads. If set to high, then alcohol ads will not appear. If set to off, everything will appear. Moreover you can choose between medium and low.
• Adsense client. The client id you have received by google when applying for adsense search.
• Adsense channel. The adsense channel you have set up with adsense search.

 

This is the list of the lines/shapes.  You can delete, publish, order, edit, copy and add new lines/shapes here. The list is meant to provide you with an overview of all the lines/shapes added to the component.

The list is here showing you: ID, lines/shapes, category, order, created by, date and if it's published.

The screenshot above is displaying an actual line/shape.

The line/shapegives you the following options: 

• Name (required)
• Coordinates (required). Will automatically be transfered from the map when using it. Always use the map to enter coordinates for you.
• Category (required).
• Width. Can range from 1-50.
• Colour. Use the pick colour button to tranfer a colour.
• Lineopacity. Ranges from 0-1. Example: 0.6
• Fillopacity. Used for shapes only.  Example: 0.6
• Fillcolour. Used for shapes only. Use the pick colour button to tranfer a colour.
• The map: The map is used to transfer coordinates. You can choose to draw a line or a shape.

 

This is the list of the comments.  You can delete, publish, edit and add new comments here. The list is meant to provide you with an overview of all the comments added to the component.

The list is here showing you: id, name, title, comment, created by and published.

NOTE: Comments can not be added in the administration panel. They can only be added from the frontend.

The actual comment is shown here. You can edit the name, title, text in this view. You can also publish/unpublish the comment.

 

The picture above is displaying a potential custom fields list created with the GoogleMap Pro component.

The list is displaying: id, name, category, type, required, order by and published state.

You have the options to create a new custom field, delete custom fields, publishing custom fields and editing custom fields.

 

 

When creating a new custom field or editing an existing you have to consider these options:

• Category (required) - The category you pick for the custom field decides where the custom field will be created. 
• Name (required) - This is the name the custom field will have frontend as well. Choose this name carefully
• Type (required) - This is deciding what type of custom field you are creating. At this moment you can choose from these custom fields:
  
  • Text box - a normal input field.
  • Text area - a textarea where users can write more than in a text box
  • Select list - a list of attributes. Only one can be selected.
  • Multiple select list - a list of attributes. Multiple attributes can be selected.
  • Checkbox - A regular checkbox. Could be uses for confirming trading politics etc.
  • Radio - A radio group, used when multiple answers can be selected.
  • Link - a text box creating a link.
  • E-mail - a text box creating an e-mail.
• Values - This field is used only for: select list, multiple select list and radio group. Values are seperated by a new line.
• Required - Decides is the field is required to befilled out in the prefrences frontend.
• Published - Is the custom field active or not?

The frontend of the Import/Export tab gives you three options, which are: Import data, Export Data and the possibility to use http://www.gpsvisualizer.com.

http://www.gpsvisualizer.com is a site where you can import/export GPS files, and transform it to maps.

You could for instance import a GPS file, and transform it to .kml - and that way add it to GoogleMap Pro.

NOTE: The import/export functions are very limited at this point and not very flexible. Contact me if you need a more flecible solution or advice on how to deal with it.

When you import data, you can choose to import destinations or lines/shapes to a given category.

Each method have a different way of constructing your .csv files. Two demonstar, I will show you both ways:

Import destination (name,lat,long):

Test,8.7,7.6
Test 2,6.45,7.45

As you can see, the .csv file (comma seperated file) have a name, lattitude and longitude on each line.

Each property is seperated by a comma. Each destination is seperated by a new line.

Import line/shape (name,type,coordinates):

Test,2,"8.7,7.6,9.555,6.777"
Test,1,"6.45,7.45,4.2,7.6

As you can see, the .csv file (comma seperated file) have a name, type (line or shape/ 1 or 2) and a set of coordinates on each line.

Each property is seperated by a comma. Each destination is seperated by a new line. Note that coordinates are surrounded by " . This is important.

Exporting data is much simpler than importing. Simply pick which categories you want to export. Export files are written to the FTP and saved within the administrator/components/com_googlepro/assets/export folder.

The file will be given the type of export and the date and time of the export.

The CSS (Cascading Style Sheets) tab is where you can edit the frontend design of GoogleMap Pro. Before you start editing the CSS, make sure that you know what you are doing. 

In this tab you can alter 3 files - googlepro.css, input.css and navigation.css. You can NOT edit the infowindows from the adminpanel. You will need access to FTP and edit this directly in the files.

If you need more knowledge about how to edit the GoogleMap Pro CSS, I would recommend watching the tutorial "playing around with css" (requires membership).

The configurations first tab provides you with the ability to:

Homepage(s):
This textarea contains the homepage(s) you have assigned google API key(s) for.
An example could be http://joomla.jansangill.dk.
If you need more than one homepage assigned to the system, then you need to split it up like this:
http://joomla.jansangill.dk,
http://testserver.jansangill.dk
Notice the comma after the first homepage.
IMPORTANT: Always enter the homepage with http://
IMPORTANT: This field is MANDATORY

Google API(s):
This textarea contains the Google API(s) you have registrered for on their site.
You will need to have a google account to get the API key(s). The registration only takes seconds.
An example of a Google API key could be: ABQIAAAA6Yy1Iv1fbz942ACq2NyCThS_R3J2CR7aBJhnSVeXeJaYWxqs-RQe94FvmN_tdyA3SxFJU_X-wHM_7Q
If you need more than one Google key, then do as stated above in the Homepage(s).
IMPORTANT: This field is MANDATORY

The configurations secondtab provides you with the ability to configure paypal settings, which are:

• Paypal account - Your email you use for paypal is normally the paypal account name you need to enter.
• Currency -The currency you want the users to use when uploading to the map.
• Amount - The amount it will cost per destinaion.
• Email subject - The email subject a user willr eceive when a destination is uploaded.
• Email body - The text within the email when a destination is uploaded.
• Bank text - The bank text that the user will see when viewing payments.

 

The configurations third tab provides you with information about how to use the Community Builder plugin - and how to download it. It tells you if Community Builder is installed or not.

Moreover it gives you the ability to syncronize Comminity Builder With GoogleMap Pro.

NOTE: remember that when syncronizing all CB data will be in in that category, and then imported again. Only sync if you know what you are doing.

The configurations third tab provides you with information about how to use the SOBI2 plugin - and how to download it. It tells you if SOBI2 is installed or not.

Moreover it gives you the ability to syncronize SOBI2 With GoogleMap Pro.

NOTE: remember that when syncronizing all SOBI2data will be in in that category, and then imported again. Only sync if you know what you are doing.

 

The configuration tab provides you with the ability to configure clusterer settings, which are:

• Visible Markers - Sets the maximum number of icons that will be displayed at any one time. The default is 150.
• Gridsize -Sets the size of the grid used for placing the clusters. The default value of 5 indicates that there can be 5 clusters from east to west across the map.
• Min. Markers per clusterer- Sets the minimum number of markers that can be in a cluster. The default value is 5.
• Max lines per infowindow - Sets the number of detail lines that will be displayed in the info window associated with a cluster. If you've got a small map, then you may need to reduce this to prevent the cluster info boxes being too large for your map. If there are more markers in a cluster than this value, then the info window adds a line that says '.. and XXX more'. The default value is 10.

 

The configuration tab provides you with the ability to configure the preference tab frontend settings, which are:

• Googlemap width and height -The height and width of the googlemap used in preferences. Width is first, then height. Comma seperate it.
  Example: 500,400
• Picture allowed - If enabled, the user can upload pictures.
• Disregard Joomla's message system - If this is checked the preference tab will use its own message system, instead of joomla's build in message system.
  Notice:Only check this if you have not included the message system in your template.

 

The configurations last tab provides you with the ability to:

• Set the setCenter in the backend - If you want the map to start at some point when you upload destinations, then use this field.
• The picture size - Tells you what size the picture will be rezided too. The size is indicating the width of the picture. An example: 100
• Limit description in infowindow - Set the number of charecters you want to be shown in the infowindow. This is helpfull if you have  along text that you want shown on the destination page.
  An example is: 100
• Tooltips frontend - If checked tooltips will appear onhover frontend, otherwise it will appear as aler boxes on click. (NOTE: If you are using other libraries as jquery, do not check this field.)