The following customizations allows you to publish a map of your members on your website.
To use Google Maps on your Wild Apricot site, you will need the following:
- A Google Maps API Key: These are free to obtain, all you need is a Google account, and the URL of the site you want to use the map on (your free Wild Apricot domain or your custom domain. Click here to get your free API key.
- A public-facing member directory: You need a member directory added somewhere to you site that is not in a restricted access section (though it can be a hidden page). This member directory needs to at least show a name in the first column and an address (with city) in the second column.
- The page ID of your member directory: You can find out how to get the page ID here: Identifying page id
You can insert the map on any page (including restricted access sections), though this will not work on pages like the member directory because the code contains too many characters for the description box. The code you need to insert is below (see Inserting HTML or JavaScript), you need to modify it by replace GOOGLE_API_KEY with your Google API key, next to mapParameters.site replace abc.cloverpad.org with your site url, next to mapParameters.memberDirectoryPageId replace 123456 with your member directory page ID, and next to centerViewAddress replace Ontario with the initial location you want to map to center on (city or state).
Insert the following code into your page using the HTML button ( see Inserting HTML http://help.wildapricot.com/display/DOC/Inserting+HTML+or+JavaScript )
<div style="margin-bottom: 5px; height: 25px;"><input style="font-size: 16px; vertical-align: middle;" id="addressToFind" value=""> <input style="vertical-align: middle;" onclick="showAddress(document.getElementById('addressToFind').value);" value="Find address" type="button"></div>
<div style="width: 660px; height: 650px;" id="map">Loading...</div>
<div style="width: 660px; height: 300px;" id="pano"> </div>
<script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&key=GOOGLE_API_KEY">
</script><script type="text/javascript">
var mapParameters =
{
site: 'abc.cloverpad.org',
memberDirectoryPageId: 123456,
centerViewAddress: 'Ontario',
centerViewZoom: 13,
enableStreetView: false
};
var map;
var geocoder = null;
var panoView = null;
var addressMarker = null;
var markers = [];
function getColumnValue(member, column)
{
if (!member[column] || !member[column][0] || !member[column][0].v)
{
return '';
}
return member[column][0].v;
}
function placeMarker(member)
{
var name = getColumnValue(member, 'c1');
var address = getColumnValue(member, 'c2');
if (!address)
{
return;
}
geocoder.getLatLng(
address,
function(point)
{
if (!point)
{
return;
}
else
{
var marker = new GMarker(point);
map.addOverlay(marker);
GEvent.addListener(
marker,
"click",
function()
{
marker.openInfoWindowHtml("<div style='display:block; height: 40px; width: 290px; text-align:center;'><h3>" + name + "<\/h3>" + address + "<\/div>");
if (mapParameters.enableStreetView)
{
panoView.setLocationAndPOV (point);
}
});
markers.push(marker);
}
}
);
}
function placeMarkers(json)
{
var outputHtml = [];
for (var i = 0; i < json.members[0].length; i++)
{
placeMarker(json.members[0][i]);
}
}
function memberDirectoryDataLoaded(executor)
{
var customMemberList = BonaPage.$('customMemberList');
var response = executor.get_responseData();
var regex = new RegExp("<JsonStructure>(.+)<\/JsonStructure>", "gi");
var jsonText = regex.exec(response)[1];
var json = eval("(" + jsonText + ")");
placeMarkers(json);
}
function load()
{
if (GBrowserIsCompatible())
{
map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
panoView = new GStreetviewPanorama(document.getElementById("pano"));
geocoder = new GClientGeocoder();
geocoder.getLatLng(
mapParameters.centerViewAddress,
function(point)
{
map.setCenter(point, mapParameters.centerViewZoom);
});
}
document.getElementById('addressToFind').value = mapParameters.centerViewAddress;
document.getElementById('pano').style.display = mapParameters.enableStreetView ? 'block' : 'none';
BonaPage.webRequest({
url: 'http://' + mapParameters.site + '/Content/Members/MemberDirectory/MemberDirectoryWebService.asmx/LoadMembers?memberDirectoryPageId=' + mapParameters.memberDirectoryPageId,
completedCallback: memberDirectoryDataLoaded
});
}
load();
function showAddress(address)
{
if (geocoder)
{
geocoder.getLatLng(
address,
function(point)
{
if (!point)
{
alert("Address " + address + " not found");
}
else
{
map.setCenter(point, 16);
if (addressMarker)
{
map.removeOverlay(addressMarker);
}
addressMarker = new GMarker(point);
map.addOverlay(addressMarker);
addressMarker.openInfoWindowHtml(address);
if (mapParameters.enableStreetView)
{
panoView.setLocationAndPOV (point);
}
}
}
);
}
}
</script>
Frank | User Experience Designer
Wild Apricot