Make google maps InfoWindow wider than 700px

Question

Make google maps InfoWindow wider than 700px

To display the InfoWindow content at a size of 840px x 660px, I need to adjust the MaxWidth property when creating the google.maps.InfoWindow object.

(For example: new google.maps.InfoWindow({ content: some_text, maxWidth: 840});)

However, despite setting the maxWidth property to 840, the window only appears as 707px wide. This is because there are nested div tags with restrictions on width and height between my content's #content div and the .gm-style-iw div.

I have tried modifying the classes for .gm-style-iw and #content, but the issue persists due to these intermediary div tags. By removing the CSS styling from the problematic div tag and its sub-tags through Chrome Inspect Element, the window displays correctly. However, I am unable to set the width and height properties via CSS or JavaScript.

If anyone has a solution or workaround for this problem, I would greatly appreciate your assistance!

javascript jquery css infowindow

Answer 1

Answer №1

avoid using 840px as a value, instead use 840. If you stick with 840px, you may encounter an error like:

identifier starts immediately after numeric literal

the correct approach is:

var infowindow = new google.maps.InfoWindow({
      content: contentString,
      maxWidth: 840
  });

check out a quick demo:

function initialize() {
  var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
  var mapOptions = {
    zoom: 4,
    center: myLatlng
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  var contentString = '<div id="content">'+
      '<div id="siteNotice">'+
      '</div>'+
      '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
      '<div id="bodyContent">'+
      '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
      'sandstone rock formation in the southern part of the '+
      'Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) '+
      'south west of the nearest large town, Alice Springs; 450&#160;km '+
      '(280&#160;mi) by road. Kata Tjuta and Uluru are the two major '+
      'features of the Uluru - Kata Tjuta National Park. Uluru is '+
      'sacred to the Pitjantjatjara and Yankunytjatjara, the '+
      'Aboriginal people of the area. It has many springs, waterholes, '+
      'rock caves and ancient paintings. Uluru is listed as a World '+
      'Heritage Site.</p>'+
      '<p>Attribution: Uluru, <a href="http://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
      'http://en.wikipedia.org/w/index.php?title=Uluru</a> '+
      '(last visited June 22, 2009).</p>'+
      '</div>'+
      '</div>';

  var infowindow = new google.maps.InfoWindow({
      content: contentString,
      maxWidth: 840
  });

  var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title: 'Uluru (Ayers Rock)'
  });
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map,marker);
  });
}

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

   html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&sensor=false&libraries=drawing,geometry"></script>
<div id="map-canvas"></div>

Answer 2

avoid using 840px as a value, instead use 840. If you stick with 840px, you may encounter an error like:

identifier starts immediately after numeric literal

the correct approach is:

var infowindow = new google.maps.InfoWindow({
      content: contentString,
      maxWidth: 840
  });

check out a quick demo:

function initialize() {
  var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
  var mapOptions = {
    zoom: 4,
    center: myLatlng
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  var contentString = '<div id="content">'+
      '<div id="siteNotice">'+
      '</div>'+
      '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
      '<div id="bodyContent">'+
      '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
      'sandstone rock formation in the southern part of the '+
      'Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) '+
      'south west of the nearest large town, Alice Springs; 450&#160;km '+
      '(280&#160;mi) by road. Kata Tjuta and Uluru are the two major '+
      'features of the Uluru - Kata Tjuta National Park. Uluru is '+
      'sacred to the Pitjantjatjara and Yankunytjatjara, the '+
      'Aboriginal people of the area. It has many springs, waterholes, '+
      'rock caves and ancient paintings. Uluru is listed as a World '+
      'Heritage Site.</p>'+
      '<p>Attribution: Uluru, <a href="http://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
      'http://en.wikipedia.org/w/index.php?title=Uluru</a> '+
      '(last visited June 22, 2009).</p>'+
      '</div>'+
      '</div>';

  var infowindow = new google.maps.InfoWindow({
      content: contentString,
      maxWidth: 840
  });

  var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title: 'Uluru (Ayers Rock)'
  });
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map,marker);
  });
}

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

   html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&sensor=false&libraries=drawing,geometry"></script>
<div id="map-canvas"></div>

Make google maps InfoWindow wider than 700px

Answer №1

Similar questions

React component with element style declared in module.css file and conditional state

What is the best way to implement colorful opening hours in code?

How to align the markup of a dynamic directive with its host in Angular?

Tips on changing the color of a dropdown select option in Angular 8

Combining two sets of JSON data through mathematical operations

What is more effective: generating/eradicating HTML components or concealing them until required?

Encountering issues with styled component's flex not functioning as expected in React

What is the best way to ensure a div takes up the rest of the height on a page when the header's size is unpredictable

Transferring session id across various devices using PHP

Struggling with creating a slideshow - is the display set to none?

Looking to replace an existing class with a new one in a div element?

dispatch a WebSocket message within a route using Express.js

Jquery UI - selection buttons

Modifying Div Size with Jquery

Exploring date formatting in NestJs with Javascript

Issue with DIV positioning in IE when another DIV is animated downwards

I'm having trouble getting my flex items to maintain a specific width and height while staying in a single line

Create a dynamic prism that adjusts its size according to the distance

Every time you attempt to download in Vue, you are met with the familiar sight

Step-by-step guide to creating a custom wrapper in React that modifies the props for a component