I have a application using Google Maps API and I have developed a controller to set full screen when user click in a button using this:
https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode#Non-standard_methods
But the problem is in full screen show more map than in normal screen. And the application must show excactly the same part of the map in both views.
Is it possible to do this?
Thanks in advance!
Related
Background of the problem - I am creating a simple HTML landing page using create react app node package manager.
I started having problem when I tried to make the website mobile friendly.
Specific problem -
When I check the create react app public folder, I do not see anything wrong with the viewport meta tag and it is as is should be.Here is another screenshot.
When I open the website on the mobile its zoomed in and the background color is out of proportion. I am guessing it is happening because of viewport meta data not getting rendered correctly.
Anyone with a react and CSS skill combined will be able to figure out what is making this happen. I am attaching a gif of the problem below.
link two
I need help with fixing the viewport meta data for a landing page created using Reacts scaffolded 'Create react application'.
I am trying to make the site mobile friendly however am facing the following issue. Kindly load the following link on a mobile device or mobile simulation mode in the browser.
http://sagarmunjal.github.io/learnreactjs
Also, when the page resizes. I would want to learn how to make the text resize/ adjust according to the window being resized.
The code is available at master branch. https://github.com/sagarmunjal/learnreactjs.git
Any solutions are highly appreciated.
Your .Hero-h1 has a font size of 3.5em which is making the title stretch outside of the page making it bigger than it should be. This might be a problem with more of your layout.
I suggest you look into media queries if you want to make a responsive website. Here is a good article on the subject: https://css-tricks.com/css-media-queries/
this is bit of a tricky one for me to explain, so will try my best..
If you go to the below link, you will see I am loading up a 'geo Map' type view using javascript. (all code should be available via the sourecode, I was unable to share via JSFiddle)
Map Demo
What I'm trying to accomplish, is for this view to be full height on a mobile device, and able to pan left and right across the map.
Currently, viewing the map on a mobile device (ie, an iPhone), you see a portion of the map, which is fine, but you're unable to pan. It has like a rubber band effect. I noticed that you can pan once zooming, but otherwise im struggling.
What is the best way to get the view to appear in full height, and be able to pan across the width on a mobile device?
Not sure what I'm doing wrong here.
Thanks in advance for any advice and suggestions!
I'm pretty new to the Google Maps API.
I'm building a simple Maps App for our TV platform here at work, the TV uses a custom webkit browser and I've confirmed that the Maps API works well on it.
Currently when you load a simple app like this on our TV (Code is given in below links):
http://markpaul.name/dont-delete/other/sample-maps-app.html
You first need to use the mouse to "click" on the screen to "focus" the map. Only after this, the map embed "activates" and you can use the up, down, left, right keys to navigate the map.
The problem I have is this; on a TV you dont have a mouse so you cant "click" to "focus"!
Is there anyway you can programatically "focus" the Google Map so I can use the arrow keys on the remote (which usually map to the keyboard up, down, left, right keys) to navigate the map?
Thanks in advance,
Mark
UPDATE:
My code can be seen here - http://codepen.io/newbreedofgeek/pen/EaugH
The full screen app in codepen is here - http://codepen.io/newbreedofgeek/full/EaugH
The hosted full screen app (minus autogenerated CodePen markup in full screen codepen view) is here - http://markpaul.name/dont-delete/other/sample-maps-app.html
I checked you source code and my feel is that somewhere the map's position is getting changed. So by triggering the Google map's resize it would fix your problem.
google.maps.event.trigger(map, 'resize');
Add the above code after initializing the Google maps. This would fix the problem.
I am using jQuery Tabs to show different <div> contents in tabs. My tabs are:
Description | Amenities | Pricing | Images | Location Map
The problem happens when I switch to the Location Map tab, in which I am using Google Maps. The pin is not showing at the center of the map. But when I use the same Google Map script without jQuery Tabs, then it works fine. Is there a way to have the Tabs, but still have the pin at the center of the map?
It is showing dead centre for me, which browser are you using?
Here is a screenshot of it working in Chrome 17 on Mac: http://d.pr/UNiS
Actually it is showing there as well, but the problem is that you have a higher zoom level for your map. You can reduce the zoom level in your map to show the pin at center.
What is the best way to show a full-screen google map on both iPad and iPhone and even when the orientation changed as well.
Edit: I'm implementing mobile application in jQuery mobile. not iOS application.
Thanks.
Basically Google Mps API renders the map into an div(some cases in an iframe). Anyway you should specify an div to be your Map Canvas. if you change size of the div, then size of the map will change.
So if you define width and height of the canvas to 100%, it will always show the map covering whole screen.
#mapCanvas{
width:100%;
height:100%;
}
You need to create what is called as universal app if your intention is to develop a single app for ipad and iphone.
Check this link out on some tricks on creating such an app
http://developer.apple.com/library/ios/#documentation/iPhone/Conceptual/iPhoneOSProgrammingGuide/AdvancedAppTricks/AdvancedAppTricks.html#//apple_ref/doc/uid/TP40007072-CH7-SW6