Who can help me out with the Google maps API? I have an issue with my HTML marker and hope somebody can help me a little.
below my code:
<script type="text/javascript">
let map;
async function initMap() {
//LOCATION MEERSSEN
const position = { lat: 50.87858581542969, lng: 5.744121551513672 };
//Request needed libraries.
//@ts-ignore
const { Map } = await google.maps.importLibrary("maps");
const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker");
//The map
map = new Map(document.getElementById("map"), {
zoom: 11,
center:position,
mapId:"59b893a648954891",
mapTypeControl:false,
scaleControl:false,
streetViewControl:false,
rotateControl:false,
fullscreenControl:false,
})
const pin = document.createElement("img");
pin.className = "pin";
pin.src = "https://www.creamery-group.com/wp-content/themes/cg/assets/images/logo-creamery-group-visual.svg"
const marker = new AdvancedMarkerElement({
map:map,
position:position,
content:pin,
});
const pinInfoElm = document.createElement("div");
const street = document.createElement("span");
const zipcode = document.createElement("span");
const city = document.createElement("span");
const contact = document.createElement("a");
pinInfoElm.className = "pinInfo";
contact.className = "pinContact";
contact.setAttribute('href', 'https://www.google.nl')
pinInfoElm.appendChild(street).innerHTML = 'Tussen de Bruggen 97';
pinInfoElm.appendChild(zipcode).innerHTML = '6231 CB';
pinInfoElm.appendChild(city).innerHTML = 'Meerssen';
pinInfoElm.appendChild(contact).innerHTML = "MAIL";
const pinInfo = new AdvancedMarkerElement({
map:map,
position:position,
content:pinInfoElm,
gmpClickable: true,
});
}
initMap();
</script>
Inside my HTML marker I have a hyperlink element but this is not clickable.
With some research I came pout by OnInfoWindowClickListener but also this makes my hyperlink element not clickable.