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)
Related
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'm a bit new with Google Maps API, so I don't know if the following question is well asked.
I'm trying to create a v3 powered custom map for a game world. I will use Google Example to ask my question. Lets say I want to limit how far user can go up North or South. Unlike real planet, game map is not connected from sides, and in this example is not connected from North to South. If you will try to max zoom out, and go North, drag the map to the North as much as you can, you will see how it runs out of tiles, and shows gray default background instead. I want to limit this North going behaviour.
I guess that radius property in example has to do something with it, but playing with it didn't help.
Is there another option as to how to limit it?
Thanks!
At first: the radius-property used in this script is without any meaning.
Basically you can't restrict the bounds of the map to a given area.
The only thing you can do is to observe a bounds_changed- event and when the bounds are not within the restricted area revert the bounds.
But this may have some undesired effects.
Instead you may disable the dragging of the map and use a custom pan-control, which allows the user a limited panning to north/south
Is there a way to figure out the ideal zoom for one map if another bigger sized map changes its zoom level. Idea is to keep both maps in sync in terms of viewable area as a smaller map with same zoom will not be viewable the same
Found the answer by searching more. You can call fitBounds() function on the map and pass it the bounds you want it to fit.
So map1.fitBounds(map2.getBounds());
I have a large non-map image that I want to allow people to view on a browser at multiple zoom levels. I want to display the image in google maps API or openlayer so that people can zoom in/out and pan. I was hoping i could then add additional layers to overlay things of interest on the image. I am looking at MapTiler to chop the image up into tiles that can be generated at multiple zoom levels, but I'm getting very confused...
MapTiler wants to know about the spatial reference system (SRS) for georeferencing of my my image files, and well I don't know what I'm supposed to tell it ;) I have no georeference data - I just want it to generate tiles for my image, and then allow me to display that image in google maps or openlayer. In addition, openlayers seems very dependant on georeference data..
Am I looking at the wrong solution, or are there any pointers to getting this to work? Can OpenLayers be used to display a custom set of image tiles at multiple zoom levels without georefence data?
Found the answer. It is possible in both OpenLayers and Google maps to display a custom map, providing your own tiles for the map...
This google groups posting details how you can use MapTiler to generate non-georeferenced images, which can then be shown on a OpenLayers image.
In MapTiler, you need to choose rastor image and then ensure that you don't add any georeferencing data to the image with MapTiler.
If i get this right maybe google maps custom overlays will fit your needs?
How much control do I have regarding the styling of a google map?
Can I make it more closely resemble a site's colour scheme or are we stuck with pastels?
Controls
There is a decent description of the process to override the set of builtin Controls. So you have total control over the UI elements overlaying the map.
Map Tiles
I don't agree with the previous answers that you are out of luck if you want to change the images in the map itself.
The range of map types available give you a few options outside the pastel default map:
G_NORMAL_MAP, G_SATELLITE_MAP, G_HYBRID_MAP, G_PHYSICAL_MAP, G_MAPMAKER_NORMAL_MAP,
G_MAPMAKER_HYBRID_MAP, G_SATELLITE_3D_MAP, G_DEFAULT_MAP_TYPES, G_MAPMAKER_MAP_TYPES
Obviously, this only works if you are willing to create the tiles, but Custom Tilesets are quite well supported by the Google Maps API and there a few good examples out there:
World of Warcraft tileset
Batmud tileset
Tower of the Hand tilset
Update
Google recently announced support for Styled Maps in the Google Maps API. You can extensively customize the color scheme used by Google Maps. So you can customize the look of your mashup, without resorting to custom tilesets.
You can probably change around all the controls, perhaps by making your own or subclassing the google default versions. You won't be able to change the colors on the map itself without generating all new map images, at which point you are probably better off using something other than google. If thats what you want, you should consider OpenStreetMaps.
I've looked into this before. From what I've found is that the styles of layers/overlays on the map are pretty much determined by Google (minus a few size option for some overlays). What I have found is that you'll either need to subclass the existing overlays or create entirely new overlays that mimic the existing functionality, which in some cases can be painful given their complexity (such as street view and others).
Last I checked, you were stuck with the colors you were given (this was a year ago). You can check http://code.google.com/apis/maps/ for more info.