Hiding Empty Strings On Google Maps Info Window - google-maps

Question

I am using Google Maps to plot a number of pins and am having problems hiding empty strings within the info window.
All locations have a name and address but then there are 3 fields which will not necessarily all have a value.
These are:
telephone number
email address
website
var markersOnMap = [{
title: "Location One",
placeName: "Location One",
address: "Address",
telephone: "01234567890",
website: "http://somewebaddress.com",
emailaddress: "",
LatLng: [{
lat: 40.4319077,
lng: 116.5703749
}]
}];
I then put the information into a variable to output it.
var contentString = '<div id="content"><p>' + markersOnMap[i].placeName + '</p><p>' + markersOnMap[i].address + '</p><p>T: ' + markersOnMap[i].telephone + '</p><p>' + markersOnMap[i].website + '</p><p><a href=mailto:"' + markersOnMap[i].emailaddress + '>' + markersOnMap[i].emailaddress + '</a></p></div>';
In the example above, Location One, I would like to hide the email address as it does not have a value.
How do I check if the value of those strings are empty and then not output them on a per location basis.
If anyone can provide any assistance, that would be great.

Answer 1

You could use proper var and ternary operator (or if ) for check each content and set the proper html dinamic string code
aPlaceName = (markersOnMap[i].placeName !='' ? '<p>' + markersOnMap[i].placeName + '</p>' :'');
aAddress = (markersOnMap[i].address !='' ? '<p>' + markersOnMap[i].placeName + '</p>' :'');7
...
and build the contentString using the var
var contentString = '<div id="content">' + aPlaceName + aAddress..... +'</div>';

Answer 2

One option would be to build the contentString incrementally if the pieces exist:
var contentString = '<div id="content">'
if (!!markersOnMap[i].placeName)
contentString += '<p>' + markersOnMap[i].placeName + '</p>';
if (!!markersOnMap[i].address)
contentString += '<p>' + markersOnMap[i].address + '</p>';
if (!!markersOnMap[i].telephone)
contentString += '<p>T: ' + markersOnMap[i].telephone + '</p>';
if (!!markersOnMap[i].website)
contentString += '<p>' + markersOnMap[i].website + '</p>';
if (!!markersOnMap[i].emailaddress)
contentString += '<p><a href=mailto:"' + markersOnMap[i].emailaddress + '>' + markersOnMap[i].emailaddress + '</a></p>';
contentString += '</div>';
proof of concept fiddle
code snippet:
// This example displays a marker at the center of Australia.
// When the user clicks the marker, an info window opens.
var markersOnMap = [{
title: "Location One",
placeName: "Location One",
address: "Address",
telephone: "01234567890",
website: "http://somewebaddress.com",
emailaddress: "",
LatLng: [{
lat: 40.4319077,
lng: 116.5703749
}]
},
{
title: "Location Two",
placeName: "Location Two",
address: "Address2",
emailaddress: "",
LatLng: [{
lat: 40.432,
lng: 116.58
}]
}
];
function initMap() {
var uluru = {
lat: -25.363,
lng: 131.044
};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: uluru
});
var infoWindow = new google.maps.InfoWindow();
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < markersOnMap.length; i++) {
var marker = new google.maps.Marker({
position: markersOnMap[i].LatLng[0],
map: map
});
bounds.extend(marker.getPosition());
marker.addListener('click', (function(i) {
return function(evt) {
var contentString = '<div id="content">'
if (!!markersOnMap[i].placeName)
contentString += '<p>' + markersOnMap[i].placeName + '</p>';
if (!!markersOnMap[i].address)
contentString += '<p>' + markersOnMap[i].address + '</p>';
if (!!markersOnMap[i].telephone)
contentString += '<p>T: ' + markersOnMap[i].telephone + '</p>';
if (!!markersOnMap[i].website)
contentString += '<p>' + markersOnMap[i].website + '</p>';
if (!!markersOnMap[i].emailaddress)
contentString += '<p><a href=mailto:"' + markersOnMap[i].emailaddress + '>' + markersOnMap[i].emailaddress + '</a></p>';
contentString += '</div>';
infoWindow.setContent(contentString);
infoWindow.open(map, this);
}
})(i))
}
map.fitBounds(bounds);
var contentString = '<div id="content">' +
'<div id="siteNotice">' +
'</div>' +
'<h1 id="firstHeading" class="firstHeading">Uluru</h1>' +
'<div id="bodyContent">' +
'<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
'sandstone rock formation in the southern part of the ' +
'Northern Territory, central Australia. It lies 335 km (208 mi) ' +
'south west of the nearest large town, Alice Springs; 450 km ' +
'(280 mi) by road. Kata Tjuta and Uluru are the two major ' +
'features of the Uluru - Kata Tjuta National Park. Uluru is ' +
'sacred to the Pitjantjatjara and Yankunytjatjara, the ' +
'Aboriginal people of the area. It has many springs, waterholes, ' +
'rock caves and ancient paintings. Uluru is listed as a World ' +
'Heritage Site.</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>' +
'</div>' +
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: uluru,
map: map,
title: 'Uluru (Ayers Rock)'
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
}
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>