Google map with a fully visible HTML element on top

Question

Google map with a fully visible HTML element on top

When certain points on a Google map are clicked, a small popup box appears. This works fine in the regular small Google map mode.

However, when the Google map is switched to full screen mode by clicking the full screen button (which is shown when `fullScreenControl` is set to true), the popup no longer shows up on top of the map. Upon inspecting the element, it seems to be at the correct position and size but remains invisible.

I've tried increasing the z-index value for the popup, but still haven't had any luck getting it to display properly.

Is there a way to make this work in full screen mode?

javascript html css google-maps-api-3

Answer 1

Answer №1

The issue arises when Google Maps goes into fullscreen mode, causing one of its own inner divs to take over the screen. Everything outside of this div becomes invisible, even with z-index settings.

To overcome this obstacle, I devised a two-step solution:

1) To ensure visibility, I moved the custom elements inside the inner div. However, creating the inner div only happens after the google.maps.Map is initialized. Using jQuery, I included the following code right after the map object creation:

var $map = $("#map");
var map = new google.maps.Map(
    $map.get(0),
    {/*map options*/},
);
var $fullscreenDiv = $map.children("div:first");
$("#mybutton1, #mybutton2").appendTo($fullscreenDiv);

2) Despite moving the elements, they still remained hidden without an explicit z-index value. The specific value didn't matter much, so I set it to z-index: 2147483647 for assured visibility.

#mybutton1, #mybutton2 {
    z-index: 2147483647;
}

Answer 2

The issue arises when Google Maps goes into fullscreen mode, causing one of its own inner divs to take over the screen. Everything outside of this div becomes invisible, even with z-index settings.

To overcome this obstacle, I devised a two-step solution:

1) To ensure visibility, I moved the custom elements inside the inner div. However, creating the inner div only happens after the google.maps.Map is initialized. Using jQuery, I included the following code right after the map object creation:

var $map = $("#map");
var map = new google.maps.Map(
    $map.get(0),
    {/*map options*/},
);
var $fullscreenDiv = $map.children("div:first");
$("#mybutton1, #mybutton2").appendTo($fullscreenDiv);

2) Despite moving the elements, they still remained hidden without an explicit z-index value. The specific value didn't matter much, so I set it to z-index: 2147483647 for assured visibility.

#mybutton1, #mybutton2 {
    z-index: 2147483647;
}

Answer 3

Answer №2

A method that does not require jQuery. In agreement with sanchopancho13's suggestion, it is necessary to place your customized menu inside the Google Maps DIV after the map has been initialized. The JavaScript "appendChild" function accomplishes this task. If the specified element already exists in the DOM, the JavaScript "appendChild" function moves the element along with all child elements and associated event handlers.

https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild

Therefore, craft your custom menu or panel in standard HTML (including event handlers):

<div id="customPanel">
  <button onclick="action1()">Custom Button 1</button>
  <button onclick="action2()">Custom Button 2</button>
  <button onclick="action3()">Custom Button 3</button>
  <button onclick="action4()">Custom Button 4</button>
</div>

Initialize the map, locate its first DIV element, and insert your DIV within the Google Map DIV:

var map = new google.maps.Map(map, { yourMapOptions });
var mapDiv = document.getElementById('map').getElementsByTagName('div')[0];
mapDiv.appendChild(document.getElementById("customPanel"));

This approach is effective for displaying the map in full-screen mode as well as normal mode. As emphasized earlier, adjusting the Z-index is crucial to ensure visibility of your custom panel:

CSS:

#customPanel {
  z-index: 1;
}

Answer 4

A method that does not require jQuery. In agreement with sanchopancho13's suggestion, it is necessary to place your customized menu inside the Google Maps DIV after the map has been initialized. The JavaScript "appendChild" function accomplishes this task. If the specified element already exists in the DOM, the JavaScript "appendChild" function moves the element along with all child elements and associated event handlers.

https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild

Therefore, craft your custom menu or panel in standard HTML (including event handlers):

<div id="customPanel">
  <button onclick="action1()">Custom Button 1</button>
  <button onclick="action2()">Custom Button 2</button>
  <button onclick="action3()">Custom Button 3</button>
  <button onclick="action4()">Custom Button 4</button>
</div>

Initialize the map, locate its first DIV element, and insert your DIV within the Google Map DIV:

var map = new google.maps.Map(map, { yourMapOptions });
var mapDiv = document.getElementById('map').getElementsByTagName('div')[0];
mapDiv.appendChild(document.getElementById("customPanel"));

This approach is effective for displaying the map in full-screen mode as well as normal mode. As emphasized earlier, adjusting the Z-index is crucial to ensure visibility of your custom panel:

CSS:

#customPanel {
  z-index: 1;
}

Google map with a fully visible HTML element on top

Answer №1

Answer №2

Similar questions

What is the best way to retrieve state within a property of a React class component?

Is it possible to selectively process assets based on their type using Gulp and Useref?

How to extract keys with the highest values in a JavaScript hashmap or object

Trying to update the +/- icon on an accordion dropdown, however, the local HTML file is not loading the JavaScript file. (Using Bootstrap 4)

expanding the div based on the filtered content inside

JavaScript-based tool for extracting content from Sketch file

What is causing readHTMLTable to encounter difficulties when attempting to parse Premier League standings for the month of May?

The Bootstrap v5 dropdown feature is malfunctioning as the drop-down menu fails to appear

Processing JSON data from a variable using jQuery without needing to make an AJAX call

Unbind a prepared statement in a node.js environment using SQL

Extracting information from a Weather API and sharing it on Twitter

Python script for automating captcha scraping

Combining JavaScript functions and Vue.js methods through chaining

The function createReadStream completes execution without resolving

Translation of country codes into the complete names of countries

Updating the legend boxes of a chart in Chart Js to match the style of the graph lines

Leveraging a spritesheet in conjunction with createPattern()

Inexperienced with Bootstrap/CSS: Cannot open dropdown by clicking (CDN properly installed)

Guide to triggering a popover from within another popover using jQuery

Arrange pictures and div elements in a horizontal layout