Using the Google Maps API is it possible to detect whether or not satellite tiles will be available given coordinates and a zoom level?
Yes, it is possible. Read the "Maximum Zoom Imagery" section of the Google Maps API v3 for an explanation and a code sample.
http://code.google.com/apis/maps/documentation/javascript/services.html#MaxZoom
Here is the sample code from that documentation that "shows a map of metropolitan Tokyo. Clicking anywhere on the map indicates the maximum zoom level at that location. (Zoom levels around Tokyo generally vary between zoom levels 18 and 21.)"
var map;
var maxZoomService = new google.maps.MaxZoomService();
var tokyo = new google.maps.LatLng(35.6894875, 139.6917064);
function initialize() {
var mapOptions = {
zoom: 11,
center: tokyo,
mapTypeId: google.maps.MapTypeId.HYBRID
}
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
google.maps.event.addListener(map, 'click', showMaxZoom);
}
function showMaxZoom(e) {
maxZoomService.getMaxZoomAtLatLng(e.latLng, function(response) {
if (response.status != google.maps.MaxZoomStatus.OK) {
alert("Error in MaxZoomService");
return;
} else {
alert("The maximum zoom at this location is: " + response.zoom);
}
map.setCenter(e.latLng);
});
}
Related
I am attempting to show a google maps marker via satellite view and street view at the same time. However, the marker placed on street view seems to change location (be slightly offset) depending on where along the street you are looking at it. In the examples below, you can see in one angle the marker is successfully on the grass and the satellite view matches the street view. However, if I navigate down the road one step, the marker is now on the driveway, despite the satellite view indicating otherwise. The same marker is used for all examples.
Any thoughts?
Example: https://jsfiddle.net/6Lpgoex2/
const startPosition = new google.maps.LatLng(33.82444502161826, -84.32112795727612);
// Aerial view map with marker
var locationMap = new google.maps.Map(document.getElementById('location'), {
center: startPosition,
zoom: 21,
mapTypeId: 'satellite'
});
locationMap.setTilt(0)
var locationMarker = new google.maps.Marker({
position: startPosition,
map: locationMap
});
// Street view map with marker
var viewMap = new google.maps.Map(document.getElementById('view'), {
center: startPosition,
zoom: 14
});
var viewMarker = new google.maps.Marker({
position: startPosition,
map: viewMap,
});
// Update streetview to look at the marker
var panorama = viewMap.getStreetView();
const panoramaService = new google.maps.StreetViewService();
panorama.setVisible(true);
panoramaService.getPanoramaByLocation(startPosition, 100, function(streetViewPanoramaData, streetViewStatus) {
if (streetViewStatus == "OK") {
let heading = google.maps.geometry.spherical.computeHeading(streetViewPanoramaData.location.latLng, startPosition);
const position = streetViewPanoramaData.location.latLng;
panorama.setPosition(position)
panorama.setPov({
heading: heading,
pitch: 0
});
panorama.setZoom(1); // Fix bug to make marker visible https://issuetracker.google.com/issues/35830290
panorama.setVisible(true);
}
});
Note: An issue has been opened.
I'm working on a project which displays a bunch of markers on Google Maps and allows the user to search and get relevant information about the locations. I haven't disabled Street View, as I'd like to give the user the possibility to see the building from the outside.
For certain locations, however, when going into Street View mode, Google Maps immediately shows the indoor of an adjacent business. What I'd like to have is the ability to completely disable indoor view on my application.
Is anyone aware of a certain setting in the Google Maps API that would do that or perhaps a clever hack to solve the issue? I haven't honestly found anything.
In the experimental version (currently v=3.21) there is now a StreetViewSource that can be provided in a StreetViewLocationRequest
StreetViewSource class
google.maps.StreetViewSource class
Identifiers to limit Street View searches to selected sources.
Constant
DEFAULT Uses the default sources of Street View, searches will not be limited to specific sources.
OUTDOOR Limits Street View searches to outdoor collections only.
example of request without source: google.maps.StreetViewSource.OUTDOOR (fiddle)
example of request with source: google.maps.StreetViewSource.OUTDOOR (fiddle)
code snippet (with source: OUTDOOR):
/*
* Click the map to set a new location for the Street View camera.
*/
var map;
var panorama;
function initMap() {
var myLatlng = new google.maps.LatLng(51.343364, 12.378962999999999);
var sv = new google.maps.StreetViewService();
panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'));
// Set up the map.
map = new google.maps.Map(document.getElementById('map'), {
center: myLatlng,
zoom: 16,
streetViewControl: false
});
// Set the initial Street View camera to the center of the map
sv.getPanorama({
location: myLatlng,
radius: 50,
source: google.maps.StreetViewSource.OUTDOOR
}, processSVData);
// Look for a nearby Street View panorama when the map is clicked.
// getPanoramaByLocation will return the nearest pano when the
// given radius is 50 meters or less.
map.addListener('click', function(event) {
sv.getPanorama({
location: event.latLng,
radius: 50
}, processSVData);
});
}
function processSVData(data, status) {
if (status === google.maps.StreetViewStatus.OK) {
var marker = new google.maps.Marker({
position: data.location.latLng,
map: map,
title: data.location.description
});
panorama.setPano(data.location.pano);
panorama.setPov({
heading: 270,
pitch: 0
});
panorama.setVisible(true);
marker.addListener('click', function() {
var markerPanoID = data.location.pano;
// Set the Pano to use the passed panoID.
panorama.setPano(markerPanoID);
panorama.setPov({
heading: 270,
pitch: 0
});
panorama.setVisible(true);
});
} else {
console.error('Street View data not found for this location.');
}
}
google.maps.event.addDomListener(window, 'load', initMap);
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map" style="width: 45%; height: 100%;float:left"></div>
<div id="pano" style="width: 45%; height: 100%;float:left"></div>
I am using the setRotation method for an ol.View similar to the examples available at the openlayers examples page. I have an encoded polyline that is drawn on the map and then we fit to the extent of that layer and if necessary rotate the map.
This all works great with OpenStreetMap and even a custom imagery service. This will not work with any of the Google tile services though. Is there any support for rotation of the ol.View with Google map services, if so, any examples? I didn't see any comments in the API documentation for ol.View and Google map services.
Thanks for any input.
You can use rotate control only for 45° imagery see code like this:
var map;
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(45.518970, -122.672899),
zoom: 18,
mapTypeId: google.maps.MapTypeId.SATELLITE,
heading: 90,
tilt: 45
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
function rotate90() {
var heading = map.getHeading() || 0;
map.setHeading(heading + 90);
}
function autoRotate() {
// Determine if we're showing aerial imagery
if (map.getTilt() != 0) {
window.setInterval(rotate90, 3000);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
You can see an example google45°
But for normal google maps the rotation is not avaliable.
I am trying to add a map to my website, but I would like to have it show the business view by default rather than going from satellite to street view and then to business view.
Is this possible?
If business view is what is now called indoor map, once you reach the view you should like to show on a map, you could simply retrieve the link to the view or to the iframe embed code, as explained in https://support.google.com/maps/answer/144361?hl=en
indoor map example: https://goo.gl/maps/SAhHg5hhLrGdLjaJ9
However, embedding the map via iframe source code gives you limited chances of customization.
If you need a higher level of customization you can use the street view service of Maps Javascript API (you will need an API KEY )
example: http://jsfiddle.net/eg561mx8/
var lat2 = 48.87708978509529, lng2 = 2.3392088036591754;
var map;
var panorama;
var panoramaService;
var streetView;
function initialize() {
map = new google.maps.Map(
document.getElementById("map_canvas"), {
zoom: 14,
center: new google.maps.LatLng(lat2, lng2),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
streetView = map.getStreetView();
panoramaService = new google.maps.StreetViewService();
panoramaService.getPanoramaByLocation(
new google.maps.LatLng(lat2, lng2),
100,
function(streetViewPanoramaData, streetViewStatus) {
if (streetViewStatus != "OK") {
alert("no street view at this location I'm afraid");
} else {
streetView.setPosition(
streetViewPanoramaData.location.latLng);
streetView.setVisible(true);
}
}
);
}
I have a Google Maps elevation service (for my Geography of Pennsylvania students) that works fine with point clicks on Google's basemaps. I would like to add a kml layer showing PA counties. When I add it, the elevation infowindow no longer displays. Is there a way to add the kml but suppress its click response so that the elevation response shows?
Current code (partial):
function initialize() {
var mapOptions = {
zoom: 7,
center: centerOfPA,
mapTypeId: 'roadmap'
}
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var paCounties = new google.maps.KmlLayer('http://mapmaker.millersville.edu/arcgis/services/PAcounties/MapServer/KmlServer', {suppressInfoWindows: true});
paCounties.setMap(map);
// Create an ElevationService
elevator = new google.maps.ElevationService();
// Add a listener for the click event and call getElevation on that location
google.maps.event.addListener(map, 'click', getElevation);
}
Either suppress click events on the KmlLayer (clickable: false) or handle the click events and call the elevation service (with the latLng from that click event).
Here is a working example