Zh GoogleMap CustomPlacemarkList

Creating custom placemark list

As you know, you can use built-in placemark lists. Lets look at it.

For example, your map looks like

Lets enable placemark list feature. Set in options for placemark list its position and appearance

Now you can see placemark list and button to show/hide it. You can configure different options for this list (show or not button, size, style, content, action on click and so on).

Now you know how you can access to your placemarks outside component. This feature is only in component call, and in nearest future it will be only there, because in other case there is too hard to manage it for different maps on one page.

It is built-in placemark list, you can click on it to show placemark or it's infowin.

There is one flexible feature in component for creating your own placemark list. For example, you don't want to use predefined styles or positions.

Lets create custom placemark list. You need a little HTML skills.

This feature is exists only when you display map by component call (menu item type Map)

Select your map to display. On the bottom of properties you can see radion button

If you set it to Yes, in page body will be the function to access to placemark

function PlacemarkByIDShow(p_id, p_action, p_zoom) {

That function can get three parameters

• p_id - placemark ID
• p_action - action, which you can execute on clicking (center and/or click)
• p_zoom - you can override new zoom value

Lets disable our default placemark list (set position to No). In this case placemark list will not appear, and there is no button to show it.

Now you can do your own placemark list. You can create your own Custom HTML module, or you can use Header or Footer HTML fields to create placemark list.

I will use Header field to create link to my placemark with ID=81.

Enter simple a-tag into Header HTML-text

<p><a href="#" onclick="PlacemarkByIDShow(81, 'center', ''); return false;">Show me Jeep</a></p>

Now above the map we can see link

If you click on it, the map center will be changed to Jeep placemark

Now lets add click action to execute Action by click option of this placemark. For this placemark this option is Open InfoWin

Change text to

<p><a href="#" onclick="PlacemarkByIDShow(81, 'click,center', ''); return false;">Show me Jeep</a></p>

I don't know why, if you enter center action first, ie center,click Google's script hangs, probably, it tries to do some calculation to pan. Probably it will be fixed in future API versions ;)

Result

And the last parameter - change zoom. Lets do center on placemark and set zoom to 16.

<p><a href="#" onclick="PlacemarkByIDShow(81, 'center', 16); return false;">Show me Jeep</a></p>

Result

Now you know how you can access to your placemarks outside component. This feature is only in component call, and in nearest future it will be only there, because in other case there is too hard to manage it for different maps on one page.

You can create any HTML formatted placemark list for your map.