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.
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
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 developing an iPhone app in html5 and making the build with Phonegap.
In the app there's a Google map with custom markers, the way the marker icons are created is as follows:
var image = new google.maps.MarkerImage("hat.png", null, null, null, new google.maps.Size(20,30));
var shadow = new google.maps.MarkerImage("shadow.png", null, null, null, new google.maps.Size(20,30));
var marker = new google.maps.Marker({
map: map,
position: latlng,
index: markers.length,
icon: image,
shadow: shadow,
animation: google.maps.Animation.DROP,
html: htmlContent
});
The actual size of the icon's are double size compared to the sizes defined in the code. This is done to make sure the icons are shown in high res on the Retina display.
The code above worked fine until today, but what happens now is the following.
When the icons Drop down, using the google.maps.Animation.DROP, the icon is shown in high res on the way down, but when the icon "lands" on the map, the icon switches to a low res resolution version.
Has anyone ever experienced the same?
Thank you...
UPDATE
Found out that if I specify the Google map version like:
http://maps.googleapis.com/maps/api/js?v=3.0
So I guess it's a bug in the newest Goolge map API.
I found my solution to this by using scaledSize instead of size to define the width and height of the image.
I just found this problem too. The bug appears to be in latest (v3.7) of their API, so if you specify v3.6 via the URL parameter ?v=3.6 it'll work fine.
Update: In version 3.8+ (I think) you can use optimized: false to force a retina image, if you are using one. This is because optimized: true takes all your sprites and weaves them together into a master sprite. This means you should only do this if you have very few markers. Also, doesn't work too well with Clusterer.
The default is now optimized: true, which will determine first if the device can even handle rendering so many high-res icons before creating a master sprite at a higher resolution. For example, load a map with a lot of markers on a retina Macbook Pro, and they'll appear high-res, but try an iPhone 4 and it will not. If you force the iPhone 4 using optimized: false, and have a lot of markers, it might stutter a lot. Not sure about the 4S but I assume it'll probably use the higher res version as it has a lot better processing capability.
Simply use an object with url, size, and scaledSize attributes:
var icon = {
url: 'path/img/marker#2x.png',
size: new google.maps.Size(30, 40),
scaledSize: new google.maps.Size(30, 40)
};
Where path/img/marker#2x.png is a 60px x 80px PNG.
If you encounter any switching of icons to lower resolution, it's because the maps api uses canvas to render the icons (grouping them and whatnot?) for a faster user experience apparently. So it isn't technically a bug, but it does cause buggy things to happen in certain browsers (like older ie)
But there is a setting you can use to turn off in MarkerOptions using optimized: false
var marker = new google.maps.Marker({
map: map,
position: latlng,
icon: image,
shadow: shadow,
optimized: false
});
Scaled Size property is the correct one to use as referenced by Google here: https://developers.google.com/maps/documentation/javascript/3.exp/reference#Icon
I need to display markers on my map and it's working well. The only problem is that they appear to be too small. How can I make sure that the markers used are large in size and can be visible from almost any zoom state?
For making the icons bigger I would definitely recommend to make your icon images larger. To for example fix pixely icons on high-dpi mobile device using downscaled hi-res icons use following code:
var marker = new google.maps.Marker({
position: new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
map: map,
icon: {
url: "img/img.png",
scaledSize: new google.maps.Size(32, 32) // pixels
}
});
Tested with Google Maps API JavaScript v3.13
If your using version 3 of the api-
When you create the marker, in the marker options you can specify the icon like this:
icon: new google.maps.MarkerImage(
url:string, size?:Size,
origin?:Point, anchor?:Point, scaledSize?:Size
)
Set size to the actual size of your icon image.
Set scaledSize to whatever size you want to stretch the image to.
It is better of cause to make an icon image the size you want instead of scaling it.
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.