Custom div element obstructs information window on map due to lack of auto panning feature

Question

Custom div element obstructs information window on map due to lack of auto panning feature

I created a unique div that is absolutely positioned on a Google Map. You can view the image below to see it. My issue is that the info window is being covered by this custom div element, as demonstrated in the picture.

https://i.stack.imgur.com/1TgyQ.jpg

My goal is to have the map pan when I click on the marker and then have the info window open without being obscured.

I am aiming for a similar result to what you see on Google My Map. On Google My Map, when you click on the marker, the info window located near the top layer div (which displays 'Untitled map') does not overlap. The map automatically pans when the info window opens.

https://i.stack.imgur.com/1BMab.jpg

javascript html css google-maps

Answer 1

Answer №1

var map;
var chicago = {
  lat: 41.85,
  lng: -87.65
};

/**
 * The CenterControl function adds a control to the map that centers the map on
 * Chicago.
 * This constructor requires the control DIV as an input parameter.
 * @constructor
 */
function CenterControl(controlDiv, map) {

  // Set CSS for the control border.
  var controlUI = document.createElement('div');
  controlUI.style.backgroundColor = '#fff';
  controlUI.style.border = '2px solid #fff';
  controlUI.style.borderRadius = '3px';
  controlUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
  controlUI.style.cursor = 'pointer';
  controlUI.style.marginBottom = '22px';
  controlUI.style.textAlign = 'center';
  controlUI.title = 'Click to recenter the map';
  controlDiv.appendChild(controlUI);

  // Set CSS for the control interior.
  var controlText = document.createElement('div');
  controlText.style.color = 'rgb(25,25,25)';
  controlText.style.fontFamily = 'Roboto,Arial,sans-serif';
  controlText.style.fontSize = '16px';
  controlText.style.lineHeight = '38px';
  controlText.style.paddingLeft = '5px';
  controlText.style.paddingRight = '5px';
  controlText.innerHTML = 'Center Map';
  controlUI.appendChild(controlText);

  // Handling click event listeners: simply setting the map back to Chicago.
  controlUI.addEventListener('click', function() {
    map.setCenter(chicago);
  });

}

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: chicago
  });

  // Create the DIV to hold the control and call the CenterControl()
  // constructor by providing this DIV.
  var centerControlDiv = document.createElement('div');
  var centerControl = new CenterControl(centerControlDiv, map);

  centerControlDiv.index = 1;
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
}

/* Always define the map height explicitly to specify the size of the div
       * element containing the map. */

#map {
  height: 100%;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<div id="map"></div>

<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>

Using internal autocomplete is recommended, otherwise you may encounter issues when all balloons are part of the canvas, so if something is positioned on the map canvas.

To resolve this, you can make it transparent when not hovering over that div.

Answer 2

var map;
var chicago = {
  lat: 41.85,
  lng: -87.65
};

/**
 * The CenterControl function adds a control to the map that centers the map on
 * Chicago.
 * This constructor requires the control DIV as an input parameter.
 * @constructor
 */
function CenterControl(controlDiv, map) {

  // Set CSS for the control border.
  var controlUI = document.createElement('div');
  controlUI.style.backgroundColor = '#fff';
  controlUI.style.border = '2px solid #fff';
  controlUI.style.borderRadius = '3px';
  controlUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
  controlUI.style.cursor = 'pointer';
  controlUI.style.marginBottom = '22px';
  controlUI.style.textAlign = 'center';
  controlUI.title = 'Click to recenter the map';
  controlDiv.appendChild(controlUI);

  // Set CSS for the control interior.
  var controlText = document.createElement('div');
  controlText.style.color = 'rgb(25,25,25)';
  controlText.style.fontFamily = 'Roboto,Arial,sans-serif';
  controlText.style.fontSize = '16px';
  controlText.style.lineHeight = '38px';
  controlText.style.paddingLeft = '5px';
  controlText.style.paddingRight = '5px';
  controlText.innerHTML = 'Center Map';
  controlUI.appendChild(controlText);

  // Handling click event listeners: simply setting the map back to Chicago.
  controlUI.addEventListener('click', function() {
    map.setCenter(chicago);
  });

}

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: chicago
  });

  // Create the DIV to hold the control and call the CenterControl()
  // constructor by providing this DIV.
  var centerControlDiv = document.createElement('div');
  var centerControl = new CenterControl(centerControlDiv, map);

  centerControlDiv.index = 1;
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
}

/* Always define the map height explicitly to specify the size of the div
       * element containing the map. */

#map {
  height: 100%;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<div id="map"></div>

<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>

Using internal autocomplete is recommended, otherwise you may encounter issues when all balloons are part of the canvas, so if something is positioned on the map canvas.

To resolve this, you can make it transparent when not hovering over that div.

Custom div element obstructs information window on map due to lack of auto panning feature

Answer №1

Similar questions

next-redux-wrapper is being invoked repeatedly and experiencing multiple calls to HYDRATE

PHP encountered an issue while trying to compare the value stored in the $_POST variable with the value stored in a

Experience the simplicity of running basic Javascript Scratch code within IntelliJ IDEA Ultimate

Incorporating Javascript .click() with Python Selenium Webdriver for Enhanced Script Functionality

Material-UI - Switching thumb styles in a range slider

Steps for triggering a click event on a div with a button role within a class containing multiple elements

Executing Selenium tests: utilizing the webdriver.wait function to repeatedly call a promise

What is causing Firefox to display an additional line in this section?

Providing input through the URL bar in PHP and HTML

Utilizing the Google Maps API to geocode addresses and postponing the retrieval of the data

Adjusting the spacing between characters in SVG text elements

Utilizing mailerlite popups within a Next.js application: A step-by-step guide

JavaScript - Declaring canvas as a global object

Unable to execute JS script to navigate back to prior page with webdriver

Customize a web template using HTML5, JavaScript, and jQuery, then download it to your local device

Identifying all Images with JavaScript, Including Asynchronous Ones

Rerendering of a React component occurs upon a change in its state

Unable to incorporate an external JavaScript file via a static URL

Using CSS to overlay multiple text boxes onto an image at different positions

Determine the specific value of an HTML table cell by specifying the column name for a specific row