InfoWindow Undefined Google maps API - google-maps-api-3

Question

I want to get the content property of the array place of interest, so below the if marker.content is giving me undefined then I create the new google.maps.InfoWindow
Code:
var map = null;
placesOfInterest = [
{ name: 'Charme da paulista', lat: -23.562172, lng: -46.655794, content:'<h1>Charme</h1>' },
{ name: 'The Blue Pub', lat: -23.563112, lng: -46.650338, content:'<h1>The Blue Pub</h1>' },
{ name: 'Veloso', lat: -23.585107, lng: -46.635219 },
{ name: 'Let\'s Beer', lat: -23.586508, lng: -46.641739 },
{ name: 'O\'Malley\'s', lat: -23.558296, lng: -46.665923 },
{ name: 'Finnegan\'s', lat: -23.559547, lng: -46.676794 },
{ name: 'Partisans', lat: -23.561049, lng: -46.682555 },
{ name: 'Morrison', lat: -23.555106, lng: -46.690883 },
{ name: 'Cão Véio', lat: -23.558130, lng: -46.679508 },
{ name: 'Cervejaria Nacional', lat: -23.564740, lng: -46.690641 },
{ name: 'Brewdog', lat: -23.561309, lng: -46.693935 },
{ name: 'Rei das Batidas', lat: -23.570613, lng: -46.705977 }
];
const customIcon = {
path: 'M0-48c-9.8 0-17.7 7.8-17.7 17.4 0 15.5 17.7 30.6 17.7 30.6s17.7-15.4 17.7-30.6c0-9.6-7.9-17.4-17.7-17.4z',
fillColor: '#F7B217',
fillOpacity: 0.98,
scale: 0.98,
strokeColor: '#666666',
strokeWeight: 3
};
function addMarker(marker) {
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(marker.lat, marker.lng),
icon: customIcon,
title: marker.name,
});
if(marker.content){
var infoWindow = new google.maps.InfoWindow({
content:marker.content
});
marker.addListener('click',function(){
infoWindow.open(map, marker)
});
}
}
function initMap() {
var mapOptions = {
center: new google.maps.LatLng(-23.562172, -46.655794),
gestureHandling: 'greedy',
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP]
},
disableDefaultUI: true,
scaleControl: true,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.DEFAULT,
}
};
map = new google.maps.Map(document.getElementById('map'), mapOptions);
//Adicionando o primeiro marcador como exemplo
for(var i = 0;i< placesOfInterest.length;i++ ){
addMarker(placesOfInterest[i]);
}
}

Answer 1

In your addMarker function, you are overwriting the input marker data with a new google.maps.Marker object, so the marker.content property never exists.
Rename either the input argument or the internal marker variable to avoid the conflict:
function addMarker(marker) {
var gmarker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(marker.lat, marker.lng),
icon: customIcon,
title: marker.name,
});
if(marker.content){
var infoWindow = new google.maps.InfoWindow({
content:marker.content
});
gmarker.addListener('click',function(){
infoWindow.open(map, gmarker)
});
}
}
proof of concept fiddle
code snippet:
var map = null;
var placesOfInterest = [{
name: 'Charme da paulista',
lat: -23.562172,
lng: -46.655794,
content: '<h1>Charme</h1>'
}
];
const customIcon = {
path: 'M0-48c-9.8 0-17.7 7.8-17.7 17.4 0 15.5 17.7 30.6 17.7 30.6s17.7-15.4 17.7-30.6c0-9.6-7.9-17.4-17.7-17.4z',
fillColor: '#F7B217',
fillOpacity: 0.98,
scale: 0.98,
strokeColor: '#666666',
strokeWeight: 3
};
function addMarker(marker) {
var gmarker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(marker.lat, marker.lng),
icon: customIcon,
title: marker.name,
});
if (marker.content) {
var infoWindow = new google.maps.InfoWindow({
content: marker.content
});
gmarker.addListener('click', function() {
infoWindow.open(map, gmarker)
});
}
}
function initMap() {
var mapOptions = {
center: new google.maps.LatLng(-23.562172, -46.655794),
gestureHandling: 'greedy',
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP]
},
disableDefaultUI: true,
scaleControl: true,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.DEFAULT,
}
};
map = new google.maps.Map(document.getElementById('map'), mapOptions);
//Adicionando o primeiro marcador como exemplo
for (var i = 0; i < placesOfInterest.length; i++) {
addMarker(placesOfInterest[i]);
}
}
html,
body,
#map {
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>