- Home
- OctoberCMS
- Plugins
- Google Maps Widgets
Fencus Google Maps Widgets
An simple solution to use Google Maps on the Back-end and Front-end.
Demo
Description
- It's a solution to manage Google Maps and Markers on the back-end with a Map Behavior to be used on the front-end.
- This plugin it's aimed for developers by developers.
- It aims to be as simple as possible, that's why we give you another two plugins to serve as an example of use for free: Fencus Maps and Fencus Addressbook.
- It is used by us in our own projects, so you can expect for a continued development and maintenance.
- We try to give you the best documentation that we can make, if you don't understand something on it, please contact us so we can help you and improve the documentation.
- The demo uses two plugins that depends on this one: Fencus Maps and Fencus Addressbook.
- You can use Fencus Maps and Fencus Addressbook as examples to build your own plugin, they are available in GitHub and in the October Marketplace for FREE (they depend on Fencus Google Maps Widgets, so you will need to buy Fencus Google Maps WIdgets in order to use them):
- Do you need more functionality or have any idea to make this plugin better? Contact us, we want you to be happy and to make this the definitive solution to Google Maps for Developers on October.
Consideration
- This plugin depends on Google Maps JavaScript API, for its use you need an API Key provided by Google. We are not responsable for the conditions and limitations of the service from Google, click here to know more and get a key.
Contents of this plugin
Location Selector FormWidget
Renders a map and uses a marker to indicate a given position on it, it returns the value as a google.maps.LatLngLiteral
object (in string format so you can store it in your database).
- Read the documentation for more information on how to use it.
Address Locator FormWidget
It works in conjunction with the Location Selector FormWidget. It allows you to find an address using Google Maps Geocoding Service. When an address is selected it automaticaly places the marker of the Location Selector FormWidget on it.
- Read the documentation for more information on how to use it.
Address Finder FormWidget
It allows you to find an address using the Google Maps Geocoding Service.
- Read the documentation for more information on how to use it.
Map Configurator FormWidget
Configure the options of a Google Map and shows a preview of it LIVE, it returns the value as a google.maps.MapOptions
object (in string format so you can store it in your database):
An API Loader Component
The API Loader Component loads the Javascript API from google and initilizes all the maps on a page that use the Map Behavior.
- The API also loads additional libraries if needed:
drawing
, geometry
, places
and visualization
.
- The HTML code generated if used on the front-end will detect if there is more than one map on the page and will manage the conflicts to avoid any problems, that means that you can show lots of maps on a single page without conflicts.
A Map Behavior
A behavior to implement in your components to show a Google Map.
A Geolocation Component
Sets an approximate position to the user using HTML5 Geolocation or based on the IP of the user through Google Geolocation Web Service.
The data is saved to the user's session for further use.
- Read the documentation for more information on how to use it.
Posible future developments on this plugin:
As stated before, we are users of this same plugin, in the future we will probably implement the following features to it or in a FREE Plugin compatible with this one:
- Geolocalization.
- Shapes on map.
- Markers customization:
- Custom Icons.
- Animations.
- Heatmap.
- Directions and distance matrix.
- Geocoding from latitude-longitude (marker) to formatted address.
Warnings and considerations
- For the time being the FormWidgets are incompatible to use in the same form (the only exeption being using the Address Locator + Location Selector).
- When using the Map Behavior, remember that the markers are passed to the client-side in JSON Format, if you are passing a model remember to use the
$hidden
attribute to define those fields that you don't wish to be publicly visible.