So here's my issue: I'm writing a web-app using the Google Maps web API v3. When zooming to a building that shows a floor-plan, the floor controls do not show up, as they do on Android. When opening Google maps for Android, and zooming to the same building, I get a control on the bottom right-hand side of the screen that shows the floors (B1, 1, and 2), and selecting them shows that floor. Not so using the web-API. At first I thought it might be as simple as specifying which controls were visible/adding a control, but I'm not coming up with anything.
Does anyone else know how to get these buttons to show up?
Note: Even on Google's website (maps.google.com), in classic mode, these buttons do not show up when zoomed in on a Building with a floor plan, so maybe this is a lost cause...
I was requested to answer this question so that it's not sitting in the unanswered queue.
At the time this question was asked, Google Maps for web didn't support the floor buttons (to the best of my knowledge), so we moved to using the native SDK's on Android and iOS instead.
Related
I'm trying to create a custom map using Flutter Web that would be capable of displaying custom statistics for a place for COVID-19.
First we'll have a interface that display statistics for our entire planet:
https://google.com/covid19-map/?hl=en (Just like htisw)
Then the user can click on any country to zoom-in with probably an ease-in transition to see the number of cases in each state or province of that country. Assuming that I am able to fetch the exact co-ordinates of the epicenter in that country, I would like to deepen the shade in those parts in such a way that it lightens out as we move towards areas which have a lower number of cases.
Is it possible in Flutter Web?
I came across this plugin (thanks to this thread on SO Openstreetmap in Flutter?)
https://pub.dev/packages/flutter_map
but it doesn't explicitly say that it supports Flutter Web.
I tried fetching the tiles from OSM(Open Street Map) and displaying the maps on Flutter Web with the help of the example given in the above site https://pub.dev/packages/flutter_map#open-street-map-provider
But it didn't really display anything, maybe because a certain widget or function didn't work as expected.
According to your experience, which is the best way to achieve what I am looking for?
If possible, please describe the answer in such a way as if you were me and trying to do what I am doing.
Flutter_map doesn’t support flutter web.
You may check out the below Flutter Maps widget which has support for all the platforms including web.
https://pub.dev/packages/syncfusion_flutter_maps
Regarding the requirements you have mentioned, you can try the below things.
By dynamically changing the focal point and zoom level based on the click position, the easing effect can be achieved.
https://help.syncfusion.com/flutter/maps/zoom-pan#update-the-zoom-level-programmatically
With the combination of dynamically adding shape sublayers on top of the tile layer and color mapping for that shape sublayers, you may achieve this.
https://help.syncfusion.com/flutter/maps/shape-sublayer#shape-sublayer-on-tile-layer
https://help.syncfusion.com/flutter/maps/shape#range-color-mapping
I set up a Wikitude project, but I replaced the basic Android GPS with IndoorAtlas. It works quite well, the POIs are appearing and the phone is able to detect its location within 5-7m accuracy.
My problem, that the Wikitude POIs are appearing in a different direction. They should be behind me (south east) but they appearing in north-NorthEast.
I followed this tutorial:
http://www.wikitude.com/external/doc/documentation/latest/android/browsingpois.html#browsing-pois
No radar and POI background appear, just the text.
Do any of you have any experience with Wikitude POIs with wrong appearing ?
Thanks,
Karoly
Notice that "POIs appearing in wrong direction" issue is either a compass or a location-provider issue.
I recommend you to display location reported by IndoorAtlas (incl. accuracy) in a debug window/div and test on several devices.
Hope that helps
I am using Google Maps Javascript API for rendering a map. When we zoom out on the map there is a brief moment that we see a grey area (while waiting for new tiles). Is there any workaround for this behavior in order to provide a similar user experience as mobile devices (Google Maps SDK Android and Iphone), where we always see a map on zoom out and not that brief grey area around the map?
The grey area around the map exists because it takes time to access the image tiles over the Internet connection from the server. My presumptiosn as to the reason why the mobile version does not do this are either that they have a special function that accesses the cache instead of re-querying the image on mobile, or that mobile simply has a built-in cache of, say, the entire world at zoom levels 0-3.
In other words, I do not know of a way to avoid the grey space. To get a work-around would require re-writing a good portion of Google's code, specifically to access the browser's cache. Even if you did succeed, a first-time user of the webpage would still get the grey space simply because a cache does not already exist.
My advice is to ignore it, as it is "brief" (and likely will not have much of any impact on the user experience), and that there are no easy fixes.
Brief Explanation
I had not noticed this until my designer sent me a PSD of a new website including a Google Maps page with some cool features that I did not recognise...
I then investigated this further to try to find these features and where they came from. Surprisingly, the new features are only visible when you go to the Google maps page on a Mac (I was using Chrome).
See these two different screen shots:
On a Mac
On a PC (Google Maps API)
The Differences
There is a button after the search box
The Mac version has integrated Google Plus and sharing capabilities
The zoom buttons are entirely different
The map type buttons are entirely different
My Question
So with the above in mind, is there any possible way one could make the Google Maps API Map look like the one illustrated in the first image?
I have looked through the API reference and it seems that there is nothing other than a basic search box... I cannot find any information on adding 'sharing' capabilities, or restyling the zoom buttons etc.
Can one come up with an some ingenious solution to this as the design of my clients site rather depends on the features on this map?
It looks like you're being served the updated version on the Mac and the older version on the PC; The user will need to opt-in to the new service on the Google Maps site to overcome this.
If you need more control over the design of your maps then Mapbox might be useful: https://www.mapbox.com
I started to create a script that allows me to split a big image into small pieces,to zoom, drag , etc.
I want to know what are the possibilities to load the small images just in the active area like in Google Maps (visible). I thought to try to determine the approximate location of one element with some calcules and to determine the element with document.elementFromPoint, but it's not a cross browser solution.
Another solution could be: loading from the beginning just the images from active area and when the user drag or zoom the script must calculate the elements that are new in active area.
see here what I mean active and inactive area: http://i.stack.imgur.com/mRY5K.jpg
PS: I searched the entire site but I did not found an answer. I read also this topic : How does Google Maps work? , but I would like to develop myself the script. (I don't need the complexity of Google Maps, just few features)
Look into DeepZoom. Its an opensource project that does exactly what you want. Its written for .net... but i think it might be what your looking for
DeepZoom is created by SeaDragon and is built for silverlight but they also have a Javascript implementation too called SeaDragon Ajax