I'm trying to create an InfoWindow on a Google Map using the V3 Javascript API, the window needs a fixed size, and no scrollbars. The window I'm getting automatically gets a height that I cannot seem to override.
There are numerous posts here on SO with answers suggesting setting the height of
.gm-style-iw{
height:something!important;
}
or passing the height in as a constructor argument
new google.maps.InfoWindow({
content: '<my custom markup>',
height : 500
});
or setting the height of my custom content to which the window wrapper will automatically adjust, but these aren't working : the gm-style-iw element and my own content get their proper height, but the window wrapper ignores the size of its content and makes its content scrollable. Suppressing scrollbars is not viable, I need the window to be large enough for scrollbars to be unnecessary.
After examining the infowindow structure, it seems to consist of an outer border that's painted onto the canvas, some inner wrappers with overflow:auto; that prevent spillover, and then the custom content we can inject into the window. The outer content is controlled by some Google script, live. I can see changes I make in-browser being undone, and the tricks like forcing an InfoWindow redraw always leads back to the same incorrect size.
How can I accurately adjust the size of the wrapping window?
Have you tried making your map itself bigger?
There are also some great questions on here that have similar questions to yours you may want to look at the related sidebar ->
Here's one that seems like it may work for you:
How to set a specific height for Google Maps infowindow?
Hope this helps! Best of luck!
Related
I'll try my best to explain this as clearly as I can. I'm also using the Bulma CSS framework if it matters. So the layout I'm trying to create is this.
I created a working version that can be seen in action here
However, in the working example the vh/px of the scrollable box is fixed to a certain amount and I'm using tiles from the Bulma CSS framework. I tried using columns and the same outcome occurred. If I was to not make it a fixed amount, it'll just extend past the screen, but I want it to fit the entire screen regardless of the size and the only scrollable part should be the green box I've showed above. Also, the box may not even have enough content to become scrollable in some cases, and in that case I would still like it to fill up the rest of the height with the box even if it's going to be empty.
As you can see here, if the height isn't explicitly set, it'll keep going past the screen, but if it's properly set it will work as intended. I'm wondering how I can make this height fill the space properly no matter how it's resized and etc.
Any help would be appreciated!
It sounds like you should set the height property on the wrapper of the content and set the overflow: scroll; Then all of the contents will be the height you set and have scrollable content.
According to the Mapbox GL JS Quickstart guide, it should be straightforward to implement a map on a website using the Mapbox CDN. Unfortunately, that is not the case if the map is located inside a Bootstrap modal, which does not have a predefined width, a property that is set only after the modal is opened.
The result is a Mapbox canvas loaded with a default width of 400px, which may differ from the modal width and create a terrible user experience.
Also, if one opens the modal and then resizes the browser window, the map automatically fits the whole horizontal space as expected, which seems to be a JavaScript response to a resize event.
Here follows the related code.
HTML file
<div id='map'></div>
CSS file
#map {
height: 300px;
}
JS file
mapboxgl.accessToken = '...';
var map = new mapboxgl.Map({
container: 'map',
center: [..., ...],
zoom: 10,
style: 'mapbox://styles/mapbox/streets-v11'
});
I've tried to load Mapbox inside a Bootstrap 3.4.0 modal, as I was previously able to do when using Google Maps or Bing Maps, but in both cases embedded inside an iframe. Therefore, I was expecting to see Mapbox filling the whole modal as Google Maps and Bing Maps did.
Instead, the Mapbox interface (bottom left logo and bottom right info button) was correctly positioned inside the modal, at its borders, but the canvas containing the map was incorrectly positioned.
Finally, setting a predefined width to the #map CSS property is not a solution. If the width is set to a fixed width in pixels, it may not display properly on all window sizes, while adding a fixed percentage width, say 100%, did not do the trick.
A similar issue has already been solved for the Leaflet JavaScript library here and here.
As it turns out, the lack of a predefined width for the modal leaves Mapbox with no option but to initially load a default width (400px in this case). Because opening the modal does not trigger any event that Mapbox may be listening to, such as the window resizing, Mapbox keeps its default width no matter the size set for the modal once it is displayed.
Therefore, to make the Mapbox canvas to fill the entire width of the modal, one must link the opening of the modal, which will finally set a width to it, to the Mapbox resize method.
The Bootstrap event of interest here is the "shown.bs.modal", which is triggered once the modal has been displayed to the user and the CSS transitions have completed. This guarantees that a width has already been set to the modal.
The solution is to add the following code after the 'map' variable definition in the JS file:
$('#modalID').on('shown.bs.modal', function() {
map.resize();
});
Make sure to change 'modalID' to the same 'id' used to identify the respective modal.
I'm working on this website right now http://antoniobrandao.com/v4
All objects are placed in absolute positions. Unfortunately this doesn't enable vertical scrolling.
I've read that using position:static in a parent element (in my case, the DIV sections-wrapper ) would do the trick, and yes a scrollbar appears, but the contents seem visually destroyed when I attempt to scroll after setting position: fixed to my sections-wrapper DIV.
I'm new to HTML5 so if anyone could give me a hint I would be most thankful!
thanks
I found out the answer to my own question.
The solution was to manually (via JavaScript) set the height of my "sections-wrapper" and "background" to match the height of the contents of the sections within the "sections-wrapper".
This is because the "sections-wrapper" doesn't know automagically how tall is the stuff within itself, so we must tell it ourselves. The downside is that we must always be updating this values when the contents change height within the wrapper. Not too bad.
so if the stuff within my wrapper is eg. 1200px:
$('.background').css('height', '1200px');
$('#sections-wrapper').css('height', '1200px');
I have added image map on my map based web page.
Since it is supposed to work on different resolutions, hot-spots defined in the image map have to be dynamically changed when browser viewport size changes.
ex: when I initially place a hot-spot in India and change the browser size it should still
placed on India not in somewhere else.
I saw that there is a property called "coords" containing 3 parameters.
Does these properties dynamically change when it changes the browser viweport size?
Or can I make them dynamically changing?
Or going to javascript is recommended?
(As far as I tested they are fixed to absolute locations.)
I did some research on imagemaps and found that;
They do not dynamically change their position when it changes the browser viewport size
I didn't tried to change'em dynamically. Hopefully you may able to do it with javascript
javascript was the solution for my problem
with the use of javascript ;
Browser viewport width and height can be taken
And relative to that width or height you can position the elements
imagemaps in dreamviewer is not a solution for this matter
The effect I'm looking for is that I have a div that is floating right with a Google map inside it and when the user scrolls down, I want it to be fixed at top:0px. This is basically what Yelp has for the map on their search page. There's been a few questions that are similar that ask about using JQuery to change the class of a div to fixed once the user scrollsdown but with Google Maps, I can't seem to get the effect to work.
The main reason is that Google Maps is using some sort of javascript that is loading after my own javascript that override the position to absolute and I can't change it through Jquery's css method or anything. So I've added a wrapper that is floating but adds a fixed class upon scrolldown. It fixes to the top of 0px fine but because it was floating, once the position become's fixed it jumps to the left and clobbers my other content.
I found a tutorial online, but it might be deprecated now? It wasn't working.
I had the same problem. All you have to do is create a DIV inside another.
Like this:
<div id="outDIV" style="position:fixed; top:0">
<div id="inDIV" style="width:100%; height:100%">
[map content goes here]
</div>
</div>
I know this is way old, but maybe someone else coming along can get some info out of this one.
Yes, you can add another element encasing the map element, but if you want to get around that you can set a listener for a tilesloaded event and then undo what google's done.
In api v3, you can do it like so:
google.maps.event.addListener(myMap, 'tilesloaded', function(){
document.getElementById('map-id').style.position = 'absolute'/'fixed'/'potato'/'whatever';
});
I'm sure there are issues that go with setting a position to a map beyond what google likes, but if you want to keep the number of elements in your document to a minimum (you should really want to), this would be the way to do it.
(edit: adding quotes)
You just needed to pick apart the specifics of what Yelp was doing a little more, I think... their column is floated as well (examine their markup... it's #searchLayoutMapResults), but then inside that, the div #searchLayoutMapResults is the one that gets position: fixed added to it (via the className fixed), so it doesn't change the position of the floated column. So you probably just want an additional wrapper on the map, and add the fixed positioning to that instead of your floated container.
(the markup I found was based on this page)