With much help from chrisandy and doze, I was able to create a google map with the ability to filter the markers based on TV. Here’s how.
I had two goals in creating my googlemap.
1. Create map with multiple markers and have the ability to filter the map to see a subset of the markers
2. Use TVs to populate the marker bubble instead of the standard content field
In this application, there is a document for each business. These documents are used in various places throughout the site including several ditto calls and of course the maps. Each business/document has information about that business which may be a hotel, a restaurant and/or a venue for a show. Many of these businesses could fall into more than one category (e.g. hotel, restaurant, bar).
I wanted to create a map with markers that would show the location of all restaurants, another view that would show all hotels, etc. As you know, each Google map marker is generated from a document that contains the Lat & Long and content for the bubble.
Without a filter, duplicate documents would be required for those business/documents that fall into multiple categories.
Additionally, the bubbles on the maps must show the business logo, street address and phone #. Normally this data would be entered into the content area of a document. However, in this case, the content area is being used for other purposes throughout this site.
To avoid having to create special documents just for the map and even more documents for those that appear on more than on map, we want the map markers to pull data from TVs on each business/document and use one of those TVs to select just those documents for the particular view/map.
Start with a working googlemap with multiple markers using the GoogleMapMarker snippet.
Two changes are needed to the GoogleMapMarker snippet. One, add the filter, and two, specify the TVs that populate the bubble.
The revised snippet includes chrisandy’s code for the filter and the list of TVs used to populate the bubble instead of using the standard content field. These are relevant parts of the snippet.
// [text,number,number]
// filter stuff
$filter = (isset($filter)) ? $filter : "";
$script .= $modx->runSnippet($dittoName,array('filter' => $filter, 'depth' => $descendentDepth, 'sortBy' => $sortBy, 'sortDir' => $sortDir, 'summarize' => 'all', 'displayArchive' => '0', 'tpl' => '@CODE:var point = new GLatLng([+description+]); var marker = createMarker(point, \'[+title:slashandstrip+]\', \'[+sponsorlogo+]<h3>[+title+]</h3> [+sponsorstreetaddress+]<br />[+sponsorcitystatezip+]<br /> [+sponsortelephone+]\'); map.addOverlay(marker);', 'parents' => $startID, 'showPublishedOnly' => '0'));
The list of TVs (bold) need to be contained inside one set of ’ ’. Html tags can be included to format the output.
The complete snippet is attached below.
Of course, the document for each marker on the map must have a TV for each of the placeholders used in the snippet as well as a TV for the filter criteria. In this case, the TV sponsortype may contain any combination of values: hotel, bar, restaurant, venue, etc. The TV uses the check box widget to enable multiple choices.
A separate map is created for each filtered view which contains a googlemapmarker call that has the filter specification for that view. In the example call here, the map would show only those markers (documents) with Hotel selected in the sponsortype TV.
[[GoogleMapMarkerFilter? &apiKey=`ABQI. . . . ` &startID=`65` &filter=`sponsortype,Hotel,7` $¢erPos=`42.05474176443133, -70.18229484558105` &defaultZoom=`14` &sortBy=`menuindex` &tpl=`mapmarkerdivs` &openMouseOverMarker=`0` &openMouseOverLink=`1`]]
The number 7, after the filter criteria Hotel, is the filter mode (e.g. =,>, !=, etc.)
Mode Meaning (codes will exclude documents)
1 !=
2 ==
3 <
4 >
5 <=
6 >=
7 Text not in field value
8 Text in field value
9 case insenstive version of #7
10 case insenstive version of #8
11 checks leading character of the field
http://ditto.modxcms.com/files/snippet-ditto-php.html#filter
To make it appear as a seamless filter, I created container document with a child document for each of the individual maps. I used the firstchildredirect snippet to open the first map when you select the container document on the menu. Above each map, I put a wayfinder menu to select the desired filter view.
Here’s a working example:
http://www.terrybarthdesign.com/map-of-hotels.html
thank you for sharing! cheers, j