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

What can I do to stop hidden HTML tags from loading on my page? Is it possible to completely remove them from the page

What is causing my JavaScript not to load properly within Bootstrap tabs?

Is there a way in vee-validate to validate specific sections of a form?

Tips for transforming tabular text into JSON format with nodejs?

Launching URLs from JSON data in the system browser - Apache Cordova

Sending a user to an external website through an XML response

Is it possible for an onclick attribute to assign a function to document.getElementById without overwriting the existing value?

Guide to sending parameters to the method function of the Vue.js router

Overwriting values in a JavaScript array

The HTML code appears to be functioning correctly in all web browsers except for Safari

Does jqgrid navgrid have an event called "on Refresh"?

My Angular7 app.component.html file is not displaying the routing. What could be the issue?

CSS an act of misbehavior

The transition from Vuetify 2 to Vuetify 3 involves replacing deprecated properties like app, clipped-left, and offset-y with the new property called "

Optimizing CSS for printing with margins and overflow

jsp fullcalendar select not functioning properly

Utilize Vue in external files

Encountering an error when attempting to upload a file to S3 using JS Vue

What are the signs that an element was visible on screen prior to navigation?

Steps for transforming an Array of hierarchical data into the correct JSON format for D3 Tree Region visualization