I am experiencing this white margin where tiles are missing only on some devices like Huawei with a 16:9 screen like the P20 Smart. You can see that the view size is correct as the buttons are placed correctly just the tiles are not loaded correctly. I am pretty sure it's some internal issue of Google Maps SDK but any clues how to fix it would be appreciated.
The view is shown as a dialog on top of Unity game.
Anyway, you can set size of your map view larger then screen and use Map padding for correct placing of map controls and Google logo. Something like that:
Updated explanation
For "small view in the middle of the screen" that small view should have parent layout for hiding invisible areas:
Related
I'm creating a (react) component library for documentation and testing purposes for our company. A kind of style guide. Some of our components have styles that depend on media queries to scale up and down nicely.
Our style guide site is responsive but I would like to be able to render different screen sizes. As an example, I wanted to show how the site header looks like in desktop and mobile without having to resize the window, as if they were multiple iframes with different zoom levels.
So I was thinking if it was somehow possible to make html elements think they are being rendered in a larger or smaller screen by changing their zoom level. A sort of scaling, while staying within the same limits.
In google chrome there is a tool who do this.
Right Click > Inspect the element > The mobile icon at the top corner right
Check my screenshot below.
Cheers mate ;)
I got pictures in the isolated storage and i want to display them as well as the WINDOWS PHONE APP does.
I would like to reproduce the same effect that the Windows phone app does when you open the camera roll and you scroll through the images..
I find it particularly difficult because of the image orientation (horizontal and the vertical ones). I fit the vertical ones, but as soon as there are an horizontal picture any fit procedure fails!
Example?
thank you
Take a look at the MediaViewer class in the Silverlight Basic Lens sample. http://code.msdn.microsoft.com/wpapps/Basic-Lens-sample-359fda1b
I've disabled dragging on my Google Maps component, here's an example:
http://jsfiddle.net/qr2BJ/7053/
However when I'm browsing on my iPhone I can't swipe down "on" the map. So, when the map is taking up most of the screen, mobile users won't be able to swipe (scroll) down to view the rest of the page.
Is there a way to fix this, apart from sticking an extra empty div on top of Google Maps?
I had the same problem on android devices. As they are running on webkit I guess the cause is the same as for iphone. Anyways, a post on the following link addressed the issue and the first answer worked for me: Embed Google Maps on page without overriding iPhone scroll behavior
I used google maps api v3 to add a map to website. I turned off all the features and did an overlay of the united states. I turned off everything so that it can be zoomed in or panned. It works exactly how we want on the website, but when using and iPhone it can't be scrolled. How do I make it so that it is scrollable on an iPhone.
Thanks
I believe on the iPhone you need to use two fingers to scroll in things like iFrames, or divs with overflow:hidden. Maybe it's the same with your map.
I created a mobile web site that uses Google Maps. However, the font-size of everything on the map is way too small for a mobile device. Is there any way to increase it?
I already tried using webkit's proprietary text size adjust property and it didn't work:
-webkit-text-size-adjust:200%;
I tried the CSS transform solution (thanks for the idea, Jimmy!) but I ran into a problem. The "transform" doesn't affect the scaling of the touch input. So when you try to zoom or drag the map, you get very disconcerting effects!
I ended up implementing a solution I found here:
http://sunpig.com/martin/archives/2012/03/18/goldilocks-and-the-three-device-pixel-ratios.html
Basically the article explores the difference between physical pixels and CSS "pixels". There is a scale factor between the two. Its default value on most mobile browsers seems to be the reason why you often see pages designed for desktops looking very "zoomed out" with tiny text on a phone. And it also seems to cause unreadable Google Maps!
My problems went away when I added this HTML snippet into my "head" section:
<meta name="viewport" content="width=device-width">
One way to increase the font size is to magnify the div containing the maps. This will result in a somewhat blurry map render, and loss of controls because of the repositioning of the view. Use CSS transform property with a value of scale(2) to zoom 200%. Not a very nice solution, but it's all I can think of.