Tengo un div dividido en dos partes, uno con una lista de resultados y la otra con un mapa que contiene varios marcadores (Markers) situados en dicho mapa, cada uno de esos marcadores corresponde a un resultado, esos datos los leo desde un JSON.
Ahora requiero que al hacer mouseover sobre cada resultado, se muestre en el mapa un nuevo marcador (de otro color) para conocer la ubicación de ese resultado (Inmueble) en el mapa.
Ya tengo la funcionalidad de mouseover funcionando y recibo en el script las coordenadas, lo que no sé es como hacer para mostrar el nuevo marcador.
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
center: {
lat: 6.330313,
lng: -75.557731
},
zoom: 8,
});
getLocations()
}
const getLocations = () => {
fetch('https://www.datos.gov.co/resource/g373-n3yy.json')
.then(response => response.json())
.then(locations => {
let locationsInfo = []
locations.forEach(location => {
let locationData = {
position: {
lat: location.punto.coordinates[1],
lng: location.punto.coordinates[0]
},
name: location.nombre_sede
}
locationsInfo.push(locationData)
})
dibujarMapa(locationsInfo)
})
}
const dibujarMapa = (locationsInfo) => {
map.setCenter(locationsInfo[0].position);
let markers = locationsInfo.map(place => {
return new google.maps.Marker({
position: place.position,
map: map,
title: place.name
})
})
}
ACTUALIZACIÓN
<script>
document.addEventListener('DOMContentLoaded', () => {
Livewire.hook('message.processed', (el, component) => {
let lat = @this.lat
let lng = @this.lng
const image =
"https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png";
var actualMarker = new google.maps.Marker({
position: { lat: lat, lng: lng },
icon: image,
map: map,
});
})
})
</script>