Google Map Tilt not working - javascript

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.

Related

Does Leafletjs Map works on china?

Google Maps are blocked in china. So, we are looking for alternate solutions that have similar features like Google map.
I found leafletjs for Map. but want to make sure that it works in china.
It should work. Leaflet as library should work without any restrictions I believe that tile maps should be the problem. Lucky, you have an extension to Leaflet that contains configurations for various Chinese tile providers.
But more about that on this site.
Hope it helps
Yes, you can use many different maps with Leafletjs. I use Open Street maps in my app.
https://www.openstreetmap.org
You can specify open street as your base map:
var openStreet = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
{
maxZoom: 18,
subdomains: ['a', 'b', 'c'],
attribution: 'Map data © OpenStreetMap'
});
You can add to leaflet with:
openStreet.addTo(map);

How to hide commercial locations on Google Map iOS SDK

I'm using Google Maps SDK for iOS to develop an based-map app. Map also shows many commercial locations like hotels, restaurants, companies,... It's bad for my app in some cases so I want to hide them, just show some information such as street name, parks name or some general places name.
I got the topic that handled the problem but in Javascript
google maps api: how to disable commercial locations?
There was another topic said that changing map type is a acceptable option
How to hide default labels on Google Maps iOS SDK
but there is no mapType suit for me, I want a normal type map.
Is there any solution for this using Google Map api on iOS
You can give mapTypeId.ROADMAP a try. It's one of the simplest map UIs. It doesn't show the commercial locations you're so trying to avoid.
var mapOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
Read here to browse more about simple maps.

Placing marker or overlayview on Google Map StreetViewPanorama via lat/long and pitch

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
}));

how to rotate map orientation with google maps api v3

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

Attribution not showing up on google map

So I noticed today that the Google attribution that is suppsoed to be with the map isn't showing up. Is there an easy way for me to put that on the map somewhere manually?
The map is being built using the Javascript v3 api. We're using html5/javascript, jquery and jquery mobile to build the content which apps on iOS and android running phone gap.
var myOptions = {
center: currentLocation,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP,
panControl: false
};
map = new google.maps.Map(element[0], myOptions);
Thats how I'm setting up my map.
Edit: Found it! The first time I inspected the elements of the page I couldn't find the content for the attribution info but I found it this morning. It seems something else was setting the heigh of my map div which was pushing the copyright info of the screen.
I don't believe there's any way to optionally get rid of the Google attribution in Maps API v3.
If it's just not appearing, that might be a bug in the Maps API. I wouldn't worry about it. Google will fix it if they care deeply about the attribution.
If you really think it's something you're doing and not a bug in the API, post some code and maybe someone can figure out what's up.

Categories