MODX getResources with Google maps infowindows - google-maps

Question

I am populating a Google Map with the following code:
<script type="text/javascript">
google.maps.event.addDomListener(window, 'load', function() {
var map = new google.maps.Map(document.getElementById('gmap'), {
zoom: 8,
center: new google.maps.LatLng(51.414487, -0.207644),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infoWindow = new google.maps.InfoWindow;
var onMarkerClick = function() {
var marker = this;
var latLng = marker.getPosition();
infoWindow.setContent('<div class="map-info-window">\
<h3>WEA [[+pagetitle]]</h3>\
<p><strong>Branch contact:</strong> [[+branch-latlng]]</p>\
<p><strong>Telephone no:</strong> [[+branch-phone:htmlent]]</p>\
<p><strong>Email:</strong> [[+branch-email.htmlent]]</p>\
[[+branch-more.htmlent]]\
</div>' );
infoWindow.open(map, marker);
};
google.maps.event.addListener(map, 'click', function() {
infoWindow.close();
});
[[getResources? &debug=`0` &showHidden=`1` &parents=`[[*id]]` &depth=`4` &tpl=`newBranchMapMarkerTpl` &includeTVs=`1` &processTVs=`1` &tvPrefix=`` &limit=`0` &where=`{"template:=":9}`]]
[[getResources? &debug=`0` &showHidden=`1` &parents=`[[*id]]` &depth=`4` &tpl=`newMarkerInit` &includeTVs=`1` &processTVs=`1` &tvPrefix=`` &limit=`0` &where=`{"template:=":9}`]]
});
</script>
And the contents of the 2 getResources calls are as follows:
newBranchMapMarkerTpl:
var marker[[+id]] = new google.maps.Marker({
map: map,
position: new google.maps.LatLng([[+branch-latlng]]),
title:"[[+pagetitle]]"
});
newMarkerInit:
google.maps.event.addListener(marker[[+id]], 'click', onMarkerClick);
but it does not grab the template variables as laid out in the setContent code; this is because it is only referenced once in the map page header, and normally would need to loop through each document. I've tried to create a new infowindow within the BranchMapMarkerTpl and it works but does not close the last infowindow when another is opened.
How could this be re-factored so it would pick up the template variable values?
Thanks in advance.

Answer 1

The syntax for template variables in a Template is [[*tvname]]. Try:
infoWindow.setContent('<div class="map-info-window">\
<h3>WEA [[*pagetitle]]</h3>\
<p><strong>Branch contact:</strong> [[*branch-latlng]]</p>\
<p><strong>Telephone no:</strong> [[*branch-phone:htmlent]]</p>\
<p><strong>Email:</strong> [[*branch-email:htmlent]]</p>\
[[*branch-more:htmlent]]\
</div>' );
[[+tvname]] is correct as used within your getResources chunks, as the Template Variable values are being output to placeholders and not parsed via Template Variable tags.