CODEWITHSUNDEEP
javascriptjavagoogle-mapsgoogle-maps-api-3
Dreadlord
Dreadlord

Reputation: 413

Google Maps + Streetview issue - How to disable Photo Sphere

So on my site I'm using Google Maps + Streetview: https://developers.google.com/maps/documentation/javascript/examples/streetview-simple

Also I'm using standard searchbox with autocomplete, the problem is when I enter some locations, there is no streetview, just Photo Sphere image without any controls for moving around like in standard streetview...

I really don't want Photo Sphere, because I want my users to freely move around with street view, and now they sometimes get "trapped" in one Photo Sphere image... Is there a way I can force streetview without Photo Sphere?

Upvotes: 9

Views: 2920

Answers (1)

brenzy
brenzy

Reputation: 1986

I'm not sure how to turn off PhotoSpheres, but I did find a workaround that may be useful to you. I noticed at https://developers.google.com/maps/documentation/javascript/reference#StreetViewSource that when searching for a location, if you set the source to OUTDOOR, then PhotoSpheres are not returned.

Therefore, if you add listeners for location changes, and then search for the location without PhotoSpheres, I think you should be able to prevent them from showing up.

Here is a modified google maps example to illustrate:

<!DOCTYPE html>
<html>
<head>
	<title>Place Autocomplete without PhotoSpheres</title>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
	<meta charset="utf-8">
	<style>
		html, body {
			height: 100%;
			margin: 0;
			padding: 0;
		}
		#map, #pano {
			height: 100%;
			width: 50%;
			float:left;
		}
		.controls {
			margin-top: 10px;
			border: 1px solid transparent;
			border-radius: 2px 0 0 2px;
			box-sizing: border-box;
			-moz-box-sizing: border-box;
			height: 32px;
			outline: none;
			box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
		}

		#pac-input {
			background-color: #fff;
			font-family: Roboto;
			font-size: 15px;
			font-weight: 300;
			margin-left: 12px;
			padding: 0 11px 0 13px;
			text-overflow: ellipsis;
			width: 300px;
		}

		#pac-input:focus {
			border-color: #4d90fe;
		}

		.pac-container {
			font-family: Roboto;
		}

		#type-selector {
			color: #fff;
			background-color: #4d90fe;
			padding: 5px 11px 0px 11px;
		}

		#type-selector label {
			font-family: Roboto;
			font-size: 13px;
			font-weight: 300;
		}

	</style>
</head>
<body>
<input id="pac-input" class="controls" type="text"
       placeholder="Enter a location">
<div id="map"></div>
<div id="pano"></div>
<script>

	var map;
	var panorama;
	var streetViewService;
	var DEFAULT_PROXIMITY = 50;
	var MAX_PROXIMITY = 10000;

	function initMap() {
		map = new google.maps.Map(document.getElementById('map'), {
			center: {lat: -33.8688, lng: 151.2195},
			zoom: 13
		});
		var input = /** @type {!HTMLInputElement} */(
			document.getElementById('pac-input'));

		map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

		var autocomplete = new google.maps.places.Autocomplete(input);
		//autocomplete.bindTo('bounds', map);

		streetViewService = new google.maps.StreetViewService();
		panorama = new google.maps.StreetViewPanorama(
			document.getElementById('pano'), {
				position:  {lat: -33.8688, lng: 151.2195},
				pov: {
					heading: 34,
					pitch: 10
				}
			});
		map.setStreetView(panorama);

		autocomplete.addListener('place_changed', function() {
			var place = autocomplete.getPlace();
			if (!place.geometry) {
				window.alert("Autocomplete's returned place contains no geometry");
				return;
			}
			// If the place has a geometry, then present it on a map.
			if (place.geometry.location) {
				findClosestStreetView(place.geometry.location, DEFAULT_PROXIMITY);
			}
		});

		function findClosestStreetView(point, proximity) {
			streetViewService.getPanorama({location: point, radius: proximity, source: google.maps.StreetViewSource.OUTDOOR}, function processSVData(data, status) {
				if (status == google.maps.StreetViewStatus.OK) {
					map.panTo(data.location.latLng);
					panorama.setPano(data.location.pano);
				} else {
					if (proximity < MAX_PROXIMITY) {
						findClosestStreetView(point, proximity + 50);
					} else {
						// NO PANARAMA FOUND - do something else here...
						panorama.setVisible(false);
					}
				}
			});
		}

	}

</script>
<script src="https://maps.googleapis.com/maps/api/js?&libraries=places&callback=initMap" async defer></script>
</body>
</html>

Upvotes: 4

Related Questions