Join the Webstudio community

Updated 2 months ago

Troubleshooting an error

At a glance

The community members are discussing an issue where they are getting an error, but they are not sure what they are doing wrong. The comments suggest that the issue may be related to accessing the Google Maps API before it has loaded. One community member shares a code snippet that initializes the Google Maps API, and another community member mentions that they had the script in the project settings and removed it. The discussion also includes a request to share a link to the issue and a suggestion that the issue may be related to the Google Maps script not being loaded before the initMap() function is called. The community members eventually resolve the issue by following the Google Maps documentation, which states that you don't need anything special, just define the initMap() function and it will be called once the script is loaded.

Useful resources
not sure what I'm doing wrong but I do keep getting this error:
Attachment
image.png
O
D
12 comments
you are accessing that api before its loaded
I don't see where are you calling initMap
<script>
// Function to initialize the map
function initMap() {
// Define map options
var mapOptions = {
center: { lat: 38.0, lng: -100.0 },
fullscreenControl: true,
mapTypeControl: false,
streetViewControl: false,
zoom: 4,
zoomControl: true,
maxZoom: 17,
mapId: ""
};

// Initialize the map with options
var map = new google.maps.Map(document.getElementById('map'), mapOptions);

// Select all elements with class "location-result"
var locationResults = document.querySelectorAll('.location-result');

// Iterate over each location result
locationResults.forEach(function(result) {
// Extract latitude and longitude values from the result
var latElement = result.querySelector('.coords_lat');
var lngElement = result.querySelector('.coords_lng');

// Check if latitude and longitude elements exist
if (latElement && lngElement) {
var lat = parseFloat(latElement.textContent);
var lng = parseFloat(lngElement.textContent);

// Create a marker for each location
var marker = new google.maps.Marker({
position: { lat: lat, lng: lng },
map: map
});

// Add click event listener to each location result
result.addEventListener('click', function() {
// Pan the map to the clicked marker's position
map.panTo({ lat: lat, lng: lng });
// Set zoom level to 1
map.setZoom(10);
});
}
});
}

// Function to check if the document is ready
function checkDocumentReady() {
if (document.readyState === 'complete') {
// Document is already in complete state, call initMap directly
initMap();
} else {
// Document is not yet in complete state, wait for DOMContentLoaded event
document.addEventListener('DOMContentLoaded', function() {
// Call initMap when DOMContentLoaded event fires
initMap();
});
}
}

// Call checkDocumentReady to determine when to execute initMap
checkDocumentReady();

</script>
so i did have the script in the project settings as well. which i just removed that.
can you share a link? when is the error happening?
Sure, i'll DM you an admin link so you can take a peak.
it seems like there is some case wwhere you initMap() and google maps script hasn't loaded
I just sent you a DM with admin link if you don't mind taking a look
for anyone following this conversation, this got resolved for google maps you don't need anything special, just define your initMap function and it will call it once script is loaded
Add a reply
Sign up and join the conversation on Discord
","dateCreated":"2024-02-03T19:27:37.742Z","dateModified":"2024-02-03T19:27:37.742Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/4909993b-8f86-4e28-b78d-3d611b93f9f4","name":"Dirky Dirk","identifier":"4909993b-8f86-4e28-b78d-3d611b93f9f4","image":"https://cdn.discordapp.com/avatars/338154523245805580/e2ec7f968aa1e5cbe861c52784271e08.webp?size=256"},"commentCount":0,"comment":[],"position":3,"upvoteCount":0},{"@type":"Comment","text":"so i did have the script in the project settings as well. which i just removed that.","dateCreated":"2024-02-03T19:28:17.747Z","dateModified":"2024-02-03T19:28:17.747Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/4909993b-8f86-4e28-b78d-3d611b93f9f4","name":"Dirky Dirk","identifier":"4909993b-8f86-4e28-b78d-3d611b93f9f4","image":"https://cdn.discordapp.com/avatars/338154523245805580/e2ec7f968aa1e5cbe861c52784271e08.webp?size=256"},"commentCount":0,"comment":[],"position":4,"upvoteCount":0},{"@type":"Comment","text":"","dateCreated":"2024-02-03T19:28:37.361Z","dateModified":"2024-02-03T19:28:37.361Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/4909993b-8f86-4e28-b78d-3d611b93f9f4","name":"Dirky Dirk","identifier":"4909993b-8f86-4e28-b78d-3d611b93f9f4","image":"https://cdn.discordapp.com/avatars/338154523245805580/e2ec7f968aa1e5cbe861c52784271e08.webp?size=256"},"commentCount":0,"comment":[],"position":5,"upvoteCount":0},{"@type":"Comment","text":"can you share a link? when is the error happening?","dateCreated":"2024-02-03T19:29:04.833Z","dateModified":"2024-02-03T19:29:04.833Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/cdd3ed87-53a0-414a-885a-56b7939e412a","name":"Oleg Isonen","identifier":"cdd3ed87-53a0-414a-885a-56b7939e412a","image":"https://cdn.discordapp.com/avatars/469405813048606720/8b66a5882214c63ee6148fcce3ef8e93.webp?size=256"},"commentCount":0,"comment":[],"position":6,"upvoteCount":0},{"@type":"Comment","text":"Sure, i'll DM you an admin link so you can take a peak.","dateCreated":"2024-02-03T19:29:30.060Z","dateModified":"2024-02-03T19:29:30.060Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/4909993b-8f86-4e28-b78d-3d611b93f9f4","name":"Dirky Dirk","identifier":"4909993b-8f86-4e28-b78d-3d611b93f9f4","image":"https://cdn.discordapp.com/avatars/338154523245805580/e2ec7f968aa1e5cbe861c52784271e08.webp?size=256"},"commentCount":0,"comment":[],"position":7,"upvoteCount":0},{"@type":"Comment","text":"it seems like there is some case wwhere you initMap() and google maps script hasn't loaded","dateCreated":"2024-02-03T19:29:42.773Z","dateModified":"2024-02-03T19:29:42.773Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/cdd3ed87-53a0-414a-885a-56b7939e412a","name":"Oleg Isonen","identifier":"cdd3ed87-53a0-414a-885a-56b7939e412a","image":"https://cdn.discordapp.com/avatars/469405813048606720/8b66a5882214c63ee6148fcce3ef8e93.webp?size=256"},"commentCount":0,"comment":[],"position":8,"upvoteCount":0},{"@type":"Comment","text":"I just sent you a DM with admin link if you don't mind taking a look","dateCreated":"2024-02-03T19:30:23.211Z","dateModified":"2024-02-03T19:30:23.211Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/4909993b-8f86-4e28-b78d-3d611b93f9f4","name":"Dirky Dirk","identifier":"4909993b-8f86-4e28-b78d-3d611b93f9f4","image":"https://cdn.discordapp.com/avatars/338154523245805580/e2ec7f968aa1e5cbe861c52784271e08.webp?size=256"},"commentCount":0,"comment":[],"position":9,"upvoteCount":0},{"@type":"Comment","text":"for anyone following this conversation, this got resolved for google maps you don't need anything special, just define your initMap function and it will call it once script is loaded","dateCreated":"2024-02-04T11:17:40.742Z","dateModified":"2024-02-04T11:17:40.742Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/cdd3ed87-53a0-414a-885a-56b7939e412a","name":"Oleg Isonen","identifier":"cdd3ed87-53a0-414a-885a-56b7939e412a","image":"https://cdn.discordapp.com/avatars/469405813048606720/8b66a5882214c63ee6148fcce3ef8e93.webp?size=256"},"commentCount":0,"comment":[],"position":10,"upvoteCount":0},{"@type":"Comment","text":"based on their docs https://developers.google.com/maps/documentation/javascript/load-maps-js-api","dateCreated":"2024-02-04T11:19:22.209Z","dateModified":"2024-02-04T11:19:22.209Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/cdd3ed87-53a0-414a-885a-56b7939e412a","name":"Oleg Isonen","identifier":"cdd3ed87-53a0-414a-885a-56b7939e412a","image":"https://cdn.discordapp.com/avatars/469405813048606720/8b66a5882214c63ee6148fcce3ef8e93.webp?size=256"},"commentCount":0,"comment":[],"position":11,"upvoteCount":0},{"@type":"Comment","text":"thanks oleg!","dateCreated":"2024-02-04T18:27:17.242Z","dateModified":"2024-02-04T18:27:17.242Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/4909993b-8f86-4e28-b78d-3d611b93f9f4","name":"Dirky Dirk","identifier":"4909993b-8f86-4e28-b78d-3d611b93f9f4","image":"https://cdn.discordapp.com/avatars/338154523245805580/e2ec7f968aa1e5cbe861c52784271e08.webp?size=256"},"commentCount":0,"comment":[],"position":12,"upvoteCount":0}],"author":{"@type":"Person","url":"https://help.webstudio.is/members/4909993b-8f86-4e28-b78d-3d611b93f9f4","name":"Dirky Dirk","identifier":"4909993b-8f86-4e28-b78d-3d611b93f9f4","image":"https://cdn.discordapp.com/avatars/338154523245805580/e2ec7f968aa1e5cbe861c52784271e08.webp?size=256"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":0}}]