POI Auto Map

From Joomseller Wiki
Jump to: navigation, search

Contents

Introduction

Purpose

This document supports Joomseller’s customers in using POI Auto Map Component.

Scope

Definitions, Abbreviations and Acronyms

No.

Name

Description

1

Joomla

The most popular Open Source Content Management System, written by PHP.

2

Joomseller

Joomseller Solutions is a team of smart, experienced and professional Joomla!® / PHP developers. Started 5 years ago, JoomSeller has been provided high quality extensions and become a trusted Joomla extension provider.

3

Component

A component is a kind of Joomla! extensions. Components are the main functional units of Joomla!; they can be seen as mini-applications.

4

Module

A type of Joomla’s extension. Modules are lightweight and flexible extensions used for page rendering.

5

POI Auto Map

A product of Joomseller Solutions for Point Of Interest (JS - POI).

6

Center Point

The center of the Map, the location of this point will decided the location of the Map.

7

Map Type

There’re two type of Map: Roadmap and Satellite.

8

Map Type Control

The Map Type selection on the Map, it lets the user toggle between map types (Roadmap and Satellite). You can choose to Show/Hide Map Type Control on map.-

9

Zoom

Map zoom size

10

Zoom Control

Zoom control is the controlling of zoom on the map. It’s display as a slider with (+) and (-) sign. You can choose to Show/Hide Zoom Control on map.

11

Street View Control

A Pegman icon which can be dragged to the map to enable Street View. You can choose to Show/Hide Street View Control on map.

12

Search Control

The search box on the map to find location.

13

Introduction Maps

Introductions Maps is the text display at the bottom of the map when show the first time.

14

User’s Location

User’s Location is the location of Browser, it can’t be.

15

Default Address

Default address is the default value for Center Point

16

Marker

The point displayed on the maps to show locations.

17

(Marker) Icon

Icon to display on the map.

18

Info Window

The popup displayed when you click on the Icon of Marker.

Overview

What is POI Auto Map?

POI Auto Map (POI: Point of Interest) is a Joomla extension using the power of Google Maps to give you a simple solution in adding your favorite places to your website such as restaurant, grocery stores, banks, coffee shop, etc. The locations and maps are very associated together.

With POI Auto Map, all you need to do is give it an address, define a category then POI Auto Map will do the rest. It will connect to database and display the desired places on your site. Plus, you can also store any individual category with markers in your database. Each marker is a location/address you enter in the map. A marker contains your preferred location’s information (title, image and content) in a pop-up window. Especially, you can freely define icon for your marker groups or each POI.

POI Auto Map is totally a lightweight and simple solution for your website’s map needs. Not mention that it’s easy to use for both admin and user, and also has good styled jQuery. This map is the best choice for website working on local-based services, mobile directory, realty agency, photo gallery, etc.

Why using POI Auto Map?

Features:

  • Compatibility with Joomla 2.5 and 3.x.
  • Responsive with beautiful design.
  • Compatible with Tablet, Smart phone.
  • Support Geolocation: automatically recognize location of user.
  • Support all modern browsers (IE 7+, FireFox, Chrome, Opera, Safari…).
  • Allow unlimited Points (locations) with category.
  • Easily customizable Marker: Title, Icon, description.
  • Assign custom marker icon to each group or each individual point.
  • Support Street Directions with printable version.
  • Flexible Configuration: The configuration is very easy and simple.
  • Support jQuery with noConflict.



Screenshot

  • Backend:
    • Configure option:
      • General


Com js poi configure general.png
      • Map


Com js poi configure map.png
      • Default Address


Com js poi configure default address.png
    • Menu:
      • Map Options


Com js poi menu map.png

      • Center Point Interest:


Com js poi menu center address.png
  • Module:
    • Details


Mod js poi details.png

    • Option


***Mod js poi option.png
      • Center point Interest


***Mod js poi center.png
  • Frontend:
    • Menu:


Screentshot menu frontend.png
    • Module:


Screentshot module frontend.png

CONFIGURATION

POI Auto Map Installation

Requirements

Server Requirements

POI Auto Map has several system requirements as follow:

You have to ensure that your system has already installed, XML and Zlib-Support built into your PHP.

PHP should be compiled with support for https (openSSL) and cURL.

PHP Safe Mode should be turned off.

Client Requirements

POI Auto Map can run well on major browsers such as: Internet Explorer (version 7+), Firefox, Chrome, Opera 9+, and Safari. JavaScript must be activated.

The client/browser needs to be capable of accepting Cookies and Cookies must be enabled.

Installation

Download

JS POI PicDownload.png

After purchased our product, you’ll see the download link at POI Auto Map product page: http://joomseller.com/joomla-components/poi-auto-map.html

Please download the product package: “POI Auto Map” as well as the “GeoIP Libraries”.

Note: If there is any problem, please contact us via E-mail: contact@joomseller.com.

Package Preparation

Unpack POI Auto Map installation package that you downloaded to your computer. package pkg_js_poi x.x.x.zip

POI Auto Map component Installation

Go to Administrator site => “Extension” => “Extension Manager” in the Top Menu.

In “Upload Package File” block, please Upload & Install our extensions:

Js poi Install ext.png

Configure Backend base information

Configure Option

Common configure options for Menu Item Types is POI Auto Map.

To configure option, go to Components => POI Auto Map => Options

Com js poi configure map.png


  • Map Type => Select the between map types (Roadmap and satellite).
  • Map Type Control => Show / hide Map type - lets the user toggle between map types (Roadmap and Satellite).
  • Max Width => Enter the maximum width of map in pixel
  • Height => Enter the height of map in pixel
  • Zoom => Map zoom size
  • Zoom Control => Show / hide zoom control – displays a slider or ‘ + or - ’ buttons to control the zoom level of the map.
  • Street View Control => Enable / disable Street View - display a Pegman icon which can be dragged to the map to enable Street View.
  • Search Control => Enable / Disable display the search box on the map.
  • Use Introductions Maps => Introductions Maps content to be displayed in Main Marker popup.

Configure Categories

Categories are subjects that maps will be used to displaying markers of this POI category. Categories can be managed a group of markers.

To configure Categories, go to Components => POI Auto Map => POI Categories

  • Main View
Js poi configure categories.png


  • New/Edit View
Js poi configure new edit cat.png

Main information:

  • Title => The title of category.
  • Menu Icon => Icon of this POI category.
  • Default Map Icon => Default icon for all markers of this category to display in your map. Default is a blank icon, it’ll use Menu icon.
  • Description => Short description to show as tooltip for this POI category.

Tips and Warning

Tips:

  • You must create categories before creating markers.

Configure Markers

You can add a group of markers as many child li’s as you wish to have categories.

To configure Withdraw Types, go to Component => POI Auto Map => POI Markers

  • Main View
Js poi configure markers.png


Tips: Only add markers to the database that are on the current map area are loaded - better speed.



  • New/Edit View
Js poi configure new edit marker.png

Main information:

  • Marker Address => Address for marker.
  • Marker Icon => Marker’s icon to display in your map, if you leave it blank, it’ll use POI category’s icon.
  • Title => Title of this marker.
  • Url => External URL of this marker.
  • Category => Category of this marker.
  • Info window => Information to be displayed when click on this maker.


Tips and Warning

Tips:

  • You must enter the correct address for marker. To check, you should be watch on the map below.

Configure Frontend view

Manage menus

Go to “Menu” => “Main Menu”

Js poi configure menu.png


Add new menu item => Select Menu Item Type => choose exist menu link of Point Of Interest (POI) Auto Map

Js poi configure add new menu.png

Tips:

  • When you configure menu options, you will see many options “Use Global”. The default global values are set by going to Components => Point Of Interest ( POI Auto Map => Configuration => Options => tab Display or view the guide at

2.2.2.1.Configure Options.

Map option

Common configure options for map.

Options:

Js poi configure menu map option.png


  • Map Type => Select the between map types (Roadmap and satellite).
  • Map Type Control => Show / hide Map type - lets the user toggle between map types (Roadmap and Satellite).
  • Max Width => Enter the maximum width of map in pixel
  • Height => Enter the height of map in pixel
  • Zoom => Map zoom size
  • Zoom Control => Show / hide zoom control – displays a slider or ‘ + or - ’ buttons to control the zoom level of the map.
  • Street View Control => Enable / disable Street View - display a Pegman icon which can be dragged to the map to enable Street View.
  • Search Control => Enable / Disable display the search box on the map.
  • Use Introductions Maps => Introductions Maps content to be displayed in Main Marker popup.



Center point of interest

Configure for Center point of interest. The location which will be displayed default on your map.

Options:

Js poi configure menu center.png
  • Use User’s Location => If enable, we'll use User's location for Center Point to display Map.
  • Title => Title for info window.
  • Icon => Assign custom icon to Center point of interest.
  • Show Info Onload => Choose to Show or Not info window after loading map.
  • Info Window => Center point of interest contains your own title and content for the popup info window.

Manage modules

We provide you module displaying map in your site as you wish.

Go to Extensions => Module Manager

Js poi configure module manager.png

Module has special Options (we will describe for later), you should notice to the Details and Menu Assignment:

Details

Mod js poi details.png
  • Title => title of module (title will make the module more clearly and friendly with users)
  • Show Title => you can show or hide the title
  • Position => choose a position in template to store the module

Menu Assignment

  • choose which type of pages to display the module.
Js poi configure module menu assignment.png

Options

Map Options

Mod js poi option.png


  • Map Type => Select the between map types (Roadmap and satellite).
  • Map Type Control => Show / hide Map type - lets the user toggle between map types (Roadmap and Satellite).
  • Max Width => Enter the maximum width of map in pixel.
  • Height => Enter the height of map in pixel.
  • Zoom => Map zoom size
  • Zoom Control => Show / hide zoom control – displays a slider or ‘+ or -’ buttons to control the zoom level of the map.
  • Street View Control => Enable / disable Street View - display a Pegman icon which can be dragged to the map to enable Street View.
  • Search Control => Enable / Disable display the search box on the map.
  • Category List => Select categories want to show
  • Use Introductions Maps => Introductions Maps content to be displayed in Main Marker popup



Center Point Of Interest


Mod js poi center.png

  • Use User’s Location => If enable, we'll use User's location for Center Point to display Map.
  • Default Address => Default address for center point.
  • Title => Title for info window.
  • Url => External URL for Center Point.
  • Icon => Select icon for Center Point. Leave it blank to use default icon.
  • Show Info Onload => Choose to Show or Not info window after loading map.
  • Info Window => Content for the popup info window.



Advanced Options


Js poi configure module advanced.png

  • Enable JQuery => On/Off jQuery loader. Turn it off if your sites already have jQuery loaded.
  • Enable noConflict => On/Off noConflict. Turn it on to prevent conflict with Joomla’s Mootools.

User manual

Backend manual

Configure Components

Configure Options

Please view in 2.2.2.1.Configure Options.

Configure Default Address

Js poi configuration default address.png


  • Use User’s Location =>If enable, we’ll use User’s location for center point to display Map.
  • Default Address =>Enter a default address you want to display map.
  • Title => Title of center point.
  • Url => External URl of center point
  • Icon => Select an icon for center point. Leave it blank to use default default icon.
  • Show Info Onload => Choose to Show or Not Info window after loading map.
  • Info Window => Additional information for center point. You can use HTML to display information.

Configure Categories

Please view in 2.2.2.2.Configure Categories.

Main View

Js poi configuration com categories.png


New/Edit View

Js poi configuration com new edit cat.png


  • Title => Title of POI Category
  • Menu Icon => Icon for this POI Category
  • Default Map Icon => Default map icon for all markers of this POI Category to display in your map. Default is a blank icon. It’ll use Menu’s icon.
  • Description => Short description to show as Tooltip for this POI Category.

Configure Markers

Please view in 2.2.2.3.Configure Markers.

Main View

Js poi configuration com markers.png



New/Edit View

Js poi configuration com new edit marker.png


  • Marker Address => Address for marker.
  • Marker Icon => Marker’s icon to display in your map, if you leave it blank, it’ll use POI category’s icon.
  • Title => Title of this marker.
  • Url => External URL of this marker.
  • Category => Category of this marker.
  • Info window => Information to be displayed when click on this maker. You also can use the tag HTML to display information.
  • Note:

You must enter the correct address for marker. To check, you should be watch on the map below.

Configure Menu

Main View

To add a new menu, please view in 2.3.3.1.Manage menus.


Js poi configuration menu.png

Edit Menu Item

Details

Js poi configuration menu details.png
  • Menu Item Type => You must choose exist menu link of Point Of Interest (POI) Auto Map
  • Menu Title => Title of this Menu will be displaying in your website.


Advanced Options

When you configure menu options, you will see many options “Use Global”. The default global values are set by going to Components => Point Of Interest (POI Auto Map => Configuration => Options => tab Display or view the guide at 2.2.2.1.Configure Options.


  • Map Options
Js poi configuration menu map option.png
  • Map Type => Select the between map types (Roadmap and satellite).
  • Map Type Control => Show / hide Map type - lets the user toggle between map types (Roadmap and Satellite).
  • Max Width => Enter the maximum width of map in pixel
  • Height => Enter the height of map in pixel
  • Zoom => Map zoom size
  • Zoom Control => Show / hide zoom control – displays a slider or ‘ + or - ’ buttons to control the zoom level of the map.
  • Street View Control => Enable / disable Street View - display a Pegman icon which can be dragged to the map to enable Street View.
  • Search Control => Enable / Disable display the search box on the map.
  • Use Introductions Maps => Introductions Maps content to be displayed in Main Marker popup.

Center Point Of Interest

Js poi configuration menu center.png


  • Use User’s Location => You can enter the default address if it’s disable.
  • Default Address => Default address for Center Point.
  • Title => Title of Center Point
  • Icon => Assign custom icon to Center point of interest.
  • Show Info Onload => Choose to Show or Not info window after loading map.
  • InfoWindow => Center point of interest contains your own title and content for the popup info window. You can also use HTML to display information.

Configure Module

Please view in 2.3.3.2 Manage Modules

Details

Mod js poi details.png
  • Title => title of module (title will make the module more clearly and friendly with users)
  • Show Title => you can show or hide the title
  • Position => choose a position in template to store the module

Options

Map Options

Mod js poi option.png


  • Map Type => Select the map types Roadmap (Default).
  • Map Type Control => Show Map type control - lets the user toggle between map types (Roadmap and Satellite).
  • Max Width => auto or you can enter the width if you wish.
  • Height => 500 (pixel)
  • Zoom => 13 (Level)
  • Zoom Control => Show zoom control – displays a slider or ‘ + or - ’ buttons to control the zoom level of the map.
  • Street View Control => Enable Street View - display a Pegman icon which can be dragged to the map to enable Street View.
  • Search Control => Enable display the search box on the map.
  • Category List => Select categories want to show (All categories)
  • Use Introductions Maps => Introductions Maps content to be displayed in Main Marker popup. If enable, you can enter the title and content for introductions.



Center Point Of Interest


Mod js poi center.png

  • Use User’s Location => You can enter the default address if it’s disable.
  • Default Address => Default address for center point (Default in New York).
  • Title => Title for info window.
  • Url => Link for title info window.
  • Icon => Select icon for Center Point. Leave it blank to use default icon.
  • Show Info Onload => Choose to Show or Not info window after loading map.
  • InfoWindow => Center point of interest contains your own title and content for the popup info window. You can also use HTML to display information.

Advanced Options

Mod js poi advanced.png

  • Enable JQuery => On/Off jQuery loader. Turn it off if your site already have jQuery loaded.
  • Enable noConflict => On/Off noConflict. Turn it on to prevent conflict with Joomla’s Mootools.


Tips:

  • With InfoWindow, you can use HTML tag to display information and insert image URL, embed video (for example, video from Youtube)...by using editor type which allows HTML tag (i.e JCKEditor 6.2), or by configuring Default Editor: Editor-none.

Frontend manual

The same interface for both of Menu and Module.

Main View

Js poi frontend manual default2.png

Show info window

Js poi frontend manual showInfoWindow.JPG

Show an marker

Js poi frontend manual marker opened2.png

When User toggle on/off Category

User toggle on all Category

Js poi frontend manual userToggleOnCategory.png

After User toggle off Category

Js poi frontend manual userToggleOffCategory.png

Street view an marker

Select “Street View” in info window of an marker

Js poi frontend manual SlectStreetView2.png

Street view an marker

Js poi frontend manual StreetView.png

Direction mode selection

Select “Direction mode”

Js poi frontend manual Select DirectionMode.png

View Direction mode

Js poi frontend manual viewPrintableDirection2.png


Js poi frontend manual viewDirection2.png

And User printable Street directions

Js poi frontend manual printableDirections 2.png
Personal tools
Namespaces

Variants
Actions
Navigation
Other Extensions
JoomSeller
Toolbox