Im getting some console errors seemingly from the google aps api, and my maps is not loading
picture of the maps modal
Ive tried changing versions and following what is suggested in the documentation but for some reason it just wont load, and the error is not giving me much information to go off of.
this same script used to work but it seems to suddenly throw errors. (TypeError: this.Xm is not iterable)
heres my javascript code
(function ($) {
$(document).ready(function () {
const PI = 3.14159265358979323846;
const TERRESTRIAL_RADIUS = 6372797.56085;
const RADIAN_DEGREES = PI / 180;
let map;
let marker;
if (true)
{
$('#modalGoogleMap').modal('show');
}
originalLatLng = {
lat: parseFloat($('#GoogleMaps_OriginalLat').val()),
lng: parseFloat($('#GoogleMaps_OriginalLng').val())
};
newLatLng = {
lat: parseFloat($('#GoogleMaps_NewLat').val()),
lng: parseFloat($('#GoogleMaps_NewLng').val())
};
var apiString =
$('#GoogleMaps_APIString').val()
+ "?v=" + $('#GoogleMaps_Version').val()
+ "&key=" + $('#GoogleMaps_Key').val() + "&callback=initMap";
function markerUpdate(map) {
marker.setMap(null);
debugger
newLatLng.lat = parseFloat(document.getElementById("latText").value);
newLatLng.lng = parseFloat(document.getElementById("lngText").value);
marker = new google.maps.Marker({
position: newLatLng,
map,
title: 'Map Pin Updated: Manual Input',
draggable: true
});
marker.setMap(map);
}
function addMarkerListener(map, marker) {
map = new google.maps.event.addListener(marker, 'dragend', function (evt) {
newLatLng.lat = evt.latLng.lat().toFixed(6);
newLatLng.lng = evt.latLng.lng().toFixed(6);
$('#lngText').val(newLatLng.lng);
$('#latText').val(newLatLng.lat);
});
}
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
center: originalLatLng,
zoom: 18
});
marker = new google.maps.Marker({
position: originalLatLng,
map,
title: 'Rooftop of Home to be Insured',
draggable: true
});
addMarkerListener(map, marker);
debugger
$('#lngText').val(originalLatLng.lng)
$('#latText').val(originalLatLng.lat)
document.getElementById("latText").oninput = function () { markerUpdate(map) };
document.getElementById("lngText").oninput = function () { markerUpdate(map) };
}
$('#modalGoogleMapClose').click(function () {
GetNewLocation();
});
$('#modalGoogleMapCancel').click(function () {
initMap();
})
$('#close').click(function () {
initMap();
})
$("#GeoInformation").validate({
submitHandler: function (form) {
let isSuccess = GetNewLocation();
if (isSuccess) {
form.submit();
}
},
errorPlacement: function (error, element) {
error.insertBefore(element);
},
onkeyup: false,
onclick: false
});
function GetNewLocation() {
distance = CalcGPSDistance(originalLatLng.lat, originalLatLng.lng, newLatLng.lat, newLatLng.lng);
if ( distance > 45 ) {
$('.modal-title').text("Pin is too far from the supplied address");
marker.setMap(null);
marker = new google.maps.Marker({
position: originalLatLng,
map: map,
title: 'Rooftop of Home to be Insured',
draggable: true
});
window.setTimeout(() => {
map.panTo(marker.getPosition());
}, 600);
window.setTimeout(() => {
map.setZoom(18);
}, 600);
addMarkerListener(map, marker);
return false;
}
else {
$('#GoogleMaps_NewLat').val(newLatLng.lat);
$('#GoogleMaps_NewLng').val(newLatLng.lng);
$('#modalGoogleMap').modal('hide');
return true;
}
}
function CalcGPSDistance(lat1, lng1, lat2, lng2)
{
let haversine;
let temp;
let pointDistance;
lat1 = originalLatLng.lat * RADIAN_DEGREES;
lng1 = originalLatLng.lng * RADIAN_DEGREES;
lat2 = newLatLng.lat * RADIAN_DEGREES;
lng2 = newLatLng.lng * RADIAN_DEGREES;
haversine = (Math.sin((1.0 / 2) * (lat2 - lat1)) ** 2) + ((Math.cos(lat1)) * (Math.cos(lat2)) * (Math.sin((1.0 / 2) * (lng2 - lng1)) ** 2));
temp = 2 * Math.asin(Math.min(1.0, Math.sqrt(haversine)));
pointDistance = TERRESTRIAL_RADIUS * temp;
pointDistance = pointDistance / 1609.344;
return pointDistance;
}
// Create the script tag, set the appropriate attributes
var script = document.createElement('script');
script.src = apiString;
script.async = true;
// Attach your callback function to the `window` object
window.initMap = function () {
// JS API is loaded and available
initMap();
};
// Append the 'script' element to 'head'
document.head.appendChild(script);
}); // End document ready
})(this.jQuery);
I have tried changing the version number, ive tried looking up and down the documentation but no solution.
the current version being used is 3.55 but ive tried quarterly stable and weekly as well as 3.57
I have tried to update to the newest version of what google maps suggests as an implementation as well
(function ($) {
$(document).ready(function () {
debugger;
const PI = 3.14159265358979323846;
const TERRESTRIAL_RADIUS = 6372797.56085;
const RADIAN_DEGREES = PI / 180;
let map;
let marker;
if (true) {
$('#modalGoogleMap').modal('show');
}
originalLatLng = {
lat: parseFloat($('#GoogleMaps_OriginalLat').val()),
lng: parseFloat($('#GoogleMaps_OriginalLng').val())
};
newLatLng = {
lat: parseFloat($('#GoogleMaps_NewLat').val()),
lng: parseFloat($('#GoogleMaps_NewLng').val())
};
var apiString =
$('#GoogleMaps_APIString').val()
+ "?v=3.57"
+ "&key=" + $('#GoogleMaps_Key').val() + "&callback=initMap";
function markerUpdate(map) {
marker.setMap(null);
debugger
newLatLng.lat = parseFloat(document.getElementById("latText").value);
newLatLng.lng = parseFloat(document.getElementById("lngText").value);
marker = new AdvancedMarkerElement({
position: newLatLng,
map,
title: 'Map Pin Updated: Manual Input',
gmpDraggable: true
});
marker.setMap(map);
}
function addMarkerListener(map, marker) {
marker.addListener("dragend", (event) => {
newLatLng.lat = evt.latLng.lat().toFixed(6);
newLatLng.lng = evt.latLng.lng().toFixed(6);
$('#lngText').val(newLatLng.lng);
$('#latText').val(newLatLng.lat);
});
}
console.log(document.getElementById("map"))
window.initMap = async function () {
debugger;
console.log(document.getElementById("map"))
console.log("Maps JavaScript API loaded.");
// Request needed libraries.
//@ts-ignore
const { Map } = await google.maps.importLibrary("maps");
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
// The map, centered at Uluru
map = new Map(document.getElementById("map"), {
zoom: 18,
center: originalLatLng,
});
// The marker, positioned at Uluru
const marker = new AdvancedMarkerElement({
map: map,
position: originalLatLng,
title: "Rooftop of Home to be Insured",
gmpDraggable: true
});
addMarkerListener(map, marker);
debugger;
$('#lngText').val(originalLatLng.lng)
$('#latText').val(originalLatLng.lat)
document.getElementById("latText").oninput = function () { markerUpdate(map) };
document.getElementById("lngText").oninput = function () { markerUpdate(map) };
}
$('#modalGoogleMapClose').click(function () {
GetNewLocation();
});
$('#modalGoogleMapCancel').click(function () {
window.initMap();
})
$('#close').click(function () {
window.initMap();
})
$("#GeoInformation").validate({
submitHandler: function (form) {
let isSuccess = GetNewLocation();
if (isSuccess) {
form.submit();
}
},
errorPlacement: function (error, element) {
error.insertBefore(element);
},
onkeyup: false,
onclick: false
});
function GetNewLocation() {
distance = CalcGPSDistance(originalLatLng.lat, originalLatLng.lng, newLatLng.lat, newLatLng.lng);
if (distance > 45) {
$('.modal-title').text("Pin is too far from the supplied address");
marker.setMap(null);
marker = new AdvancedMarkerElement({
position: originalLatLng,
map: map,
title: 'Rooftop of Home to be Insured',
gmpDraggable: true
});
window.setTimeout(() => {
map.panTo(marker.getPosition());
}, 600);
window.setTimeout(() => {
map.setZoom(18);
}, 600);
addMarkerListener(map, marker);
return false;
}
else {
$('#GoogleMaps_NewLat').val(newLatLng.lat);
$('#GoogleMaps_NewLng').val(newLatLng.lng);
$('#modalGoogleMap').modal('hide');
return true;
}
}
function CalcGPSDistance(lat1, lng1, lat2, lng2) {
let haversine;
let temp;
let pointDistance;
lat1 = originalLatLng.lat * RADIAN_DEGREES;
lng1 = originalLatLng.lng * RADIAN_DEGREES;
lat2 = newLatLng.lat * RADIAN_DEGREES;
lng2 = newLatLng.lng * RADIAN_DEGREES;
haversine = (Math.sin((1.0 / 2) * (lat2 - lat1)) ** 2) + ((Math.cos(lat1)) * (Math.cos(lat2)) * (Math.sin((1.0 / 2) * (lng2 - lng1)) ** 2));
temp = 2 * Math.asin(Math.min(1.0, Math.sqrt(haversine)));
pointDistance = TERRESTRIAL_RADIUS * temp;
pointDistance = pointDistance / 1609.344;
return pointDistance;
}
// Create the script tag, set the appropriate attributes
var script = document.createElement('script');
script.src = apiString;
//script.async = true;
// Append the 'script' element to 'head'
document.head.appendChild(script);
}); // End document ready
})(this.jQuery);
Running that one gets me the same error as the original.