how to display google maps with javascript

Question

I want to display one google custom map with javascript, I set this code in a code module, but when I post it only appear the code and not the map, how can I display my map correctly? The code works in a .html file . Thanks in advance

<div id ="map" style="height:500px"> </div> 
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAYNLXo8S5TxDJKElasñdkfIIRFEzeECQZ8&callback=initMap&libraries=&v=weekly" defer></script>

<script type="text/javascript">
    "use strict";

    let map;

    function initMap() {
        map = new google.maps.Map(document.getElementById("map"), {
            center: {
                lat: 40.6059969,
                lng: -3.706213,
            },
            zoom: 13,
            mapTypeId: 'hybrid'
        });

        var image = {
            url: '../../resources/logo.png', //ruta de la imagen
            //size: new google.maps.Size(40, 60), //tamaño de la imagen
            //origin: new google.maps.Point(0,0), //origen de la iamgen
            //el ancla de la imagen, el punto donde esta marcando, en nuestro caso el centro inferior.
            //anchor: new google.maps.Point(20, 60) 
        };

        var marker = new google.maps.Marker({
            position: {
                lat: 40.617335,
                lng: -3.703045
            },
            map: map,
            icon: image,
            title: 'Sequopro'
        });
            
        marker3.addListener("click", ()=>{
            alertify.alert("INFO","En el ayuntamiento no hay ningún Sequosentry operativo!");
        });
    }
</script>

Answer 1

You should place that code in an HTML block, not a text block.

You can create a new block, type HTML in the search bar and select it. Then paste above code in that new block.