Tips on resizing the infoWindow in Google Map

I am having trouble with my infoWindow on Google Maps displaying the correct information. I need to adjust the size of the white div to match the grey box inside and also resize the arrow that connects the marker to the white div.

Check out the image below:

Here is the code snippet:

var contentString = '<form >'+
  '<h2><b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Data:</b></h2>'+
  '<div id="bodyContent">'+
  '<div style=width:220px;display:inline-block;>'+
  '<p>&nbsp;' +'</p>' + '<p>&nbsp;' + '</p>' + '<p>&nbsp;' + '</p>' +
  '<p>&nbsp;' + '</p>' + '</div>'+
  '<div style=width:220px;display:inline-block;>'+
  '<p>&nbsp;' +'</p>' + '<p>&nbsp;' + '</p>' + '<p>&nbsp;' + '</p>' +
  '<p>&nbsp;' + '</p>' + '</div>'+ '</div>'+ '</form>';
var infowindow = new google.maps.InfoWindow({
  content: contentString
});
/* info window */
infowindow.open(map,tracked);
javascriptcssgoogle-mapsgoogle-maps-markersinfowindow

Answer №1

To adjust the size of your infoWindow, there are a couple of approaches you can take. One method is to specify the width and height within the <form> tag in the contentString, which essentially styles the white infoWindow. For example, you could use: 

<form style="width:240px; height:240px">
.

Another option is to utilize the maxWidth property for your infoWindow - as there isn't a direct height option that adjusts based on content. Consult the Google Maps API Reference for infoWindowOptions for guidance on how to implement this:

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

However, it seems that modifying the size of the "white" arrow isn't supported by the current API. You may explore using the infoBubble Library - an open source alternative compatible with Google Maps. When using infoBubble, you have additional styling options compared to infoWindow, including the ability to adjust the arrowSize:

infoBubble = new InfoBubble({
    content: contentString,
    minWidth: 240, //width of your infoWindow/infoBubble
    arrowSize: 3 //set desired size            
});

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

JavaScript has received an event on Server XHR

Situation: There is a scenario where the target API is external and cannot be altered. A JS client initiates sending data to the API upon clicking a button. The code snippet resembles something like this: $.ajax({ type: "POST", url: &quo ...

javascriptjqueryajaxxmlhttprequest

How to correctly pass values in AngularJS functions

Here is a function that takes a description variable as a parameter $scope.relsingle = function(description) { console.log(description); var url = $scope.url+'/api/descrelation?limit=4&description='+description; $http.get(url).su ...

javascriptangularjsangularjs-scopeangularjs-ng-init

Adjust Node visibility as User scrolls to it using CSS

Suppose I have a structure like this: <br><br><br>...Numerous BRs...<br><br><br> <div id="thetarget"></div><div id="show"></div> <br><br><br>...Numerous BRs...<br><br&g ...

javascripthtmlcss

Rollup.js with Vue.js displays an HTML comment instead of rendering Vue HTML content

As I delve into the world of Vue.js, I am encountering some challenges with rendering a simple interpolation within my local development application. The Issue Strangely, the Vue instance displays an HTML comment of createElement <body> <sc ...

javascriptvue.jsrollupjs

How to enable the Copy to Clipboard feature for multiple buttons and transition from using an ID to a class identifier

Can someone please assist me? I have a copy to clipboard function that works well for IDs and a single button on my website. However, I need to modify it to work for multiple buttons and values with a class identifier. Unfortunately, I am unsure how to mak ...

javascriptjqueryhtmlclipboardcopy-paste

A new value was replaced when assigning a JSON value inside a loop

Is there a way to generate a structure similar to this? { "drink": { "2": { "name": "coke", "type": "drink" }, "3": { "name": "coke", "type": "drink" } }, "food": ...

javascriptjqueryjson

Guide to transmitting data from a C# WinForm to a completely separate JavaScript client chat application

I am facing a challenge with my chat application where I have a client-side written in JavaScript and a server-side built using WinForms. My goal is to transfer a value from my FrmConsole.cs file to my converse.js file. Is there a method I can use to accom ...

javascriptc#asp.netwinformsxmpp

malfunctioning form submit button after custom styling

My PHP contact form is functioning perfectly fine, but I'm facing a challenge when it comes to styling the submit button. Here is the current code for the button: <input type="submit" value="Submit"> I want to enhance the button using CSS. He ...

htmlcsscontact-form

"Protractor encountered an issue when navigating to the most up-to-date Angular section in our

We are in the process of upgrading our application from AngularJS to the latest version of Angular. I am currently working on writing tests that transition from the AngularJS version of the app to the admin application, which is built using the latest ver ...

javascriptangularjsangulartypescriptprotractor

Is it unnecessary to use both "width: inherit" and "float: none

When learning about responsive design, one pattern that is frequently seen is: @media screen and (max-width: 480px){ .class1{ width: inherit; float: none; } .class2{ width: inherit; float: none; } f ...

htmlcssresponsive-design

Updating style of an element by hovering over another

What is the best way to change the CSS of one element when hovering over another element in CSS? We can achieve this using the following code: .example .example2 li:hover .element If our HTML looks like this: <div class='example'><di ...

htmlcsscss-selectors

Facing difficulty in creating the Django JavaScript i18n catalog

Currently, I am attempting to create the JS catalog in order to translate my JavaScript strings. Following the documentation, I am doing the following: $ django-admin.py makemessages -d djangojs -l de processing locale de CommandError: errors happened wh ...

javascriptdjangointernationalization

CSS grid is organizing itself neatly on larger screens

I'm currently facing an issue with displaying a CSS grid on my page. When viewed on desktop, the grid appears stacked up instead of in separate columns. I've tried various methods like dividing it into 4 columns and using spans for width but noth ...

phpcssgridcss-grid

What is the best way to place a p-growl element in the bottom right corner of the page?

I've been struggling to fix the positioning of my growl message at the bottom right corner by overriding the CSS classes of p-growl. Initially, I attempted to override the .ui-growl class like this: ::ng-deep .ui-growl { position: fixed; b ...

cssangularangular5primeng

Attempting to devise a jQuery algorithm sorting method

To enhance the answer provided in this post: How to stack divs without spaces and maintain order on smaller screens using Bootstrap I've been exploring ways to develop a jQuery script that dynamically adjusts the margin-top of div elements based on t ...

javascriptjqueryhtmlcsscss-float

Transform JSON String into Object using jQuery

Recently, I came across a JSON String in this format. {"label":"label","label1":"67041","label2":"745","label3":"45191","label4":"11‌​464"} I needed to convert it into an object structure like this [{"label":"label","label1":"67041","label2":"745"," ...

javascriptjqueryjson

What is the best way to continuously loop the animation in my SVG scene?

After designing a SVG landscape with an animation triggered by clicking the sun, I encountered an issue where the animation only works once. Subsequent clicks do not result in any animation. Below is my current JavaScript code: const sun = document.getEle ...

javascriptcssanimation

Google Extension PHP Plugin

Is it feasible to integrate a PHP file into a Google Extension for Chrome? I've been exploring the idea of creating an extension and most resources only mention HTML, CSS, and JavaScript. Any guidance on using PHP in the extension would be highly valu ...

phpjavascripthtmlcssgoogle-chrome-extension

What is the time stamp format of 1651928421543667000?

Recently, I have encountered an issue with an API returning a timestamp as 1651928421543667000. Despite trying various PHP functions like strtotime(), datetime(), and strftime(), I am unable to find the correct format for it. Can anyone provide some guid ...

javascriptphpjsontimestampunix-timestamp

Comparable user interface on par with what we find on Windows Phone 7

I'm quite impressed with the innovative interface experience of Windows Phone 7. It stands out compared to other interfaces, whether on mobile devices, desktops, or the web. Despite its uniqueness, it remains highly usable. Overall, a great step in th ...

windows-phone-7javascript