If you use the satellite GMapType using this Google-provided example in v3 of the API, the maximum zoom level has a scale of 2m / 10ft , whereas using the v2 version of another Google-provided example (had to use another one since the control-simple doesn't have the scale control) yields the maximum scale of 20m / 50ft. Is this a new "feature" of v3 ?
I have to mention that I've tested the examples in the same GLatLng regions - so my guess is that tile detail level doesn't influence it, am I mistaken ?
As mentioned in another question, v3 is to be considered of very Labs-y/beta quality, so use in production should be discouraged for the time being.
I've been drawn to the subject since I have to "increase the zoom level of a GMap", the answers here seem to suggest using GTileLayer, and I'm considering GMapCreator, although this will involve some effort.
What I'm trying to achieve is to have a larger zoom level, a scale of 2m / 10ft would be perfect, I have a map where the tiles aren't that hi-res and quite a few markers. Seeing that the area doesn't have hi-res tiles, the distance between the markers is really tiny, creating some problematic overlapping.
Or better yet, how can you create a custom Map which allows higher zoom levels, as by the Google Campus, where the 2m / 10ft scale is achieved, and not use your own tileserver ? I've seen an example on a fellow Stackoverflower's GMaps sandbox , where the tiles are manually created based on the zoom level.
I have seen the codebase for a custom Map on mapki, but this involves having a tileserver, can't you just use Google's tiles for a specific zoom level and then swap some of them (depending on tile.x and tile.y) with custom tiles, when the zoom level is higher than 19 ?
I don't think I'm making any more sense, so I'm just going to end this big question here, I've been wondering around trying to find a solution for hours now. Hope that someone comes to my aid though !
Thank you in advance !
Insights after a further investigation :
After investigating some more, it is indeed true - Maps v3 does allow a max zoom level of 22 (!), equating to a scale of 2m / 10ft, but only when the map type is Satellite, not Hybrid ! – Dr1Ku Apr 14 at 9:59
Fiddled around with the Automatic Tile Cuttor Photoshop plugin as well, couldn't produce the results I wanted (didn't know how exactly to scale my map so that the tiles would be perfectly arranged), using an ImageOverlay, doesn't look so pixel-y. – Dr1Ku Apr 14 at 10:00
Have since then ported my GMaps v2 code to v3, smooth sailing. And yes, having a Satellite Map (not Hybrid !) allows a max zoom of 22, tricky placed markers (close to each other) are rendered way better. Adding an overlay + custom tiles (eventually) for "Sorry, no imagery here" did the trick in the end – Dr1Ku May 17 at 20:17
I just wanted to post an update here that v3 of the Google Maps API is now out labs and has feature parity with v2.
Also v2 of the Maps API has been deprecated, so if you're looking for better zoom features, it looks like your best option is going to be to use v3 instead of a v2.
Related
We are experimenting with using OpenLayers within a PHP application that displays data from PostgreSQL/PostGIS and GeoServer.
The initial use of OpenLayers is terrific except for one problem:
A lot of our data has very small extent eg < 0.1m.
When we zoom in to look at the features they disappear.
We have read the documentation, looked for examples, tried setting zoom values > 19 but to no avail.
There are NO scale thresholds in the SLD so this is not the issue.
Can anyone suggest how to get around this? Is there a NO-LEVELs mode for OpenLayers as we are not interested in mimicking Google Maps etc.
I have noticed that the zoom on maps.google.com behaves differently (read: smoother) than my custom map using version 3 of the google maps api. I later found out that this also applies to the demo from Google here.
Is there a way to get the same smooth zoom feeling on maps using the Google Maps API v3?
I've been trying to search around the net for a solution, but all I can find is people asking how to do zoom animations, which is not what I'm looking for.
The native Google Maps site maps.google.com uses the HTML5 canvas element for rendering maps. The Google Maps API v3 does not. It is currently (as of late 2015) not possible to get the smooth continuous zoom behavior using the Google Maps API.
After searching Google docs and the web for answers without results, I took some time to understand how the API v3 and how maps.google.com basically work to render and display maps. There's one major difference that makes immediately clear why a continuous zoom won't work using the API:
Google Maps API v3 creates a map made of image tiles each rendered into single <div /> containers with a fixed default size of 256 x 256 px. When switching the zoom level every single tile has to be re-rendered with a new image (of whatever type, possibly dynamically styled with custom overlays and so on). This is a very expensive task, so every additional zoom step adds extra resources to be loaded and extra computation costs for re-rendering the whole scene via DOM manipulation. A fluid zoom experience is nearly impossible, even with modern browsers on high CPU/memory machines.
maps.google.com uses the HTML5 canvas object for rendering map scenes (I'm pretty sure there's a API v3 style fallback variant for old browsers). Drawing in a natively supported canvas object is way less expensive than replacing images in DOM elements. Google uses a vector graphics based approach which basically allows to do a continuous zoom into detail without the need to fetch additional resources. Additionally needed information for a specific zoom level though could be fetched as smaller chunks of data and applied to the drawing routines.
I must admit that I don't know how this works in detail. It's just what I discovered by inspecting the source and I hope it pretty much sums up why a "smooth zoom" is currently not possible using the maps API. Anyway, let's look forward to the Google Maps API v4!
There are other JavaScript mapping libraries that allow for smooth zooming, such as Mapbox-GL and Cesium. They both use WebGL, just like maps.google.com.
https://www.mapbox.com/mapbox-gl-js/example/fitbounds/
https://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=Camera.html&label=Showcases
I think it now depends on whether Google Maps is in Lite Mode, which seems to be their name for the old-school, image tile-based maps, as opposed to the canvas-based maps.
According to Google Maps' documentation for System and Browser requirements, Maps will disable 3D for certain video cards, and for some video cards, it goes beyond that and only lets you use Lite Mode.
I have a large high-resolution image that I am using for an overlay using Google Maps v3 API. This works fine for desktop and laptop computers with a reasonable network connection, but unsurprisingly it does not work so well for mobile users.
What's the best/easiest way to break the image up into 2D tiles at the various zoom levels so I can act as a tile server for Google Maps via the API?
Is there a program that will reliably generate the tiles for me and provide me with the necessary zoom and coordinates for each resulting tile and/or give me the correct tile if I provide the zoom and coordinates?
Is it pretty easy to write a tile server to do it on the fly once you gather the right info? Perhaps there's source code out there that I can use as a model? (I found a tile server at http://blog.gmapify.fr/a-map-tile-server-part-2-understanding-google-maps-tile-overlays-and-building-up-a-tile-server which is certainly helpful, but it doesn't serve tiles from a source image, so I'd have to at least figure that part out...)
Or perhaps there is step-by-step algorithm that I can manually follow if that's more straightforward? (Since it's only one image and it covers an area on the map of maybe a square mile, manually doing it like that is perhaps feasible if not preferable.)
you can check MapTiler http://code.google.com/p/maptiler/. It can generate the tiles you need.
Tile server is really easy to write. The easiest way is just to host static files (your tiles) in a directory structure. The directory structure is then usually servername/zoom/x/y.png (or zoom/y/x.png). Such structure is also produced by MapTiler. MapTiler also generates an example web page using the tiles (but I guess it uses Google Maps API v2).
Information about using your tiles in Google Maps API v3 can be found here: http://code.google.com/apis/maps/documentation/javascript/maptypes.html#CustomMapTypese
You can do the entire thing clientside without tile pre-cutting
See https://github.com/Murtnowski/GMap-JSlicer
slicer = new JSlicer(document.getElementById('map'), 'myImage.png');
slicer.init();
Very simple.
There's a really good video tutorial on making maps with maptiler, which can be found here:
Mobile Maps That Aren't Terrible
It focuses on mobile maps, but also covers maptiler and other basics. I found that very helpful.
How do I implement the red dots as seen on the Google Map linked below:
Red Dots
UPDATE
I'm using Google Maps version 3 (not 2)
UPDATE 2
I found the following Presentation by Google talking about what I want to do.
docs.google.com/present/view?pli=1&id=dggjrx3s_153hdf2s6cm
It's slide 27, called "Tiny Clickable Markers". However, they do not talk about how I implement these kind of markers nor does it answer my questions above.
Unfortunately, those dots are -- as far as I know -- a special feature of Google's commercial Maps application (distinct from the maps api, v2 or v3), meaning it's unavailable for api use.
As for how it actually works, it appears they are not being added to the map in the standard fashion of the larger, tear-drop markers, each of which is an individual div being absolutely positioned on the map. The tiny red dots are actually a layer of image tiles being baked on Google's servers, and then these tiles are added to the map as images (I'm not sure how they're made clickable). Anyway, all this makes sense, because adding that many individual divs to the DOM burns up a lot of CPU. (Disclaimer: this is just my guess as to how it works).
All of which is to say: it's probably not a great idea to put that many markers on a map, unless you implement something like Google's tile solution.
UPDATE
It's been awhile, but it turns out you can do this, you just have to use Google's Fusion Tables service.
some documentation here
How would I go about creating a Google map that allows the user to zoom beyond the default zoom levels for the map? Would I have to create a new map type that has a greater maximum zoom? Are there any tutorials out there that show how to do this?
Check out the documentation for Google Maps API. One of the things you can do is place more detailed information (an "overlay") on a map. Note that you won't be able to get better imagery than is already there but, for example, the Google Campus itself has quite high-rez imagery.
What you want to work with is the GTileLayerOverlay. It allows you to add custom tiles to the map, providing you have higher resolution versions of the tiles. Is this your goal or were you looking for a way to get back higher resolution tiles from google? (in which case you are out of luck, except for the cases outlined here)