I have some troubles with displaying info windows for a marker on the map. I have a json file and markers are return well. But when I click the marker, info window not display.
Below I paste all my code. I feel so confused, because I tried different answers and nothing works fine, I spend few days to fix that and I need some help.
In my code I add console.log to test data and it looks good in console. I will be grateful for every advice.
<script>
var infowindow = null;
function initMap() {
var map = new google.maps.Map(document.getElementById('mapGoogle'), {
zoom: 14,
scrollwheel: true,
center: {lat: 51.500407513572796, lng: -0.129061164107939},
disableDefaultUI: true,
gestureHandling: 'greedy',
styles: [
{
"featureType": "water",
"elementType": "geometry",
"stylers": [
{
"color": "#e9e9e9"
},
{
"lightness": 17
}
]
},
{
"featureType": "landscape",
"elementType": "geometry",
"stylers": [
{
"color": "#f5f5f5"
},
{
"lightness": 20
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#ffffff"
},
{
"lightness": 17
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#ffffff"
},
{
"lightness": 29
},
{
"weight": 0.2
}
]
},
{
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [
{
"color": "#ffffff"
},
{
"lightness": 18
}
]
},
{
"featureType": "road.local",
"elementType": "geometry",
"stylers": [
{
"color": "#ffffff"
},
{
"lightness": 16
}
]
},
{
"featureType": "poi",
"elementType": "geometry",
"stylers": [
{
"color": "#f5f5f5"
},
{
"lightness": 21
}
]
},
{
"featureType": "poi.park",
"elementType": "geometry",
"stylers": [
{
"color": "#dedede"
},
{
"lightness": 21
}
]
},
{
"elementType": "labels.text.stroke",
"stylers": [
{
"visibility": "on"
},
{
"color": "#ffffff"
},
{
"lightness": 16
}
]
},
{
"elementType": "labels.text.fill",
"stylers": [
{
"saturation": 36
},
{
"color": "#333333"
},
{
"lightness": 40
}
]
},
{
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "transit",
"elementType": "geometry",
"stylers": [
{
"color": "#f2f2f2"
},
{
"lightness": 19
}
]
},
{
"featureType": "administrative",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#fefefe"
},
{
"lightness": 20
}
]
},
{
"featureType": "administrative",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#fefefe"
},
{
"lightness": 17
},
{
"weight": 1.2
}
]
}
]
});
infoWindow = new google.maps.InfoWindow();
// Try HTML5 geolocation.
/*if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
map.setCenter(pos);
}, function() {
handleLocationError(true, infoWindow, map.getCenter());
});
} else {
// Browser doesn't support Geolocation
handleLocationError(false, infoWindow, map.getCenter());
}*/
var clusterStyles = [
{
textColor: 'white',
url: 'https://regain-app.com/wp-content/uploads/2018/01/m3.png',
height: 30,
width: 30
},
{
textColor: 'white',
url: 'https://regain-app.com/wp-content/uploads/2018/01/m2.png',
height: 30,
width: 30
},
{
textColor: 'white',
url: 'https://regain-app.com/wp-content/uploads/2018/01/m1.png',
height: 30,
width: 30
}
];
var mcOptions = {
gridSize: 50,
styles: clusterStyles,
maxZoom: 15
};
// Create an array of alphabetical characters used to label the markers.
var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
var icon = {
url: "https://regain-app.com/wp-content/uploads/2018/01/marker.png",
scaledSize: new google.maps.Size(14, 14)
};
// Add some markers to the map.
// Note: The code uses the JavaScript Array.prototype.map() method to
// create an array of markers based on a given "locations" array.
// The map() method here has nothing to do with the Google Maps API.
var InfoWindowwindow = new google.maps.InfoWindow({
content: 'test'
});
var temp = 0;
var markers = locations.map(function(location, i) {
let marker = new google.maps.Marker({
position: location,
label: location.label,
icon: icon
});
let infowindow = new google.maps.InfoWindow({
content: "sssssss"
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
console.log(temp);
console.log(infowindow);
console.log(marker);
return marker;
});
// Add a marker clusterer to manage the markers.
var markerCluster = new MarkerClusterer(map, markers, mcOptions);
function handleLocationError(browserHasGeolocation, infoWindow, pos) {
infoWindow.setPosition(pos);
infoWindow.setContent(browserHasGeolocation ?
'Error: The Geolocation service failed.' :
'Error: Your browser doesn\'t support geolocation.');
infoWindow.open(map);
}
}/*end of InitMap*/
var locations = [];
var points;
var url = '/api/points.json';
var loadData = jQuery.getJSON(url, function(json) {
jQuery.each( json.results, function( key, val ) {
// console.log(val.lat);
// console.log(val.lng);
locations.push({
lat: Number(val.lat),
lng: Number(val.lng),
label: "lorem ipsum"
});
});
});
loadData.complete(function(){
initMap();
});
</script>
