The outdooractive API ClusterLayer, FilterClusterLayer and GeomLayer offer a comfortable way to implement custom infowindows. You just have to implement a callback function that has access to the data of the OOI which was clicked.
oax.api.maps( initOAX );
function initOAX(oamaps, gm) {
var content = [
// some tours
'1397449', '5345254',
// some pois
'1303417', '1336336', '1324291'
];
var layerConfig = {
// all marker have a click event
markersActive : true,
// show tour geometry on marker mouse over
mouseoverTourGeom : true,
// center and pan map to fit to the bounds of all objects (including tour start points)
fitPoiBounds : true,
// don't use default info windows
defaultIW : false,
// use custom infowindows instead
customIW : {
// some HTML that is shown while loading
loadingHTML : "Loading ... ",
// function called as soon as a marker is clicked
// returns info window html content
// the object ooi holds all information like ooi title, descriptions and images
render : function ( ooi ) {
return "<b>" + ooi.title + "</b>";
}
}
};
// initialize GeomLayer
layer = new oamaps.GeomLayer( content, layerConfig );
layer.whenLoaded( initMap );
function initMap() {
var mapDiv = document.getElementById( "map_canvas" );
var mapTypeIds = ['oa_map', 'oa_hybrid', gm.MapTypeId.SATELLITE, 'oa_map_winter', gm.MapTypeId.TERRAIN];
var mapConfig = {
center : new gm.LatLng( 47.54687, 10.2928 ),
zoom : 10,
mapTypeId : mapTypeIds[ 0 ],
mapTypeControlOptions : { mapTypeIds: mapTypeIds }
};
var map = oamaps.map( mapDiv, mapConfig );
// add GeomLayer to map
layer.setMap( map );
}
}