thelia / thelia-googlemap-module
Installs: 319
Dependents: 0
Suggesters: 0
Security: 0
Stars: 0
Watchers: 9
Forks: 1
Open Issues: 0
Language:JavaScript
Type:thelia-module
Requires
- thelia/installer: ~1.1
README
author : Penalver Antony apenalver@openstudio.fr
This module allow to integrate a google map with somes options.
1. Installation
Manually
- Copy the module into
<thelia_root>/local/modules/
directory and be sure that the name of the module is TheliaGoogleMap. - Activate it in your thelia administration panel
Warning : You need to configure your google api keys for google maps in configuration form before to use it.
To get api key follow these instructions : https://developers.google.com/maps/documentation/javascript/tutorial
Composer
Add it in your main thelia composer.json file
composer require thelia/thelia-googlemap-module:~1.0
2. Usage
Use smarty function to integrate it in you template : {google_map id="YOUR_ID"}{/google_map}
Somes options are availables:
Deprecated options in favor of cluster-options-callback
(since version 1.7) :
3. Marker Source
To use marker source you need to respect a format.
Json format :
{ title : "TITLE MARKER", loc : [ "LATITUDE" ,"LONGITUDE" ], description : "DESCRIPTION", info : "SOME INFORMATIONS, link : "URL TO BIND BUTTON", link-label : "LABEL FOR BUTTOM" }
4. Templating
Template list
Some template are integrate by default :
Create your own template
-
- Create a js file
-
- Get theliaGoogleMapTemplate variable
-
- Insert your template like this:
"red": {
"featureOpts": [
{
stylers: [
{hue: '#890000'},
{visibility: 'simplified'},
{gamma: 0.5},
{weight: 0.5}
]
},
{
elementType: 'labels',
stylers: [
{visibility: 'off'}
]
},
{
featureType: 'water',
stylers: [
{color: '#890000'}
]
}
],
"styledMapOptions": {
name: "Red Template"
}
},
-
- Insert your js file in
main.after-javascript-include
hook
- Insert your js file in
5. Info Window
To customise info window you have to modify following css classes :
- thelia-google-map-info-window
- thelia-google-map-info
- thelia-google-map-title
- thelia-google-map-descp
- thelia-google-map-link
6. Options
6.1 Insert Google map js
You can limitate Google Map API include to a particular Hook in module configuration. You just have to toggle configuration key and Google Map include script change binding from "main.after-javascript-include" to "theliagooglemap.front.insertjs". To insert the script in one page add the hook before main include javascript.`
Hook to add :
{hook name="theliagooglemap.front.insertjs" modulecode="TheliaGoogleMap"}
6.2 Example for geocoder-error-callback
{google_map id="test-address" zoom=17 address="sdklgjodfh" geocoder-error-callback="callBackGeo"} <script> function callBackGeo(status){ alert(status); } </script>
6.3 Example for cluster-options-callback
To use custom cluster options, you have to use the cluster-options-callback
like this :
{google_map id="test-address" zoom=14 address="sdklgjodfh" cluster="1" cluster-options-callback="clusterOptions"} <script> function clusterOptions(status){ var clusterOptions = { gridSize: 60, styles: [ { url: "http:///mysite.com/frontOffice/default/assets/img/cluster-1.png", height: 46, width: 36, anchor: [10, 0], textColor: '#ffffff', textSize: 11 }, { url: 'http://mysite.com/frontOffice/default/assets/img/cluster2.png', height: 46, width: 36, anchor: [0, 0], textColor: '#ff0000', textSize: 15 } ] }; return clusterOptions; } </script>