Hidden Div on Google Maps no longer concealing

Since early December, the Google map on my site has been working perfectly. However, the other night, I noticed that the map now defaults to open when entering the site and cannot be closed. Strangely, all my Google maps are behaving this way even though no one has touched the code in months. What could have caused this sudden change?

Upon inspecting elements in Firefox, it shows that the div is hidden but is actually quite visible.

There are no errors showing up in my console.

Although this issue seems broad, the behavior is so unusual that it couldn't have been caused by a random keystroke in the PHP file.


Even after stripping down the code to the bare minimum, the issue persists. Unfortunately, I can't share the site at the moment. When I disable the Google code, everything works fine - the screen defaults to the correct view and clicking on the image opens the panels correctly. The area where the map should appear turns grey.

The CSS defines the mapproj div as hidden.

#mapproj, #mappers, #mapbuildproj, #mapcurproj  {
    visibility:hidden;
    background:#666;
    text-align:left;
    position:absolute;
    width: calc(100% - 200px);
    width: -o-calc(100% - 200px); /* opera */
    width: -webkit-calc(100% - 200px); /* google, safari */
    width: -moz-calc(100% - 200px);

    height: calc(100% - 80px);
    height: -o-calc(100% - 80px); /* opera */
    height: -webkit-calc(100% - 80px); /* google, safari */
    height: -moz-calc(100% - 80px);
    overflow-y:auto;

    left:200px;
    top:40px;
    color:black;
    z-index:1;
} 

The HTML calls the showprojmap() function with only the variable comp set.

<img style="margin-left:5px;" class="icon" src="images/add.png" alt="some_text" title="Add a project" onclick="showprojmap(3)" height="15px" width="15px">    
<div id="mapproj"></div>

The Showprojmap function should set the div as visible as type is not set.

function showprojmap(comp, type) {
    if (typeof type !=='undefined') {
        var personallog = document.createElement('input');
        var createproject = document.getElementById("createproject");
        personallog.setAttribute("id","personalid");
        personallog.setAttribute("name","personalid");
        personallog.setAttribute("type","hidden");
        personallog.setAttribute("value",comp)
        createproject.appendChild(personallog);
        document.getElementById('mappers').style.visibility = "visible";
    } else {
        var  personallog = document.getElementById("personalid");
        document.getElementById('mapproj').style.visibility = "visible";
            if (personallog){
                personallog.parentNode.removeChild(personallog);
            }
    }

    document.getElementById('logsmapproject').style.visibility = "visible";
}

The Google Map Code automatically sets the div as visible.

var mapproj;

function initializeproj() {
    var mapOptions = {
        center: { lat: -34.397, lng: 150.644},
        zoom: 8
    };

    mapproj = new google.maps.Map(document.getElementById('mapproj'), {
    zoom: 15,
    center: { lat: 41.7636111, lng: -72.6855556}
    });

    var infowindow = new google.maps.InfoWindow();  
}

google.maps.event.addDomListener(window, 'load', initializeproj);

This issue started unexpectedly last Tuesday around 9:00 - 10:00pm without any active text editors on my computer.

Answer №1

Recently, I encountered a similar issue where a popup map suddenly refused to close.

To solve this problem, I found a workaround by specifying the latest release version of the Google Maps JS API in my request (using v=3.18 in the query string). I still experienced the issue with v3.19.

http://maps.google.co.uk/maps/api/js?v=3.18&sensor=true&callback=loadMaps

I learned that if you do not explicitly request a version, you will automatically receive the latest experimental version.

I hope this solution proves helpful to you as well.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips on aligning objects within div elements

I am currently in the process of learning how to create websites. Below is the body tag of my website: <body> <h1 id="title">Title</h1> <div id="loginContainer"> <img id="usernameIcon" src="assets/images/usern ...

How to properly align a form with a multi-lined label in HTML and CSS?

I'm looking to create a form label that spans multiple lines and align the inputs with the labels. The goal is for the "Releasse Date" label to display as: Release Date (YYYY-MM-DD): [input box] Here's how it currently looks: https://i.sstatic ...

Implementing a switch feature with enable/disable functionality in a material table using table row data

Is there a way to incorporate an additional action in the Material table and have it included in the React material table along with the element? Furthermore, how can I obtain row data on onChange event while currently rendering it in the state? I would a ...

Updating the style of different input elements using Angular's dynamic CSS properties

I am seeking guidance on the proper method for achieving a specific functionality. I have a set of buttons, and I would like the opacity of a button to increase when it is pressed. Here is the approach I have taken so far, but I have doubts about its eff ...

A guide on using the patch API and Multer package to update files and images

After reviewing my code, I have successfully created a user model and imported it into the controller. Additionally, I have also imported an upload middleware from another directory where the code is written for uploading files/images using the multer pack ...

perform asynchronous calls within a for loop in a synchronous manner

Having issues with managing asynchronous events in sails.js. Obtaining data from a JSONapi and attempting to insert it into the database sequentially within a for loop. The goal is to maintain the correct order of execution. For simplicity, consider the f ...

Verification is required for additional elements within the div block once a single checkbox has been selected

Currently, I am working in PHP using the CodeIgniter framework. I have a question regarding implementing a functionality with checkboxes and validation using jQuery. Here is the scenario I want to achieve: There are four checkboxes, and when one checkbox ...

In Firefox, the width of a CSS grid cell is larger than the actual content it contains

My dilemma involves a div with a height of 15vw and the desire to insert four images into this div (each image's size is 1920*1080 px). When using the code below, everything appears correctly in Chrome. However, in Firefox, each image size is 195*110 ...

PHP is failing to send a JSON response, but no errors are being logged in the PHP error log or displayed in the

Hey there, I'm feeling a bit frustrated and really not a fan of Javascript at all. Can someone please help me figure out why this isn't working? It's frustrating because everything seems fine when I return a simple string instead of trying t ...

How can the Flickr API be utilized with JavaScript functions?

In preparation for a project, we are required to utilize the Flickr API in order to display a collection of photos when a specific category is selected. I have successfully set up my categories on the left side of a flexbox container. However, I am struggl ...

Displaying a single photo on mobile, while simultaneously showing four photos on the web using Nuxt.js

When viewing the web browser from a mobile device, only one image should be displayed instead of all four images fetched from an API. What are some possible ways to achieve this? The data retrieved includes all the images at once. <template> <d ...

Iterating through each ID in a table/cell using .NET MVC with the @

Whenever the table is loaded, I need to run a JavaScript function on each row for cell 4. This function will format the JSON string that is inserted into it. The current code I have only updates the first row/cell... I believe the issue may be related to ...

What is the best way to implement multiple ternary operators within HTML code?

Consider the following code snippet: It currently applies CSS classes up to red4, but I want to apply CSS classes up to red11. Additionally, the variable "size" in myData should be dynamic. For example, size could range from 0-20 // 0-100 // 0-10000, etc., ...

HAML Error: $ is not defined - Uncaught ReferenceError

I am encountering an issue with the following view: /views/admin/home/index.html.haml = render partial: 'general_tab_partial' .box.boxtab %article %h2= _('Global Reporting') .clearfix = form_tag '#', :method = ...

Numerous linkages facilitated by node-mongodb-native

Currently, I am working on a function aimed at inserting a document into a MongoDb database using the node-mongodb-native module. The function works perfectly fine, except when multiple documents are inserted back-to-back. To test how my function handles m ...

The X-axis remains visible even after being hidden and still functions properly in mobile view

I've been encountering some minor bugs while working on a website recently. One particular issue I'm struggling to fix involves the x-axis not hiding despite attempts in CSS, especially on mobile view. body { overflow-x: hidden; overflo ...

The paragraph tag remains unchanged

I am currently working on developing a feature that saves high scores using local storage. The project I'm working on is a quiz application which displays the top 5 scores at the end, regardless of whether the quiz was completed or not. However, I&apo ...

Achieving text-overflow: ellipsis functionality with mandatory content following

I have a list containing text and corresponding counts, displayed as follows: +----------------------------+ | Text A (123) | | Some other text (456,789) | +----------------------------+ Due to space limitations in my UI, I need to ensure ...

Sorting in MongoDB v3.6 is a breeze with the powerful capabilities that the

I'm encountering an issue with arranging the most recently added item in a list of objects/items to display at the top. It's similar to a job board where I want the newest jobs to appear at the top rather than at the bottom. I attempted to use Po ...

Transforming a two-column text document into a set of key-value pairs

Recently, I've been diving into the world of Node.js and Express. My current challenge involves converting a text file into key-value pairs. The approach I'm taking with my staircase program is as follows: https://i.sstatic.net/GPs200IQ.png Th ...