Very short question - as i can't find an answer in the google maps api V3 documentation
I'm looking for a control which allows me to control/modify an api map's orientation so that north isn't at the top.
Is this possible? If so, how?
Thanks
You can do that with 45 degree imaginery but it only works for specific locations.
OpenLayers is a free, lightweight and very complete javascript mapping API. Just take a look at their example page, it looks awesome (rotation example: https://openlayers.org/en/latest/examples/rotation.html).
OpenLayers can be made to show Google Maps tiles too, which can then be rotated https://gis.stackexchange.com/a/277606/114599
As a workaround, you can rotate its wrapper div instead, using CSS transform: rotate()
*you need to disableDefaultUI, because every element inside will be rotated as well
Currently, Google-Maps-API doesn't have an option to rotate the map (I'm hoping this feature will be soon).
The only way you can rotate a map is if:
mapTypeId is satellite or hybrid
Map zoom set to high value (around 18 or more)
Map tilt is enabled by setting tilt: 45. This parameter will change the map display from a 2D map view into a 3D-like view by tilting the map in 45 degrees.
heading parameter is set to the rotation you would like to have (0, 90, 180 and 270 degrees). This will only work if tilt is enabled.
The visible area on the map is a place that supports map tilt operation (these locations have 4 different satellite images for 4 directions (North, South, East, and West). Not all places on the map have these 4 images therefore not all places on the map can be rotated.
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: { lat: 45.518, lng: -122.672 }, // try to put different location and rotation may not work
zoom: 18, // use a smaller zoom level and rotation may not work
mapTypeId: 'satellite', // use TERRAIN or ROADMAP and rotation will not work
heading: 90,
tilt: 45
});
}
for more info see: https://developers.google.com/maps/documentation/javascript/examples/aerial-rotation
Google Maps doesn't do that. It will always have to face North unfortunately.
I do seem to remember that OpenStreetMaps does spin around, I'm looking for something to confirm that suspicion. Will get back to you in a few.
In the Beta version of Google Map Javascript API, both tilt and heading (as for orientation) are supported, if you use the new vector map format.
first create a new MapId
Use v=beta in your API script tag
<script
src="https://maps.googleapis.com/maps/api/js?key=API_KEY&v=beta&callback=initMap">
</script>
include the heading and tilt properties when initializing the map, also with the MapId
remember to enable Use hardware acceleration when available in settings if using Chrome
full instructions can be found here.
Google Maps (the public web version) can indeed do this just like Google Earth can, at any location. Just by using CTRL+Click. But the API version doesn't support that functionality.
See screenshot: https://ibb.co/VBn6Cjv
Related
I need to reproduce behavior of leaflet's worldCopyJump(), but for vertical scrolling: for world map it's when user scrolls up from North Pole, the South Pole is shown. Is there a way to do so?
Not in the default map projection.
By default, Leaflet uses EPSG:3857 AKA "Web Mercator", a type of cylindrical map projection. In cylindrical map projections, two points (in this case, the geographical north and south poles) can not be represented in the map at all.
What you see is a cropped version of this map projection: The map is cut out as approximately ~85°N and ~85°S in order to look square. In reality, the map projection is infinite in the vertical axis.
This said:
Read the leaflet tutorial on CRS.Simple. You can use projections other that the default.
Read the documentation for L.CRS. It's important in order for you to...
Read Leaflet's source code for CRSs. Pay extra attention to those wrapLat and wrapLng properties.
Research on map projections. Is there any wrapping projection that serves your purposes? Can you achieve that with Proj4Leaflet? If not...
Write your own custom L.CRS with the desired wrapping.
Some web apps (like Nightwalk, seen here: https://nightwalk.withgoogle.com/) have markers placed at various locations in streetviews (notably, above your head).
I know it is possible to place a marker via latitude/longitude, but I am not seeing any option to place a marker as they are in nightwalk (over a users head). If I were to set a marker to a current streetviews latitude/longitude, it would just show up at the photographers foot.
Is a simple way to set a marker taking the pitch/heading into account? Nothing seems to stand out in their API specifications. https://developers.google.com/maps/documentation/javascript/reference#MarkerOptions
Or are they manually calculating the POV and placing the markers themselves on their own custom layer?
You might to check out the Overlays with Street View page in Google Maps documentation. Make sure you "Toggle Street View"
The main portion for that demo code will be the following:
panorama = map.getStreetView();
panorama.setPosition(astorPlace);
panorama.setPov(/** #type {google.maps.StreetViewPov} */({
heading: 265,
pitch: 0
}));
I am developing a site with some parcels ( layers on google map ) and the client wants the map to be in tilt view. I understand the google api but i don't know why my tilt setting and heading are not taken into consideration.
This is my code creating the map:
map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 18,
center: new google.maps.LatLng(35.8313284, -82.7251666),
mapTypeId: google.maps.MapTypeId.SATELLITE,
heading: 90,
tilt: 45
});
I see the working examples but i can't get mine to work. here you can see it live
http://sigmalogic.eu/mapdwr/index.html.
I just want to know why the tilt is not working, or heading is good at first but it rotates.
If you want to avoid getting errors when asking for 45° imagery, you can first test if imagery is available:
if (map.getTilt()) {
map.setTilt(45);
}
JSFiddle demo
Hope this helps.
Google doesn't have 45°-Images everywhere. The Documentation states:
45° Imagery
The Google Maps API supports special 45° imagery for certain
locations. This high-resolution imagery provides perspective views
towards each of the cardinal direction (North, South, East, West).
These images are available at higher zoom levels for supported map
types.
[...]
The existing google.maps.MapTypeId.SATELLITE and
google.maps.MapTypeId.HYBRID map types support 45° perspective imagery
at high zoom levels (where available).
You can see the currently available locations on this map.
I am using the following google map and everything looks perfect:
Google map
The only problem is that when a person zoom in to the street level and wants to zoom out he needs to have a mouse and use mouse wheel and if he does not have mouse working with this map is a pain.
So I need to put zooming bar for example at left side of my map like this:
Is it possible to do that and how can I do that?(I appreciate any help)
You need to add the control to your map, like this:
map.addControl(new GSmallZoomControl());
You can find more information about GMaps controls here: https://developers.google.com/maps/documentation/javascript/v2/controls
This quote is from the above mentioned documentation
GSmallZoomControl - a small zoom control (no panning controls) used in the small map blowup windows used to display driving directions steps on Google Maps.
In GoogleMaps when users zooms In/Out using mouse wheel the point under cursor stays the same (its coordinates), but OpenLayers map has different approach - when zooming center of the map is constant. Can one use GoogleMaps zoom style in OpenLayers map?
EDIT:
Actually current behaviour in my OpenLayers is that when I zoom in with some position under the cursor it moves that position to map center on the next zoom level. Probably it is some issue related to my map specific settings (like projection).
I guess you are using OpenLayers.Control.MouseDefaults control for navigation. Well, you shouldn't, because this control is replaced with OpenLayers.Control.Navigation and will be deprecated in OpenLayers 3.0.
A quick look at source code for MouseDefaults shows that it definitely centers map on the cursor position:
defaultWheelDown: function(evt) {
if (this.map.getZoom() > 0) {
this.map.setCenter(this.map.getLonLatFromPixel(evt.xy),
this.map.getZoom() - 1);
}
},
While cursor stays at the same position the map will centered to new location every time you zoom in/out, which is confusing.
OpenLayers.Control.Navigation uses the same approach as Google Maps. OpenStreetMap uses it and you can see that it works the same way here
Actually, when looking at the Basic Example at OpenLayers, it seems like the map zooms around the mouse pointer, just as Google Maps does. Or am I missing some detail in your question?