Zh GoogleMap ExternalPlacemarkListGroupList

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">&nbsp;</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">&nbsp;</ul>
        </div>
    </div>
</div>
</div>

And after this steps you can see new map