I want to visualize the map of an italian region using three markers that on mouse over should show the name of the city. This is my Javascript code:
function initMap() {
var options = {
center: {lat: 46.279, lng: 13.1368},
zoom: 10
}
map = new google.maps.Map(document.getElementById('map'), options);
function addMarker(property) {
let marker = new google.maps.Marker({
position: property.location,
map: map
});
if(property.content) {
detailWindow = new google.maps.InfoWindow({
content: property.content
});
}
marker.addListener("mouseover", () =>{
detailWindow.open(map, marker);
})
}
addMarker({location: {lat: 46.21251, lng: 13.21514}, content: '<h2>Tarcento</h2>'});
addMarker({location: {lat: 46.4079, lng: 13.3088}, content: '<h2>Chiusaforte</h2>'});
addMarker({location: {lat: 46.15714, lng: 13.00726}, content: '<h2>San Daniele</h2>'});
}
As you can see, I created three markers by calling the function addMarker
located inside the parent function initMap
. Everything works fine except for the message that appears when I put the mouse over a marker. In fact in every marker on mouse over appears the text "San Daniele" even when should appear another name city.
Can help?