I'm trying to overlay a building floor-plan on a google map. However zoom level 21 is too small to show indoor detail. I need zoom 23-26.
I tried settings like:
var mapOptions = {
zoom : 24,
maxZoom: 26,
center : new google.maps.LatLng(52.226071,20.950115),
mapTypeId: google.maps.MapTypeId.SATELLITE,
};
but it does not work. I get the default behavior.
var mapOptions = {
zoom : 22
maxZoom: 26,
minZoom: 22,
center : new google.maps.LatLng(52.226071,20.950115),
mapTypeId: google.maps.MapTypeId.SATELLITE,
};
This, does force more zoom, but i can't get beyond 22.
Surely there has to be some solution for floor-plan overlaying on a map.
Any ideas?
The maxZoom for the built-in mapTypes is predefined(depending on the mapType and the location)
What you can do:
Use a custom mapType (you may define a maxZoom for it that fit's your requirements)
Observe the zoom_changed-event of the map. When to zoom reaches the maxZoom for the particular location(21 in this case) switch from the built-in mapType to your custom mapType(and switch back when the zoom goes below 21).
I got this working (albeit with a few bugs) by using a modified version of https://github.com/tilemapjp/ZoomTMSLayer. Instead of using my own tile map service, I just used the same urls that Google was making network calls to.
Essentially you extend google.maps.ImageMapType and redefined the getTile() and getTileUrl() methods. For any zoom level greater than the max zoom level supported by Google at that location, grab the tile that Google would have returned at the max zoom, then scale it and transform each tile so that they line up.
I put my code on Github for viewing convenience: https://github.com/dallinski/GoogleMapsSuperZoomMapType
Related
I'm trying to display a map just like Google does here https://www.google.fr/maps
With google maps API, I'm struggling at finding the following :
makeing ctrl + drag change the tilt
programmatically setting the tilt to 0, but keep 3D imagery (for high resolution purpose basically)
programmatically setting the tilt to a custom value (say 30 degrees)
makeing ctrl + drag rotate the map
programmatically rotate the map to a custom value
Is that even possible ?
First off, the map in your link by default does not support 45 degree tilt nor rotate options, as that is a roadmap. In order to enable tilt and rotate options in your map, you will need to set your mapTypeId to "Satellite" or "Hybrid" first and set the rotateControl in your Map Object to true; this is an example adapted from Google Maps API:
function initialiseMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 41.390205, lng: 2.154007},
zoom: 12,
mapTypeId: 'satellite',
rotateControl: true
});
map.setTilt(45);
}
As far as I can tell from their documentation:
Google Maps JavaScript API support special 45 degree imagery for
certain location
You can set the heading option and tilt option dynamically by calling the respective method on the map object. But I do not think you can override the preset behavior programmatically unless this is something that I have missed from the documentation . This is another link to the 45 degree service for you.
if you are in 3d mode and using a desktop, you can tilt or rotate by holding SHIFT+CTRL at the same time. doesnt work in roadmap mode though
See this map: http://imgur.com/a/r03rk
Is it possible to stop Google Maps from slanting the image like this?
If so, how?
Maybe disabling webGL would help? However, I dont think I can do this in code so it would affect all users, instead my own browser only.
Thanks.
Looking at https://developers.google.com/maps/documentation/javascript/3.exp/reference#Map , the tilt option can be set to 0 so that the map will no longer automatically tilt (slant) when the user zooms in.
For example:
var mapOptions = {
center: mycenter,
zoom: 7,
tilt: 0
};
Unfortunately the icon to switch tilt back on (slanting the image) will still be available on the map for the user to switch on if they wish. There is no simple way to stop this icon appearing.
Check out a demo: http://jsfiddle.net/VudEC/3/
It's about using Google's Satellite Layer (in example: zoom=20), birds eye mode enabled and a marker.
var map = new L.Map('map_canvas', {
center: new L.LatLng(39.868841, -4.021938),
zoom: 20
});
var ggl = new L.Google('SATELLITE');
map.addLayer(ggl);
var marker = new L.Marker(new L.LatLng(39.868841, -4.021938));
map.addLayer(marker);
If you drag vertically the map (or use the function map.panBy()) you will see the marker moving up or down (vertically). And it shouldn't.
If the drag or movement is horizontal, no problem.
If I disabled the birds eye (or set a lower zoom), the issue disappear.
At least it happens with polygons too.
Btw, with Google Maps API it doesn't happen: http://jsfiddle.net/ew332/1/
I don't understand why I get this issue.
Thank you very much
It seems it's a bug of the plugin, you can read more here and for now, there is no a fix
For the google map I am using roadmap tiles. Most of the tiles are normal with green/beige terrain coloring and state/country labeling. However, there are some tiles where the terrain is white and doesn't have any labels. It looks like there are two different tile types being sent. Is there anything I can do to make it consistent?
Here is my init code:
var mapOptions = {
center: new google.maps.LatLng(Lat,Long),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
googlemap = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
I have an image I can post, but I am new to stack overflow and someone needs to boost my rep.
Thanks
I am having the same problem. You can look at www.onlinecustommaps.com and see how there are white and green tiles. This just started happening yesterday.
It looks like the problem was at Google. As of this morning the issue is no longer present.
Google Maps API V3 doesn't support the V2 GOverviewMapControl option, yet. I've come across a piece of code at http://dl.google.com/io/2009/pres/Th_1045_Maps_API_Mobile.pdf , silde 19, that gives the code to display the smaller map, but not the draggable, semi-transparent blue box that you generally see here. It's possible, but unofrtunately the code is 'ellided'. Anyone have any ideas how to generate this? Thanks
This is how it works out of the box in Maps v3:
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
overviewMapControl: true,
overviewMapControlOptions: {opened: true}
}
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
}
Please note the last two properties of the mapOptions object. They do the trick.
Within the overlayMap, add a draggable marker to display the frame of the RectangleOverlay, and a non-draggable marker to display the semi-transparent box itself. Then, add bindings to some of the maps' events to update size and position of the markers, i.e. the maps' bounds_changed, drag, and/or center_changed events. Finally, update the location of the maps when the frame is dragged by binding a function to its dragend event.
I am using v3 right now and the overviewMapControl seems to work. Can't find any documentation on it yet.
overviewMapControl: true
Then you see a small arrow in the right hand side of your map. Click will open it. Can't figure out how to trigger this click with javascript (jquery) doesn't seem to work.
Check out http://code.google.com/p/gmaps-api-v3-overviewmapcontrol It's an open-source project to approximate the functionality of v2's GOverviewMapControl.