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.
Related
As a desktop browser user of Google Maps I'd like to switch off the Zooming that occurs every time I use my touch-pad two-finger gesture to scroll up/down.
How do I get hold of the appropriate DOM object handle?
So I can script Greasemonkey (or similar) to set the scrollwheel option to false as shown in this previous answer (which is for developers who use the GoogleMap API on their own sites)
How to disable mouse scroll wheel scaling with Google Maps API
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 trying to use Google Maps (JS APIv3) in Chrome, in a kiosk mode, intending to use it with and infra-red touch frame. IR touch frame in a HID-mode (emulating not a mouse, but rather a touch device) works perfectly with maps.google.com, allowing to pan map with a finger, but won't allow it on an embedded map.
I assume that Google uses some sort of additional library for touch events, but looking into source code haven't given me any hints.
Anyway, is it possible to enable panning in an embedded google map for a generic touch device?
Thanks in advance!
Well.. even they have document on this control option, they don't seems to provided ways to enable the touch to pan event....
One work around might be to set to user-agent as chrome on Android.
Using the android webview component for show Google Maps through API v3 it seem all the map "engine" is locked until touch is pressed. I tested the default browser also. If I go to the google maps web site and start move the map touching the screen is there always a point where there is a gray area of the map still not loaded. In standard Desktop browser this "missing" part is loaded instantly but under android webview this part remain unloaded for all the time of touch pression. If I stop touch the screen this missing image is loaded. This is a very bad behaviour mainly because the same problem happen also with javascript code. I need to get the google maps api "center_changed" event on real time but cause this problem the event is not delivered for all the time the touch is pressed (moving the map). The event is delivedered only on touch leave. Someone noted this strange behaviour and know a workaround for enable "real time" interaction through javascript code?
Thank you
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!