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
Related
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.
I tried integrating google maps tile layer into leaflet using leaflet-google plugin. Everything loads fine, but when i try to zoom in/out, first my custom feature layer zooms and then the google map tile layer zooms. Why don't they zoom together?
var map = new L.Map('map', {center: new L.LatLng(18.93718 , 72.79366), zoom: 10});
var googleLayer = new L.Google('ROADMAP');
map.addLayer(googleLayer);
and I am adding my feature layer by:
L.geoJson(inputgeoJson, {
style: style,
onEachFeature: onEachFeature
}).addTo(map);
Thanks!
The Google layer in Leaflet is a hack (a possibly illegal one), and involves using the Google Maps API within Leaflet. Since Leaflet and the Google Maps API have different zoom transition animations, you see this effect. You could use Google tiles directly in Leaflet, but that's definitely be illegal, not just maybe.
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
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
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.