I am having trouble trying to disable panning on google street view panorama for my app. I've looked at the Street View's documentation and couldn't find any ways to do it. Is it even possible to do this? Thanks~
This is working as intended as panoramas are essentially long pan-able images.
I suggest using Street View Static API instead to get stills of the same photosphere.
For exampl, this fiddle can also be achieved through Street View Static.
Fiddle Street View code :
var fenway = {lat: 42.345573, lng: -71.098326};
var panorama = new google.maps.StreetViewPanorama(
document.getElementById('pano'), {
position: fenway,
pov: {
heading: 160,
pitch: 10
},
clickToGo : false,
panControl: false
});
Static StreetView query :
https://maps.googleapis.com/maps/api/streetview?size=800x600&location=42.345573,-71.098326&heading=160&pitch=10&YOUR_API_KEY
Related
I've disabled streetview controls like so:
var mapOptions = {
zoom: 16,
center: myCenter,
streetViewControl:false
};
var map = new google.maps.Map(
document.getElementById("map"),
mapOptions
);
Which takes the streetview control off of the map BUT if you click on a point of interest with a panoramic image / link to streetview then click that image you are again taken into streetview mode.
I want to keep my points of interest but I want to disable maps from going into streetview mode. Is this possible?
Solution
Using the answer below I added a few more items:
.gm-rev, .gm-sv-label{display:none;}
.gm-iw, .gm-sm, .gm-wsv{pointer-events:none;}
2 possible options(there may be more):
prevent the streetView from being visible:
google.maps.event.addListener(map.getStreetView(), 'visible_changed', function(){
if(this.getVisible()){this.setVisible(false)}
});
try to make the streetview-link in the infowindow un-clickable
.gm-sv-label{display:none;}
.gm-wsv{pointer-events:none;}
I would suggest to use both options together, because the 2nd option may fail in the future(the classNames may change)
I am using street view on my site with pancontrols and zoomControls in it. For now google provides us some defined positions like RIGHT_CENTER etc. I want my custom position using css, I have taken help from this link Google Maps API V3 custom controls position but it is not working may be because it is for Road map and I need for street view. The code which I have used for calling street view is
function initialize() {
var fenway = new google.maps.LatLng(42.345573, -71.098326);
var panoOptions = {
position: fenway,
pov: {
heading: 280.19,
pitch: -22.444,
zoom:0.2
},
addressControl: false,
panControlOptions: {
position: google.maps.ControlPosition.RIGHT_CENTER
},
panControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL,
position: google.maps.ControlPosition.RIGHT_CENTER
},
enableCloseButton: false
};
var panorama = new google.maps.StreetViewPanorama(
document.getElementById('map-canvas'), panoOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
Thanks in Advance.
Check Custom Street View examples and this CUSTOM STREET VIEW FIDDLE
AFAIK you must link your panorama to the image of the streetview, thats nice if you want to make your own street view, if you want to get a google one, you must get the URL to force the view enter in streetview.
function getCustomPanoramaTileUrl(pano, zoom, tileX, tileY) {
// Note: robust custom panorama methods would require tiled pano data.
// Here we're just using a single tile, set to the tile size and equal
// to the pano "world" size.
return 'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQTaHe0F0J39SXbiRF43pz2wtyfD6kypCMrLxhWPkq9EACNgwO0iaMbJFM';
}
You have everything that you need to do this in the answer that you linked to above. You can pick from one of two choices:
The hack... This isn't recommended because if google maps decides to
change their layout, your code will break. To do this for
streetview, inspect the streetview window to find which 'gmnoprint'
you want to move. As an example, putting this after the panorama
load, moves the controls:
setTimeout( function() {
$($('div.gmnoprint')[4]).css({left: '-300px', background: 'red'});
}, 1000);
The best way to do it, as suggested at Google Maps API V3 custom controls position is to hide the streetview controls, create your own controls, and put them wherever you like. This takes much more effort, but it will not break when the streetview layout changes.
So, i have a problem. I had google maps street view on my site, there was a building panorama (inside), now API shows only street view near this building. Why and how can i fix it?
Here is my code:
function initialize() {
var fenway = new google.maps.LatLng(52.4980685,13.2951895);
var panoramaOptions = {
zoom: 1,
panControl:false,
zoomControl:false,
mapTypeControl:false,
scaleControl:false,
rotateControl:false,
streetViewControl:false,
overviewMapControl:false,
disableDefaultUI: false,
addressControl: false,
addressControlOptions: {
position: google.maps.ControlPosition.BOTTOM,
hide: true
},
position: fenway,
pov: {
heading: 0,
pitch: 0
}
};
var panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'), panoramaOptions);
google.maps.setStreetView(panorama);
}
google.maps.event.addDomListener(window, 'load', initialize);
This may be a kind of bug(feel free to report it).
I guess you are talking about the place "Shebell Institut".
Let me explain why it's a bug:
Currently
the ID for this panorama is (at least for me):ag1bfIf47xUAAAGuxVUjCQ
and the location of the panorama(reported by the StreetViewService): (52.498042,13.29517199999998)
The location in your code differs a little bit, but when I use the exact location it should show the desired panorama(because it's the nearest)...but it doesn't.
Also when I query the panorama via StreetViewService.getPanoramaByLocation another panorama (with another location) will be returned, although the documentation says:
If the radius is less than 50 meters, the nearest panorama will be returned.
...but when I use the exact location it shouldn't return a panorama with another location.
I don't have a solution, because regarding to the documentation panorama-ID's are only stable within sessions.
But this must not mean that the panorama-ID must change often(I don't know what forces the change of a panorama-ID, but I can't imagine that the ID will be changed randomly).
So let's give it a try and use the panorama-ID(optionally).
set the panorama-location(fenway in this case) to
(52.498042,13.29517199999998)
request the panoramaData based on the ID (ag1bfIf47xUAAAGuxVUjCQ)
when both locations (fenway and the location of the returned panorama) are equal you may assume that it's still the ID of the desired panorama and use this panorama
new google.maps.StreetViewService()
.getPanoramaById('ag1bfIf47xUAAAGuxVUjCQ',
function(data,status){
if(google.maps.StreetViewStatus.OK===status
&&
data.location.latLng.toUrlValue()==fenway.toUrlValue()
){
panorama.setPano(data.location.pano);
}
});
Demo: http://jsfiddle.net/doktormolle/uwqvr5ee/
When it's sometimes not the desired panorama you may send a notification to the site-admin so that he may update the pano-ID.
I know it's not perfect, but it's the only approach I can think of so far(apart from a custom panorama)
can anyone please point me in the right direction about how to implement google maps in sencha touch 2.2.1 in an MVC fashion? a good step by step tutorial maybe?
I need to have a view and a controller but am not sure what is the correct way of doing it as regards defining map options and initializing the map. Been looking at various tutorials on the Internet but none of them matches exactly what I want to implement.
I am using a tab panel and my map needs to be displayed when clicking one of the tabs (called Location)...
first, you have to put the map panel as item of your tab container:
{
xtype: 'map',
useCurrentLocation: false,
mapOptions: {
disableDefaultUI: true,
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
}
next, you can refer to it in the specific controller for this view in this way:
config: {
refs: {
...
mymap: '.map',
...
},
...
}
in that way you can have a reference of your map object in the controller by typing:
this.getMymap()
and can attach an handler to the map to make some action on it when it is rendered:
this.getMymap().on('maprender', this.onMapRender, this, { single: true });
where "onMapRender" is a method of your controller. You have to do in that way if you want, for example, render a marker over the map and center it, because before the "maprender" event dispatched by the map, you can not do any action over it (the GMap object simply does not yet exists), so, for example, in your controller, the handler could be:
onMapRender: function(e) {
var latLngCoordinates = new google.maps.LatLng(..., ...)
marker = new google.maps.Marker({
position: latLngCoordinates,
animation: google.maps.Animation.DROP,
map: this.getMymap().getMap()
});
this.getMymap().setMapCenter(latLngCoordinates);
}
enjoy with it ;)
I'm working in a project where I need to show google map street view heading towards road.
I've set the heading: 0 for the panorama object. But for different location it shows the heading differently. for example in some cases it shows heading towards street, for some locations it shows heading towards home.
panorama = theMap.getStreetView();
panorama.setPosition(new google.maps.LatLng(<?php echo $lat; ?>, <?php echo $lng; ?>););
panorama.setPov({
heading: 0,
zoom:1,
pitch:0
});
If there any way can fix the heading towards street for all post codes?
Thanks
Finally I found a very easy solution..
For the street view there's two links to navigate, that point towards street. I just read those heading and set the street view POV towards that direction. Here's full code.
var panoramaOptions = {
position: langlongObj,
visible: true
};
var panorama = new google.maps.StreetViewPanorama(document.getElementById("map_canvas"), panoramaOptions);
map.setStreetView(panorama);
google.maps.event.addListener(panorama, 'links_changed', function() {
var links = panorama.getLinks();
panorama.setPov({
heading: links[0].heading,
pitch: 0,
zoom: 1
});
});