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.
Related
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
The Google Maps documentation offers some customization of the StreetViewPanorama. However, what I'm using is the regular Google Maps Map, but with the option to go to Street view, as the StreetViewControl option is on.
Once the user goes into Street View on my Google Maps, the Street View shows default controls: A fullscreen button on the top right, and a back button with the address on the top left. But this is something my users don't quite intuitively understand (and frankly I don't blame them). I need a way to hide those controls, so I can substitute my own buttons.
I am familiar with detecting when a user has entered Street View, and I know how to show a button to have it exit Street View. What I don't know is, can I hide Google's default "back" button? I've tried using the properties of the StreetViewControl object straight into my Map object initialization, but it doesn't work; and understandably so, since some of the option names clash.
Per request, here is the code for showing the map, and showing/hiding my button that exits the Street view:
// Create a map object and specify the DOM element for display.
map = new google.maps.Map(document.getElementById('map'), {
center: this.mapCenter,
scrollwheel: true,
scaleControl: false,
overviewMapControl: false,
zoom: this.zoom
});
// Show the button for exiting Street View when Street view is entered
google.maps.event.addListener(map.getStreetView(), 'visible_changed', function(){
if(this.getVisible() == true) {
document.getElementById("exitStreetViewButton").style.display = "block";
} else {
document.getElementById("exitStreetViewButton").style.display = "none";
}
});
And this is the code that the Exit button executes to exit the Street View:
map.getStreetView().setVisible(false);
You can use this option:
panorama.setOptions(
{
enableCloseButton:false
}
);
I just ran into the same problem. Disabling the UI doesn't work, the exit button is the only element (besides the legal stuff at the bottom) still there.
As far as the documentation goes there is no way to remove it. I resorted to hiding it using css:
.gm-iv-container {
display: none;
}
Have a look at the StreetViewPanoramaOptions.
Try the disableDefaultUI option. You can set it to true to disable the default UI then enable some controls individually if you need.
var panoramaOptions = {
disableDefaultUI: true
};
JSFiddle demo
Edit:
If you need you can also do it that way:
var panorama = map.getStreetView();
panorama.setOptions(panoramaOptions);
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)
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 ;)