I have successfully integrated multiple markers on a Google Map. Now, I am looking to add specific content for each marker. While coding everything in strings works fine, I encountered an issue when trying to load React elements inside those strings.
For this project, we are utilizing IconUiKit to showcase icons. The objective is to include a pin icon within the info window.
I came across a similar question to mine here => How to use a react component for showing Google Maps InfoWindow. However, I faced an error indicating that ReactDOMServer could not be found while using ReactDOMServer.renderToString().
private setMarkers(map: any): any {
const {stores} = this.state;
const infowindow = new google.maps.InfoWindow({
maxWidth: 400
});
for (let i = 0; i < stores.length; i++) {
if (google.maps.GeocoderStatus.OK === 'OK' && stores[i].store.address &&
(Number(stores[i].store.address.latitude) !== undefined) &&
Number(stores[i].store.address.longitude)) {
let lat = stores[i].store.address.latitude !== undefined ? stores[i].store.address.latitude : 0;
let lng = stores[i].store.address.longitude !== undefined ? stores[i].store.address.longitude : 0;
let pos = lat && lng ? new google.maps.LatLng(lat, lng) : {lat: 0, lng: 0};
let marker = new google.maps.Marker({
map: map,
position: pos
});
let projectInfo = [] as string[];
stores[i].projects.forEach(project => {
projectInfo.push(
`<p><b>${project.projectNo}</b></p>` +
'<p>Attribution: Uluru,' +
'<a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">' +
'https://en.wikipedia.org/w/index.php?title=Uluru' +
'</a>' +
'(last visited June 22, 2009).</p>' +
'<a class="uk-button uk-button-grey uk-button-register uk-width-1-1 uk-text-uppercase" href="/">' +
'<span>' +
'Project Details' +
'</span>' +
'</a>'
);
});
let icon = <IconUikit icon="gear" wrap={true}/>;
console.log(icon.toString());
let contentString =
'<div class="maps-tooltip">' +
'<div class="uk-grid">' +
'<div class="uk-width-1-4">' +
`<img src="${stores[i].store.imageUrl}" class="uk-width-1-1"/>` +
'</div>' +
'<div class="uk-width-3-4">' +
`<p><b class="fr-color-black">${stores[i].store.address.name1}</b></p>` +
/// REPLACE WITH YOUR COMPONENT HERE
ReactDOMServer.renderToString(<IconUikit icon="gear" wrap={true}/>) +
'</div>' +
'<div class="uk-width-1-1">' +
`${projectInfo.toString()}` +
'</div>' +
'</div>' +
'</div>';
google.maps.event.addListener(marker, 'click', function() {
infowindow.setOptions({
content: contentString,
});
infowindow.open(map, marker);
});
}
}
}