I am trying to build a Custom HTML block that uses Google Maps. The map doesn’t load and there is nothing in the console. There doesn’t seem to be any documentation from Frappe on how to use this.
<h1>Google Map Example</h1>
<!-- Map container -->
<div id="map"></div>
document.addEventListener('DOMContentLoaded', function() {
console.log('DOM fully loaded. Initializing Google Map.');
// Load the Google Maps API script
var script = document.createElement('script');
script.src = 'https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&libraries=places';
script.defer = true;
script.onload = function() {
console.log('Google Maps API script loaded.');
// Initialize Google Map
function initMap() {
console.log('Initializing map...');
const centerCoordinates = { lat: 40.7128, lng: -74.0060 }; // Example coordinates (New York City)
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 10,
center: centerCoordinates,
});
const marker = new google.maps.Marker({
position: centerCoordinates,
map: map,
title: "Marker Title",
});
}
// Call initMap when the page is fully loaded
window.onload = function() {
console.log('Page fully loaded. Initializing map.');
initMap();
};
};
document.head.appendChild(script);
});
height: 400px;
width: 100%;
}```