Template:Zh GoogleMap Description Map: Difference between revisions
m (→Styles) |
|||
(14 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
== Creating Map == | == Creating Map == | ||
We turn to the | We turn to the menu "Maps". | ||
Line 25: | Line 25: | ||
|- | |- | ||
|class="zhproperty"|Longitude||class="zhdescription"|Map center Longitude | |class="zhproperty"|Longitude||class="zhdescription"|Map center Longitude | ||
|- | |||
|class="zhproperty"|Width||class="zhdescription"|Map Width,<br /> | |||
<p class="zh-text-tip">if set to 0, map will be 100% wide</p> | |||
|- | |||
|class="zhproperty"|Height||class="zhdescription"|Map Height<br /> | |||
<p class="zh-text-tip">if set to 0, map will be 100% height.<br /> | |||
You can apply [[Zh Template Map FullScreen]] to your map page to show map in full screen or for the other cases</p> | |||
|} | |} | ||
Line 44: | Line 51: | ||
|- | |- | ||
|class="zhproperty"|Disable AutoPan||class="zhdescription"|Disable AutoPan when open infowin | |class="zhproperty"|Disable AutoPan||class="zhdescription"|Disable AutoPan when open infowin | ||
|- | |- | ||
|class="zhproperty"|Map Bounds||class="zhdescription"|Map bounds to protect navigation outside map<br /> | |class="zhproperty"|Map Bounds||class="zhdescription"|Map bounds to protect navigation outside map<br /> | ||
You have to enter '''Latitude1,Longitude1;Latitude2,Longitude2'''<br /> | You have to enter '''Latitude1,Longitude1;Latitude2,Longitude2'''<br /> | ||
ie pair of coordinates separated by semicolon and in one coordinate has values separated by comma | ie pair of coordinates separated by semicolon and in one coordinate has values separated by comma<br /> | ||
The first coordinate - left bottom, the second - right top of bounds | |||
|- | |- | ||
|class="zhproperty"|Zoom||class="zhdescription"|Initial Map Zoom | |class="zhproperty"|Zoom||class="zhdescription"|Initial Map Zoom | ||
Line 125: | Line 126: | ||
If you have KML-file, you can put into accessible folder on site and fill URL in map field KML Layer. | If you have KML-file, you can put into accessible folder on site and fill URL in map field KML Layer. | ||
If you want to use more than one file, you can use " | If you want to use more than one file, you can use "feature", that '''path''' field of '''Paths''' is not required | ||
* go to '''Paths''' tab | * go to '''Paths''' tab | ||
* create path | * create path | ||
Line 275: | Line 276: | ||
* '''Category title (descending) and ordering''' | * '''Category title (descending) and ordering''' | ||
* '''User ordering index''' | * '''User ordering index''' | ||
* ''' | * '''Group title and Placemark title''' | ||
* ''' | * '''Group title (descending) and Placemark title''' | ||
* ''' | * '''Group user ordering index and Placemark title''' | ||
* ''' | * '''Group user ordering index (descending) and Placemark title''' | ||
* '''Date of creation''' | * '''Date of creation''' | ||
* '''Date of creation (descending)''' | * '''Date of creation (descending)''' | ||
Line 286: | Line 287: | ||
|class="zhproperty"|Marker Cluster Zoom Level||class="zhdescription"|Zoom Level on which Clusterer starts group markers | |class="zhproperty"|Marker Cluster Zoom Level||class="zhdescription"|Zoom Level on which Clusterer starts group markers | ||
|- | |- | ||
|class="zhproperty"|Group Placemarks in Cluster by | |class="zhproperty"|Group Placemarks in Cluster by Group Property||class="zhdescription"|Create cluster for each group (and you can override cluster icon)<br />Remember, if you use this feature (without managing markers by group list), you have to activate group in cluster (by setting Active in Group List) | ||
|- | |- | ||
|class="zhproperty"|Place overlapping placemarks on a spiral||class="zhdescription"|Enable feature to show overlapped placemarks on a spiral | |class="zhproperty"|Place overlapping placemarks on a spiral||class="zhdescription"|Enable feature to show overlapped placemarks on a spiral | ||
Line 304: | Line 305: | ||
{|class="zhpropertytable" | {|class="zhpropertytable" | ||
|- | |- | ||
|class="zhproperty"|Width||class="zhdescription"|Placemark List Width in | |class="zhproperty"|Width||class="zhdescription"|Placemark List Width in pixels<br /> | ||
<p class="zh-text-tip">If set 0 then you've got 100% width.<br /> | <p class="zh-text-tip">If set 0 then you've got 100% width.<br /> | ||
It can be useful in bottom position and 100% map width</p> | It can be useful in bottom position and 100% map width</p> | ||
|- | |- | ||
|class="zhproperty"|Height||class="zhdescription"|Placemark List Height in | |class="zhproperty"|Height||class="zhdescription"|Placemark List Height in pixels | ||
|- | |- | ||
|class="zhproperty"|Position||class="zhdescription"|Values<br /> | |class="zhproperty"|Position||class="zhdescription"|Values<br /> | ||
Line 375: | Line 376: | ||
|- | |- | ||
|class="zhproperty"|Action by Click||class="zhdescription"|Action to do when you Click on link<br /> | |class="zhproperty"|Action by Click||class="zhdescription"|Action to do when you Click on link<br /> | ||
* '''Center''' - center map placemark | * '''Center''' - center map on placemark | ||
* '''Click''' - execute click function for placemark | * '''Click''' - execute click function for placemark | ||
* '''Center, Animate''' - center map on placemark and animate placemark icon | |||
* '''Click, Animate''' - execute click function for placemark and animate placemark icon | |||
* '''Center, Animate and Click''' - center map on placemark, animate placemark icon and execute click function for placemark | |||
|- | |- | ||
|class="zhproperty"|Placemark List Content||class="zhdescription"|Text from which placemark list contains<br /> | |class="zhproperty"|Placemark List Content||class="zhdescription"|Text from which placemark list contains<br /> | ||
Line 410: | Line 415: | ||
|} | |} | ||
=== | === Groups === | ||
[[File:GM-Map-Detail-PlacemarkGroups-1.png]] | [[File:GM-Map-Detail-PlacemarkGroups-1.png]] | ||
Line 419: | Line 424: | ||
{|class="zhpropertytable" | {|class="zhpropertytable" | ||
|- | |- | ||
|class="zhproperty"| | |class="zhproperty"|Group Control||class="zhdescription"|Position and type of list of group, that would be displayed for marker management<br /> | ||
* '''No''' - there is not placemark control by group list | * '''No''' - there is not placemark control by group list | ||
* '''Left''' - List of group on the left (table style) | * '''Left''' - List of group on the left (table style) | ||
Line 427: | Line 432: | ||
* '''Group-Map''' - List of group on the top (div style) | * '''Group-Map''' - List of group on the top (div style) | ||
* '''Map-Group''' - List of group on the bottom (div style) | * '''Map-Group''' - List of group on the bottom (div style) | ||
* '''External''' - List of group in user defined position (special tag) | |||
|- | |- | ||
|class="zhproperty"| | |class="zhproperty"|Group Type||class="zhdescription"|Behavior of group list<br /> | ||
* Toggle Group | * Toggle Group | ||
* Only One Active Group | * Only One Active Group | ||
Line 443: | Line 449: | ||
* User ordering index | * User ordering index | ||
|- | |- | ||
|class="zhproperty"| | |class="zhproperty"|Group Column Width||class="zhdescription"|Column width for the left or right position of list group | ||
|- | |- | ||
|class="zhproperty"|Show | |class="zhproperty"|Show Group||class="zhdescription"|Show text, icon of group in list of group<br /> | ||
* Text | * Text | ||
* Icon | * Icon | ||
Line 456: | Line 462: | ||
* Text and Icon | * Text and Icon | ||
|- | |- | ||
|class="zhproperty"| | |class="zhproperty"|Search group field||class="zhdescription"|Display search field to find group in group list | ||
|- | |||
|class="zhproperty"|Group CSS||class="zhdescription"|Type of group decoration | |||
There are two predefined style<br /> | There are two predefined style<br /> | ||
and one (external) – for you, which you can set style in you template. | and one (external) – for you, which you can set style in you template. | ||
ID for tags depend on | ID for tags depend on Group CSS field. | ||
See details in | See details in [[Zh_GoogleMap_Description#Grouping|Placemark Grouping]] | ||
|- | |- | ||
|class="zhproperty"|Group List Title||class="zhdescription"|Group List Title | |class="zhproperty"|Group List Title||class="zhdescription"|Group List Title | ||
Line 520: | Line 528: | ||
|class="zhproperty"|Places Types||class="zhdescription"|Places types in single quotes, delimited by comma<br />for example: 'restaurant', 'store' | |class="zhproperty"|Places Types||class="zhdescription"|Places types in single quotes, delimited by comma<br />for example: 'restaurant', 'store' | ||
<br /> | <br /> | ||
[ | [https://developers.google.com/places/web-service/supported_types Google Places API: Supported Place Types] | ||
|- | |- | ||
|class="zhproperty"|Radius||class="zhdescription"|Radius from map center (in meters)<br />If you don't want to see placemark from Places API, and only use autocomplete field, then set radius = 0 <br /> | |class="zhproperty"|Radius||class="zhdescription"|Radius from map center (in meters)<br />If you don't want to see placemark from Places API, and only use autocomplete field, then set radius = 0 <br /> | ||
Line 686: | Line 694: | ||
To use Marker Manager: | To use Marker Manager: | ||
* set | * set group for your markers | ||
* set Min Zoom for Marker Manager and Max Zoom for Marker Manager for each group | * set Min Zoom for Marker Manager and Max Zoom for Marker Manager for each group | ||
* enable feature for the map | * enable feature for the map |
Latest revision as of 19:00, 5 March 2020
Creating Map
We turn to the menu "Maps".
Enter the number of maps with the correct configuration for us.
Coordinates it is convenient to choose by dragging the marker (the value is automatically substituted in the form fields ) or by clicking the mouse on the desired location.
Map properties
Title | Map title |
Description | Description |
Latitude | Map center Latitude |
Longitude | Map center Longitude |
Width | Map Width, if set to 0, map will be 100% wide |
Height | Map Height if set to 0, map will be 100% height. |
Map Details
Show Title as Placemark | Show map title as a placemark
|
Open InfoWin | Open InfoWindow for map title immediately |
Disable AutoPan | Disable AutoPan when open infowin |
Map Bounds | Map bounds to protect navigation outside map You have to enter Latitude1,Longitude1;Latitude2,Longitude2 |
Zoom | Initial Map Zoom |
Min Zoom | Min Zoom for Map |
Max Zoom | Max Zoom for Map |
Draggable | Enable/disable Map dragging |
Default Map Types | Enable/disable standard map types in map type control |
Map Type | Initial Map Type
|
Google Earth | The enabled/disabled state of the Google Earth
|
OpenStreetMap Layer | The enabled/disabled state of the OpenStreetMap Layer and ability to use Map Type Control to switch to that layer |
NZTopomaps Layer | The enabled/disabled state of the NZTopomaps Layer and ability to use Map Type Control to switch to that layer |
Allow Custom Map Types | The enabled/disabled using custom map type and ability to use Map Type Control to switch to that layers |
Custom Map Types List | List of custom map types ID for using on map, separator ; Example: 1;2;5 |
Weather Layer | Weather Layer, that would be displayed on the map |
KML Layer | URL of the KML Layer, that would be displayed on the map |
Language | Language for map objects names Example: ru-RU |
Show placemark creation information | You can show information about user and date of placemark creation
|
Category | The category that this map is assigned to |
Using Google Earth
We turn to component options.
Enter the key Google Earth API.
For you map select using Google Earth
- "Yes" - the map is displayed, but if you have not installed the plugin Google Earth Plugin, then that functionality is not available
- "Yes (Notify)" - the map is displayed, but if you have not installed the plugin Google Earth Plugin, then that functionality is not available and displays a message that there is no plugin
Using KML Layer
If you have KML-file, you can put into accessible folder on site and fill URL in map field KML Layer.
If you want to use more than one file, you can use "feature", that path field of Paths is not required
- go to Paths tab
- create path
- fill KML Layer field
And after that new layer will be displayed
Map Header
Header HTML-text | HTML text on top of the map |
Show Header Separator | Show Separator after Header HTML text |
Show Footer Separator | Show Separator before Footer HTML text |
Footer HTML-text | HTML text on bottom of the map |
Styles
You can create styled maps, ie you have ability to change color, hide POI and so on.
Styles | Styles for map Read more about styling Start Styling your Map
|
Map Controls
There are three sliders in this section
The first slider is
Map Type Control | The enabled/disabled state of the Map Type Control |
Pan Control | The enabled/disabled state of the Pan Control |
Zoom Control | The enabled/disabled state of the Zoom Control |
Scale Control | The enabled/disabled state of the Scale Control |
Overview Map Control | The enabled/disabled state of the Overview Map Control
|
Double Click Zoom | Enables/disables zoom and center on double click |
Scroll Wheel Zoom | The enabled/disabled state of the scrollwheel zooming on the map |
Rotate Control | The enabled/disabled state of the Rotate Control |
Street View Control | The enabled/disabled state of the Street View Control |
Traffic Layer | The enabled/disabled state of the Traffic Layer |
Bicycle Layer | The enabled/disabled state of the Bicycle Layer |
Home Button | The enabled/disabled feature to reset map center and/or zoom to initial value |
The second slider is
Find Control (geocoding) | The enabled/disabled state of the Find Control (by geocoding) |
Find Control width | Width of Find Control field |
Draw route from search point to place | The enabled/disabled state of the drawing route from place which is found by Find Control |
Change zoom for result | You can change zoom to show result |
Search region | Region Localization: if you wish to alter your map to serve geocoding results towards the region. The value is Unicode region subtag identifiers. Most Unicode region identifiers are identical to ISO 3166-1 codes, with some notable exceptions. E.g., US, ES. But as for example for Great Britain is GB, not UK |
The third slider is
Map Type Control | Position on a map |
Pan Control | Position on a map |
Zoom Control | Position on a map |
Scale Control | Position on a map |
Street View Control | Position on a map |
Find Control (geocoding) | Position on a map |
Geolocation Control | Position on a map |
Placemark List Button | Position on a map |
Traffic Layer Button | Position on a map |
Transit Layer Button | Position on a map |
Bicycle Layer Button | Position on a map |
Home Button | Position on a map |
Map Properties for Placemarks
Placemark ordering | Order placemarks. It is useful when you show placemark list
|
Show placemarks in cluster | Create cluster for markers |
Marker Cluster Zoom Level | Zoom Level on which Clusterer starts group markers |
Group Placemarks in Cluster by Group Property | Create cluster for each group (and you can override cluster icon) Remember, if you use this feature (without managing markers by group list), you have to activate group in cluster (by setting Active in Group List) |
Place overlapping placemarks on a spiral | Enable feature to show overlapped placemarks on a spiral |
Show placemark hover text | Enable feature to show infowin/infobubble on hover placemark
|
InfoBubble Style | If you use Open InfoBubble for Show placemark hover text feature to show hover text, than you can assign InfoBubble stype for it. |
Map Properties for Placemark List
Width | Placemark List Width in pixels If set 0 then you've got 100% width. |
Height | Placemark List Height in pixels |
Position | Values
For example, <ul id="GMapsMarkerUL" style="list-style-type: none;"></ul> |
Style | Values
|
Background Color | Background Color Example: #EAEAEA As for gradient in my example, I've got it from internet sites. When you specify background color #E6E6E6, I add into style line background: #E6E6E6 I've got this example background: #fefcea; /* For old browsers */ background: -moz-linear-gradient(top, #fefcea, #f1da36); /* Firefox 3.6+ */ /* Chrome 1-9, Safari 4-5 */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fefcea), color-stop(100%,#f1da36)); /* Chrome 10+, Safari 5.1+ */ background: -webkit-linear-gradient(top, #fefcea, #f1da36); background: -o-linear-gradient(top, #fefcea, #f1da36); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #fefcea, #f1da36); /* IE10 */ background: linear-gradient(top, #fefcea, #f1da36); /* CSS3 */ padding: 10px; border: 1px solid #333;
And after all this is mine code #E6E6E6; /* For old browsers */ background: -moz-linear-gradient(top, #E6E6E6, #AAAAAA); /* Firefox 3.6+ */ /* Chrome 1-9, Safari 4-5 */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#E6E6E6), color-stop(100%,#AAAAAA)); /* Chrome 10+, Safari 5.1+ */ background: -webkit-linear-gradient(top, #E6E6E6, #AAAAAA); background: -o-linear-gradient(top, #E6E6E6, #AAAAAA); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #E6E6E6, #AAAAAA); /* IE10 */ background: linear-gradient(top, #E6E6E6, #AAAAAA); /* CSS3 */ padding: 10px; border: 1px solid #333; I note that in IE9 there is no gradient. But it is not task to do it in my component by CSS. In any case you can do it by image and applying for class. |
Action by Click | Action to do when you Click on link
|
Placemark List Content | Text from which placemark list contains
|
Appearance | Appearance of placemark list
|
Search placemark field | Enable feature to search by autocomplete placemarks in placemark list |
Groups
Group Control | Position and type of list of group, that would be displayed for marker management
|
Group Type | Behavior of group list
|
Manage Placemarks | Enable ability to manage placemarks by Group List |
Synchronize with placemark list | Show/Hide placemarks in placemark list depends on group state |
Manage Paths | Enable ability to manage paths by Group List |
Group ordering | Group order in list
|
Group Column Width | Column width for the left or right position of list group |
Show Group | Show text, icon of group in list of group
|
Display Show All and Hide All buttons | Show buttons to show/hide all groups by one click
|
Search group field | Display search field to find group in group list |
Group CSS | Type of group decoration
There are two predefined style |
Group List Title | Group List Title |
Top Description | Description on top of the list |
Show Top-Separator | The enabled/disabled state of Separator on top of the list |
Show Bottom-Separator | The enabled/disabled state of Separator on botom of the list |
Bottom Description | Description on bottom of the list |
Route
This options for routes, which is shown for find your way to place
- by geocoding find feature (Map Find Control (geocoding) slider)
- autocomplete field (Places Library slider)
Draggable | The enabled/disabled ability route to be draggable |
Show Route Panel | Enable show route details |
Address | If you want not use map center coordinates as a destination point of your route (for example, Google not right geocoded your address), you can enter text address into this field, and it would be used for drawing route Use value from autocomplete field (copy-paste) for entering more clear address for google router |
Travel Mode: Driving | The enabled/disabled ability to be show this travel mode |
Travel Mode: Walking | The enabled/disabled ability to be show this travel mode |
Travel Mode: Bicycling | The enabled/disabled ability to be show this travel mode |
Unit System | Use this unit system option when create route
|
Avoid Highways | Use this option when create route |
Avoid Tolls | Use this option when create route |
Using Places Library
Enable using Places | The enabled/disabled state of using Places Library |
Places Types | Places types in single quotes, delimited by comma for example: 'restaurant', 'store' |
Radius | Radius from map center (in meters) If you don't want to see placemark from Places API, and only use autocomplete field, then set radius = 0 Places API show only up to 20 places! |
Show Autocomplete field | The enabled/disabled state of using Autocomplete field |
Autocomplete field width | Autocomplete field width |
Places Types for Autocomplete field | Places types for Autocomplete field like a places types field, values in single quotes with comma delimiter
|
Show direction | Show direction (by Directions API) from place, what you've found by autocomplete field (where marker is) and point on your map (which you set in map, center of map) |
Search country | Country Localization: if you wish to alter your map to serve places autocomplete field values the towards specified country. The value is ISO 3166-1 Alpha-2 country code. E.g., US, BR, AU. |
Using Panoramio Library
Advanced Options
Loading map objects dynamically | Enable feature to load placemarks by AJAX
|
Load type | Type of loading placemarks, ie load it all, or depends on some conditions
|
Buffer size for placemarks | You can load placemarks by parts |
Loading content data dynamically | Enable feature to load placemark infowin content by AJAX
Ie your page can contains placemark creation code, but all infowin/infobubble content can be loaded dynamically. |
MarkerManager | The enabled/disabled state of using Marker Manager Marker Manager displaying markers on definite zoom. |
Elevation | The enabled/disabled state of using Elevation API Show elevation at point where you click. |
Street View | Enable/disable show Street View
|
Street View Style | Style of Street View
|
Placemark Filter | Restriction displaying placemarks on some rules. |
Allow to user enter placemarks | Enable registered users to create and/or alter placemarks on map. |
Insert Allowed | User can create new placemarks |
Update Allowed | User can update existing placemarks |
Delete Allowed | User can delete existing placemarks |
New Placemark State | Placemark Status for created user placemark. |
New Contact State | Contact Status for created user contact (if enabled contact integration). |
Show Icon Type Selector for New Placemark | The enabled/disabled state of selecting Icon Type when user creates placemark. |
CSS Class | The class name for map div tag |
Additional CSS styles for loading | List of CSS style files for loading when map is loading, separated by new line or semicolon |
Additional JavaScript files for loading | List of JavaScript files for loading when map is loading, separated by new line or semicolon |
Placemark Rating | Enable Placemark rating feature.
|
Map text override | You can use this feature to override Standard text for map controls etc by using special interface in component administration area |
Geolocation
Auto Positioning | Auto Positioning when map is loading |
Geolocation Control | Show Geolocation Control |
Geolocation Button Style | Geolocation Button Style
|
Integration
Use contacts | The enabled/disabled state of using contacts You can enable using contact information and associate your placemark with contact to display contact information in placemark InfoWin. |
Contact Details | You can enter names of attributes to show. Separator is ; Acceptable values
You can enter it in any order, and by it the contact will be shown. Note: postcode and zipcode – it is the same field, but different labels will be. Check contact fields, and you'll see this pairs: City or Suburb, State or Province, Postal / ZIP Code
to show position, contact name and mobile phone |
Use users | The enabled/disabled state of using users You can enable using user information and associate your placemark with user to display user information in placemark InfoWin. |
Display
Using Marker Manager
You can use Marker Manager with restrictions:
- you can't use marker clustering - because cluster groups markers, and controls it displaying
- you can't use managing markers by group list
To use Marker Manager:
- set group for your markers
- set Min Zoom for Marker Manager and Max Zoom for Marker Manager for each group
- enable feature for the map