Сделал тестовую обработку, чтобы проверить отображение карт. На форму кинул поле HTML документа и в него подтягиваю следующее (тестовый пример отображения гугл карт):
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=11">
<script src="
https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<style type="text/css">
#map {
height: 100%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script>
let map;
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
center: { lat: -34.397, lng: 150.644 },
zoom: 8,
});
}
</script>
</head>
<body>
<div id="map"></div>
<script
src="
https://maps.googleapis.com/maps/api/js?key=ТУТ_Я_ВВЕЛ_СВОЙ_АПИ=initMap&libraries=&v=weekly"
async
></script>
</body>
</html>
Но при открытии - поле HTML и дальше остается пустым.