Zh GoogleMap ExternalPlacemarkListGroupList: Difference between revisions
| Line 82: | Line 82: | ||
[[File:ExternalPlacemarkGroupList_After.png]] | [[File:ExternalPlacemarkGroupList_After.png]] | ||
As you can see it is not hard to do, just a few tags. This example is more complicated, because I want to display it on tabs. In your case it can be just '''div''' tag for group list and '''div+ul''' tag for placemark list. | |||
In this example I added ID for all my divs for future (if you want to modify styles for it) | |||
[[File:ExternalPlacemarkGroupList_Tags.png]] | |||
Revision as of 11:44, 28 September 2017
Set external position for placemark list and group list
As you know, you can display placemark lists on different positions - before map, after map, on map.
If you display before or after map, you have divs, which position you can also control by styles.
Today I want to show how use External value for positions.
For example, you want to change built-in Panel feature position, lets do tabs below the map.
Before my changes my map is like
In my case there are two features enabled - manage placemarks by group list and placemark list.
Placemark list synchronized with active groups.
Moreover, enabled autocomplete feature for placemark list and for group list.
First of all lets change its position to External
Go to map details, open tab Placemark list. Change position.
Then open Placemark Groups and do the same (change position) for group list.
If you refresh site page with map, you'll get alerts - unable to find div section for group list and ul tag for placemark list.
If you display map by component call (ie menu item Map) then IDs for
- group list GMapsGroupDIV
- placemark list GMapsMarkerUL
For external position you have to manual create this div and/or ul tags.
As for autocomplete field for placemark list. Due to this field is not connected to placemark list ul tag, today if you enable this feature you have to create this field too. Probably, in future for external position case I will support automatic field creation.
For example, you can create Custom HTML module for it and just enter simple HTML tags.
In my case I will use map footer. There is a field in map details to write just below the map, go to Footer tab.
Now I want to use JQuery IU to create tabs.
My result code is
<script type="text/javascript" >
jQuery( function() {
jQuery( "#GMapsPanelExternal" ).tabs();
} );
</script>
<div id="GMapsPanelExternal">
<ul>
<li><a href="#GMapsPanelExternal-tabs-1">Категории</a></li>
<li><a href="#GMapsPanelExternal-tabs-2">Компаниjа</a></li>
</ul>
<div id="GMapsPanelExternal-tabs-1">
<div id="GMapsGroupDIV"> </div>
</div>
<div id="GMapsPanelExternal-tabs-2">
<div id="GMapsMarkerListExternal">
<div id="GMapsMarkerListSearchExternal">
<input id="GMapsMarkerListSearchAutocomplete" placeholder="Компаниjа" >
</div>
<div id="GMapsMarkerListMainExternal">
<ul id="GMapsMarkerUL"> </ul>
</div>
</div>
</div>
</div>
And after this steps you can see new map
As you can see it is not hard to do, just a few tags. This example is more complicated, because I want to display it on tabs. In your case it can be just div tag for group list and div+ul tag for placemark list.
In this example I added ID for all my divs for future (if you want to modify styles for it)
