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.
<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();
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-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}}]