I'm migrating a piece of google maps code in javascript from v2 to v3
The following v2 piece shows a map with the center zoomed in, so you can see street names and specific details
var mapG = new GMap(document.getElementById("gmmap"));
var point = new GLatLng(52.6461049, 6.5583690);
mapG.centerAndZoom(point, 3);
I've tried migrating this to the following
var point = new google.maps.LatLng(52.6461049, 6.5583690);
var mapOptions = {
center: point,
zoom: 3,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("gmmap"), mapOptions);
The map is centered at the exact same location but the zoom is way off. Is there a difference between the zoom values in v2 and v3? Or did I migrate it the wrong way?
If I change 3 to 15, the zooming is about equal. But since I'm migrating a client environment, I want it to look exactly the same
V2 documentation:
https://developers.google.com/maps/documentation/javascript/v2/introduction#LoadingMap
Each map also contains a zoom level, which defines the resolution of the current view. Zoom levels between 0 (the lowest zoom level, in which the entire world can be seen on one map) to 19 (the highest zoom level, down to individual buildings) are possible within the normal maps view. Zoom levels vary depending on where in the world you're looking, as data in some parts of the globe is more defined than in others. Zoom levels up to 20 are possible within satellite view.
V3 documentation:
https://developers.google.com/maps/documentation/javascript/tutorial#MapOptions
The initial resolution at which to display the map is set by the zoom property, where zoom 0 corresponds to a map of the Earth fully zoomed out, and higher zoom levels zoom in at a higher resolution.
and also https://developers.google.com/maps/documentation/javascript/maxzoom?hl=en
Most roadmap imagery is available from zoom levels 0 to 18, for example.
So they should be about the same. Could it be something else wrong with your code, e.g. are you doing fitBounds() anywhere or another method that could adjust the zoom level?
Related
I am creating a map using mapbox.js using the code below
var map = L.mapbox.map('map_canvas',null,{
centre: [4.113028, 30.392318],
'minZoom':6,
'maxZoom': 8,
'zoomSnap':1,
'zoomDelta':1,
maxBounds: bounds
})
.setView([7.8, 28.7],6);
This displays the intended map including the base layer(openstreetmap) however the zoom level is higher than intended but when i change zoom 6 the map becomes congested. I have changed the code to the one below. Now i get the perfect zoom level but the base layer does not display.
Second code:
var map = L.mapbox.map('map_canvas',null,{
centre: [4.113028, 30.392318],
'minZoom':6,
'maxZoom': 8,
'zoomSnap':0.5,
'zoomDelta':0.5,
maxBounds: bounds
}).setView([7.8, 28.7],6.5);
Why does the base layer disappear when i use a float number as zoom level?
Thanks
I couldn't quite find anything current that relates to this question, so I wanted to ask...
If you go to Google Maps (via maps.google.com), so long as your location is on, it will set you by default at zoom level 15. Now, on Google Maps API, you can specify zoom just fine - it's the scrolling steps that are different. Whereas in the API, you can only step by +/- 1, the motherbase Google Map however, steps +/- .01 -- decimal places!
To test this out myself (I never thought to try it before), I threw in some decimals to my zoom level, and it works! But it is really... Blurry.
var map = new google.maps.Map( document.getElementById('map'), {
center: {
lat: 38.8563801,
lng: -88.3202496
},
zoom: 9.27,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true
});
It's apparent that the API might only serve tiles by those specific zoom levels, but is it possible to get high quality map tiles with decimal stepping, as the main Google Map does?
EDIT:
API
Google's
I first posted this as a comment but thought I'd develop a bit more.
I had never tried a non-integer zoom level as the documentation says:
Valid values: Integers between zero, and up to the supported maximum zoom level
for the zoom property, and I never saw any documented way of achieving this.
There is this feature request though, to which you can subscribe. But don't expect this to happen any time soon...
Intersting thing is
map.setZoom(1.5);
map.getZoom(); // Outputs 1.5
So I thought, maybe you can use this with your own imagery, but...
var customMapType = new google.maps.ImageMapType({
getTileUrl: function(coord, zoom) {
console.log(zoom); // Outputs 1
}
});
So that doesn't work. In other words, I suppose you are stuck with integers for now.
If I go to:
https://www.google.com/maps/#36.9644841,-122.0149787,37m/data=!3m1!1e3?hl=en-US
Please note the 37m parameter after the latitude, longitude. Now if I modify it to 20m (I guess it means meters) like this:
https://www.google.com/maps/#36.9644841,-122.0149787,20m/data=!3m1!1e3?hl=en-US
now I get an even closer zoom of that location. I guess it's the height from which the user sees that location...
What is the corresponding parameter of this in Google Maps Javascript API?
Thanks
Google earth API's are already deprecated and will continue to work for next few days.
So we are left with Google Maps API only. So I will answer according to that only.
What you are trying to do can be achieved by zoom level in google maps, for example
var gMap = new google.maps.Map(
document.getElementById('map-canvas'),
{ zoom : 14 } //Setting default zoom level
);
//To set map to next zoom level
gMap.setZoom(12);
Check this for more details
https://developers.google.com/maps/documentation/javascript/3.exp/reference
The Google Maps documentation says that .zoom and setZoom() expect numbers. Everything would seem to point to these numbers being integers. However, today I gave the latter a floating point value and it worked ... sort of.
var MAP;
function initialize() {
MAP = new google.maps.Map(document.getElementById('map-canvas'),
{
zoom : 5,
center : new google.maps.LatLng(-25.610111, 134.354806),
mapTypeId : google.maps.MapTypeId.ROADMAP
});
}
Using the above code, I was able to have debugger access to the MAP object.
Now in the case of continental Australia, if I have a zoom of 4, I get a slice of South East Asia, all of Papua New Guinea and New Zealand and, in the centre, the Great Southern Land. If I have a zoom of 5 I get the mainland but without Tasmania -- definitely a "bad thing". The optimal zoom, discovered using MAP.setZoom() interactively, is 4.3. This is great, except that nothing else works with that zoom. When I try to draw polygons or a heatmap, Maps throws errors like
GET https://khms0.google.com/kh?v=178&hl=en-US&x=0&y=0&z=0.2999999999999998&token=77820 404 (OK)
I imagine that the 'z' value above is what's causing the 404 -- khms0.google.com is not expecting a floating point 'z' value.
So how do I get a more appropriately zoomed homeland, with polygons, markers, heatmaps, KML layers and what have you?
By the way, I did try using fitBounds() but it didn't change anything with respect to the visible contents of the viewport apart from shifting the map around a new centre.
var se = new google.maps.LatLng(-44.999315, 156.971343); // Tasman Sea
var nw = new google.maps.LatLng(-9.063496, 106.346343); // Indian Ocean
var bs = new google.maps.LatLngBounds(nw,se);
MAP.fitBounds(bs);
The zoom level must be an integer (at least at present). It used to be documented, but I don't see it stated specifically anywhere.
If a integer zoom level doesn't work for you, either change the size of the <div> displaying the map or make your own custom tiles that have a different scale.
I want to browse a single image with the Google Maps API, for which I've defined my own projection. I wanted to use a GroundOverlay instead of several image tiles, because I only have one small-resolution image, but I wanted it to still be zoomable. However, I get some erratic behavior when trying to work with this projection:
No overlays show up at all at zoom level 0.
At zoom level 1 and higher, Markers show up, but GroundOverlays still don't.
However, I can get GroundOverlays to show up very briefly, if I zoom out from any level. It will only show while it's zooming out and disappear again immediately. Also, while it does show up shortly, it does not show up at the right coordinates, but the Markers do.
I'm rather new to the API, so I would not be surprised if it was a simple oversight on my part, but I just can't see what could cause this. Here is the code for my projection, which just maps the lat/lng linearly to map coordinates:
function EvenMapProjection() {
var xPerLng = 512/360;
var yPerLat = 512/180;
this.fromLatLngToPoint = function(latlng) {
var x = (latlng.lng()+180)*xPerLng;
var y = (latlng.lat()+90)*yPerLat;
console.log('Lng', latlng.lng(), 'Lat', latlng.lat(), '-> Point', x, y);
return new google.maps.Point(x, y);
};
this.fromPointToLatLng = function(point) {
var lat = point.y/yPerLat-90;
var lng = point.x/xPerLng-180;
console.log('Point', point.x, point.y, '-> Lng', lng, lat);
return new google.maps.LatLng(lat, lng);
};
}
An example of what I'm trying to do without the projection (using the default Mercator projection):
http://95.156.209.71/tmp/a.html
The same example with the projection as defined above:
http://95.156.209.71/tmp/b.html
And finally an example using the projection but without the GroundOverlay, and instead just using tiled images (always the same image):
http://95.156.209.71/tmp/c.html
The last link also shows the Marker at LatLng(0, 0) appear at zoom level 1 (or higher), but not at level 0.
Is there something I'm just missing, or some buggy code, or is this actually a problem in the API?
I just found out that my mistake was in the definition of the ground overlay. I was at zoom level 0, which meant that I set the bounds for the overlay from (-90,-180) to (90,180), but the API seems to have issues with these levels, because they wrap longitude, hence I got weird errors. I adjusted it to be at level 1 for minimum zoom, and set the overlay from (-45,-90) to (45,90), and now it all works fine.