Google Maps causes horizontal scroll on mobile - javascript

I'm using Google Maps JavaScript API (v3) to display two maps on my website. When viewing the this page on mobile (Asus Zenfone 2 with Chrome), I see a blank page that is caused by an unwanted huge horizontal scroll - and it's the map's fault. When I remove the map from the code, there is no horizontal scroll. When I use overflow: hidden on the map's container, or even the <body> - the scroll is still there. Even when I use display: none on the map's container, I still have this annoying scroll.
Any suggestions on how I keep this map in mobile view, and get rid of this scroll?

Place the map inside of a div that sizes itself responsively, then call google.maps.event.trigger(map, 'resize')
You can also prevent this from happening my making sure that the div is built before the map is rendered, for example by adding a 'show map' button or an event listener after the user scrolls past a certain point.

Turns out the map generates a span at the end of the <body>. The fix was simple:
body > span {
display: none;
}

Related

How to customize Gmap?

I am using Gmap on my website and I notice that i sets position:relative on the #map. How do I change this? I don't want any positioning on the #map div. I looked over the gmaps.js and couldn't find it.
Another problem is how to make the gmap load in satellite mode by default instead of map?
Also can I get rid of all the other things I get by default - zoomer, arrows, text at the bottom right etc. I just want a clean map in satellite mode.

Google Maps: Relative to Fixed Positioning

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)

Detecting div size change not working in IE

I have a little Google Map app here: http://crocdoc.ifas.ufl.edu/projects/saveyourlogo/map/
This page is being embedded into the "Actions" tab on this page via iframe: http://saveyourlogo.org/en/programs/crocodile/american-crocodile/
Since that page begins with the "Actions" content div set to display:none, my map div (#map_canvas) starts out at size 0x0 and the map can't initialize properly. The Google Maps API says to simply use google.maps.event.trigger(map, 'resize'); once your map div is resized.
Since I don't have control of anything outside my little map's iframe, I can't attach the resize function to the "Actions" button. So I'm trying to detect a change in the #map_canvas div's size, and then fire the resize function. Since (I believe) you can't normally attach a resize event to a div, I've used Ben Alman's jQuery resize event script. (StackOverflow isn't letting me post more than two links, but it's easily Googled.) It is said to work with IE8, and I've seen that the examples on his site do.
It works perfectly in Firefox, but the resize event doesn't fire at all in IE8. (When I un-comment out the width alert, it does not display in IE8.)
function reset_map() {
google.maps.event.trigger(map, 'resize');
map.setCenter(center);
map.setZoom(zoom);
}
$('#map_canvas').resize(function() {
// alert(document.getElementById('map_canvas').offsetWidth);
reset_map();
});
Any idea why? Or perhaps suggestions for a more elegant solution?
UPDATE:
I've tried building my own little script that takes the offsetWidth of the div every 300ms, and then compares it to the last, but I just end up crashing the browser. Is there any way to detect this change from display:none to display:block without using a constant, quick loop? I know Ben Alman's script mentioned above uses one every 250ms.

Bing Map CSS position:fixed InfoBox issues

I have a map that is position:fixed on my page. So when I scroll down it stays with you on the page When I roll over the pinpoints on my map the InfoBox displays in the correct position, but when I click one of my results which triggers the Infobox to display it is relative to where the map was when the page loaded (so usually high up on the page and not down where I scrolled it). I am trying to manipulate where the info box displays using the ShowInfoBox, but it always needs LatLong Coordinates instead of pixel coordinates. Since the map moves up and down the page the pixel location could change depending on how far you scroll.
Right now I am just poitioning it with javascript after it loads but that is a less then ideal situation as I run into all sorts of problems.
It's probably a bug with Bing Maps that it doesn't position the infobox correctly. You'll have to work around it. The infobox most likely has a unique ID or a unique class that you could select. Using that you can manipulate the infobox once you set the new Lat/Long position.
When you display the infobox, after you call the show method with the Lat/Long you should then reposition the infobox using CSS based on the scroll positon. So, if the page has scrolled down 100 pixels you need to add 100 pixels to the "top" css property. The same goes for the "left" property. This should always result in your infobox appearing in the correct place.

How do I hide and then reveal a map canvas using Google Maps 3?

I'd like to render a Google Maps canvas to a hidden div and then, when an event is triggered elsewhere on the page, make the div visible again.
Unfortunately, when I try styling the div with "display:none" and then later displaying it, I get just a gray box where the map would be. If I eliminate the display:none tag and the showing logic, the map works fine.
Anyone have any ideas?
You can toggle visibility: hidden on; that will make everything keep its dimensions (while still remaining invisible). This would help if Google is asking the page for how wide and tall it is. Keep in mind with visibility: hidden the map canvas will still take up space in the page; if this is not something you want then you can do something like position: absolute.
Set the div's opacity to 0.01 or some such - that makes it practically invisible.
Got this to work by setting the map's div to position:absolute and left:-10000px.
Then I just set the position to inherit when I want it to appear.

Categories

Resources