street view panorama completely grey - google-maps

I have created a street view backbone view. The problem is that when shown, the panorama is completely grey. I am not sure if it has to do with the fact that it is inside a tab and the panorama is rendered when the tab is opened.
I am guessing that it might be an analogous problem that is fixed calling the resize event. Is there any similar thing that I could do?
App.DetailStreetView = Backbone.View.extend({
initialize: function() {
this.latLng = new google.maps.LatLng(37.869085,-122.254775);
},
render: function() {
var sv = new google.maps.StreetViewService();
this.panorama = new google.maps.StreetViewPanorama(this.el);
sv.getPanoramaByLocation(this.latLng, 50, this.processSVData);
},
processSVData: function(data, status) {
if (status == google.maps.StreetViewStatus.OK) {
// calculate correct heading for POV
var heading = google.maps.geometry.spherical.computeHeading(data.location.latLng, this.latLng);
this.panorama.setPano(data.location.pano);
this.panorama.setPov({
heading: 270,
pitch:0,
zoom:1,
});
}
},
refresh: function() {
this.panorama.setVisible(true);
google.maps.event.trigger(this.panorama, 'resize');
}
});
EDIT:
I created a JSFiddle that replicates the problem: http://jsfiddle.net/kNS2L/3/

Yeah, this is the old display:none with Maps and Panoramas. It works when I add setVisible(true):
$('button').click(function() {
$('#pano').show();
panorama.setVisible(true);
});

Related

Panotour Pro 2 - Adding KML in Google Maps API v3

I have been working with the Google Maps API v3 in Panotour for a few days now and had been adding my own KML layers to my Panotour Maps. I had it working yesterday but today it seems to have been broken somehow.
To add my own KML layers I am basically just adding a piece of script to my project build under "\graphics\KolorMap\lib\mxn.googlev3.core".
This is the chunk of code I was piecing into the googlev3.core file. Its the KML sample from the developers website. I wanted to get it working before adding my own custom stuff.
var ctaLayer = new google.maps.KmlLayer({
url: 'http://gmaps-samples.googlecode.com/svn/trunk/ggeoxml/cta.kml'
});
ctaLayer.setMap(map);
I have added a link to the mxn.googlev3.core. If anyone knows where I need to put my code or if I need to add anything that would be much appreciated.
mxn.googlev3.core
Thanks in advance
There are still some bugs that I am sorting through and I may still need some help with them.
Below is the code excerpt from the mxn.googlev3.core file. The code is from Line 1 to about Line 140. I forget where exactly because I have added my own code.
mxn.register('googlev3', {
Mapstraction: {
init: function(element, api){
var me = this;
if (typeof google.maps.Map === 'undefined') {
throw new Error(api + ' map script not imported');
}
// by default add road map and no controls
var myOptions = {
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
mapTypeControlOptions: null,
zoomControl: false,
zoomControlOptions: null,
panControl: false,
panControlOptions: null,
scaleControl: false,
scaleControlOptions: null,
scrollwheel: true,
draggable: false,
disableDoubleClickZoom: true
};
// Background color can only be set at construction
// To provide some control, adopt any explicit element style
var backgroundColor = null;
if ( element.currentStyle ) {
backgroundColor = element.currentStyle['background-color'];
}
else if ( window.getComputedStyle ) {
backgroundColor = document.defaultView.getComputedStyle(element, null).getPropertyValue('background-color');
}
// Only set the background if a style has been explicitly set, ruling out the "transparent" default
if ( backgroundColor && 'transparent' !== backgroundColor ) {
myOptions.backgroundColor = backgroundColor;
}
// find controls
if (!this.addControlsArgs && loadoptions.addControlsArgs) {
this.addControlsArgs = loadoptions.addControlsArgs;
}
if (this.addControlsArgs) {
if (this.addControlsArgs.zoom) {
myOptions.zoomControl = true;
if (this.addControlsArgs.zoom == 'small') {
myOptions.zoomControlOptions = {style: google.maps.ZoomControlStyle.SMALL,position: google.maps.ControlPosition.TOP_LEFT};
}
if (this.addControlsArgs.zoom == 'large') {
myOptions.zoomControlOptions = {style: google.maps.ZoomControlStyle.LARGE,position: google.maps.ControlPosition.TOP_LEFT};
}
}
if (this.addControlsArgs.scale) {
myOptions.scaleControl = true;
myOptions.scaleControlOptions = {style:google.maps.ScaleControlStyle.DEFAULT,position: google.maps.ControlPosition.BOTTOM_LEFT};
}
if (this.addControlsArgs.pan) {
myOptions.panControl = true;
myOptions.panControlOptions = {position: google.maps.ControlPosition.TOP_LEFT};
}
if (this.addControlsArgs.map_type) {
myOptions.mapTypeControl = true;
myOptions.mapTypeControlOptions = {style: google.maps.MapTypeControlStyle.DEFAULT,position: google.maps.ControlPosition.TOP_RIGHT};
}
if (this.addControlsArgs.overview) {
myOptions.overviewMapControl = true;
myOptions.overviewMapControlOptions = {opened: true};
}
}
// Enable the visual refresh
google.maps.visualRefresh = true;
var map = new google.maps.Map(element, myOptions);
var fireOnNextIdle = [];
google.maps.event.addListener(map, 'idle', function() {
var fireListCount = fireOnNextIdle.length;
if (fireListCount > 0) {
var fireList = fireOnNextIdle.splice(0, fireListCount);
var handler;
while((handler = fireList.shift())){
handler();
}
}
});
// deal with click
google.maps.event.addListener(map, 'click', function(location){
me.click.fire({'location':
new mxn.LatLonPoint(location.latLng.lat(),location.latLng.lng())
});
});
// deal with zoom change
google.maps.event.addListener(map, 'zoom_changed', function(){
// zoom_changed fires before the zooming has finished so we
// wait for the next idle event before firing our changezoom
// so that method calls report the correct values
fireOnNextIdle.push(function() {
me.changeZoom.fire();
});
});
// deal with map movement
var is_dragging = false;
google.maps.event.addListener(map, 'dragstart', function() {
is_dragging = true;
});
google.maps.event.addListener(map, 'dragend', function(){
me.moveendHandler(me);
me.endPan.fire();
is_dragging = false;
});
google.maps.event.addListener(map, 'center_changed', function() {
me.endPan.fire();
});
// deal with initial tile loading
var loadListener = google.maps.event.addListener(map, 'tilesloaded', function(){
me.load.fire();
google.maps.event.removeListener( loadListener );
if (!is_dragging) {
fireOnNextIdle.push(function() {
me.endPan.fire();
});
}
});
this.maps[api] = map;
this.loaded[api] = true;
// THIS IS THE KML CODE THAT YOU NEED TO INSERT -START
var ctaLayer = new google.maps.KmlLayer({
url: 'Insert your kml here link here'
});
ctaLayer.setMap(map);
//END KML CODE SECTION
},
The "Insert your kml link here" is where you put your kml url link.
For some reason the attributes stop displaying at intermittent times. They will work and then I will go to click on a feature again to view the attributes and nothing. This is one of the bugs. I am also messing around with document links within the kml feature attribute tables. As I get deeper into this this Panoramic program is becoming more of a GIS program.
If anyone has any other ideas about this please feel free to make suggestions.

Durandal SPA Google Map API Map Centering

There are a few posts regarding issues with google map api centering properly. I understand the following resizes the map:
google.maps.event.trigger(map, 'resize');
I was able to get the map to display properly within the div element on first page display. However, when navigating back to the html page that holds the map, only a fraction of the map displays within the div. The problem i'm having is figuring out how to incorporate this resize trigger. I'm new to SPA's and Durandal, here is my viewmodel responsible for the map:
define(['async!https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false'], function () {
var vm = {
title: 'Home View',
attached: initialize,
activate: function () {
toastr.success('Map View Activated');
}
};
return vm;
function initialize() {
var mapOptions = {
zoom: 10,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
});
Sure, you'd want to do this when the map is visible, i.e. it has a height and width. The best event for this is typically the composition complete event. So:
var vm = {
title: 'Home View',
attached: initialize,
activate: function () {
toastr.success('Map View Activated');
},
compositionComplete: function() {
google.maps.event.trigger(map, 'resize');
}
};
See the list and description of all callbacks here: Hooking Lifecycle Callbacks

Google Maps API v3, jQuery , Tabs, map not showing on hidden div

This question had already been addressed multiple times, but all the solutions don't fix the problem in my case. It's as many already wrote: tabs used to display different parts of content, when loading the map in tab1 i.e. the one that opens on pageload, it displays fine.
When loading the map inside one of the other tabs, that need to be clicked, to be called, it doesn't draw the map as it is supposed to.
I already tried adding the google.maps.event.trigger(map, 'resize'); when the tab is clicked, but it doesn't do anything.
Here is my code, i am going crazy over this, have spent 10+ hours trying all suggestions !
This is the part that handles the tabs being clicked :
$(document).ready(function() {
//Default Action
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content
//On Click Event
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
if (activeTab=='#tab4') {
google.maps.event.trigger(map, 'resize');
map.setZoom( map.getZoom() );
}
$(activeTab).fadeIn(
); //Fade in the active content
return false;
});
});
When using an alert to see if the code is called on tab4 it works.
Here is the googlemaps code
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(<? echo $lattie; ?>, <? echo $langie; ?>),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map,
title: 'Click to zoom'
});
google.maps.event.addListener(map, 'center_changed', function() {
// 3 seconds after the center of the map has changed, pan back to the
// marker.
window.setTimeout(function() {
map.panTo(marker.getPosition());
}, 3000);
});
google.maps.event.addListener(marker, 'click', function() {
map.setZoom(8);
map.setCenter(marker.getPosition());
});
}
google.maps.event.addDomListener(window, 'load', initialize);
I am calling intitalize() in the body tag, changing this to the place where i am calling the resize, doesn't solve it either.
Finally the bit that shows the div with the map-canvas :
<li id="four">
<div id="map-canvas" style="width:575px; height:500px;float:left;border:1px solid #d74c15;"></div>
</li>
As i said, i am going crazy over this, i just can't get it to work, any help would be much appreciated !
This is a little bit tricky in one of my projects some time ago I got stuck on the same thing while trying to hide and show the map via a link.For me the resize event handler was all I needed but make sure to add the following code after it:
UPDATE here is the complete function used.
function showMap(){
if(animating == false)
{
animating = true;
if(mapVisible == false)
{
$("#map-wrapper").animate({
height:352
},500,function(){
$("#create-event-map").fadeIn("fast");
google.maps.event.trigger(eventsMap, 'resize');
var center = new google.maps.LatLng(38,24);
eventsMap.setCenter(center);
$("#show-map-wrapper a").html("Hide map");
mapVisible = true;
animating = false;
})
}
else
{
$("#create-event-map").fadeOut("fast",function(){
$("#map-wrapper").animate({
height:0
},500);
$("#show-map-wrapper a").html("Show map");
mapVisible = false;
animating = false;
})
}
}
return false;
}
working example here: http://goo.gl/2syX8
it's in the create.event.init.js file if you want to check it out
UPDATE
In your case if you want to refresh the map you should change this code:
if (activeTab=='#tab4') {
google.maps.event.trigger(map, 'resize');
map.setZoom( map.getZoom() );
}
$(activeTab).fadeIn(
); //Fade in the active content
With this:
if(activeTab == 'YOUR TAB ID')
{
$(activeTab).fadeIn(function(){
google.maps.event.trigger(map, 'resize');
var center = new google.maps.LatLng(<LAT>,<LNG>);
map.setCenter(center);
map.setZoom( map.getZoom() );
})
}
Store the last used lat and lng and replace them in this piece of code.

How to set another function to closebutton in panorama

(sorry for my english) i have a problem,,, I´m trying to create a web in which user click on a polygon and it move user to another page with Google Street View Panorama (this i have). But i also need a code to move user back from "panorama page" to "polygons page" after clicking on close button in panorama. I tried to use the same code like i used before to move user to "panorama page" but it doesn´t work (it just closes panorama, but doesn´t move back to "polygons page"). The line:
google.maps.event.addListener(panorama, "closeclick", function(event) { window.location = "index.html"; })
is the code to move user back to "polygons page" (index.html). Here is the whole code:
function initialize() {
var panoOptions = {
pano: 'Kuchyn',
enableCloseButton: true,
pov: {
heading: 0,
pitch: 0,
zoom: 0
},
panoProvider: getCustomPanorama,
visible: true};
var panorama = new google.maps.StreetViewPanorama(
document.getElementById('map-canvas'), panoOptions);
function getCustomPanoramaTileUrl(pano, zoom, tileX, tileY) {
return 'images/Untitled.jpg';}
function getCustomPanorama(pano, zoom, tileX, tiley) {
if (pano == 'Kuchyn') {
return {
location:
{pano: 'Kuchyn',
description: 'Kromeriz - Kuchyn'},
links: [],
copyright: 'Oznog (c) 2013',
Heading: 180,
tiles:
{tileSize: new google.maps.Size(4096, 2048),
worldSize: new google.maps.Size(4096, 2048),
centerHeading: 180,
verticalFOV: 90,
getTileUrl: getCustomPanoramaTileUrl}
};
}
}
}
google.maps.event.addDomListener(window, 'load', initialize);
google.maps.event.addListener(panorama, "closeclick", function(event) { window.location = "index.html"; })
Please help me, Jan.
Your eventListener for panorama is outside initialize function, move it under panorama declaration as follows:
var panorama = new google.maps.StreetViewPanorama(
document.getElementById('map-canvas'), panoOptions);
// move it here
google.maps.event.addListener(panorama, "closeclick", function(event) { window.location = "index.html"; });
This is because you are not declaring panorama as a global variable, so it cant be attached correctly. Other option is to declare it as global variable var panorama; to above your initialize method.
Cheers.

How to add multiple markers on mobile Google Map and display the content when click?

hello i am working on the phonegap apps which can display the location markers on google map.
It is supposed to have a detail box pop up when i click on the marker, but it does not function.
can anyone help me to correct the code?
many thanks
var mobileDemo = { 'center': '57.7973333,12.0502107', 'zoom': 8 };
////////////////////////////////////////////////////////////
$('#basic_map').live('pageinit', function() {
demo.add('basic_map', function() {
$('#map_canvas').gmap({'center': mobileDemo.center, 'zoom': mobileDemo.zoom, 'disableDefaultUI':true,
'callback': function() {
var self = this;
self.addMarker({'position': this.get('map').getCenter() }).click(function() {
self.openInfoWindow({ 'content': 'Hello World!' }, this);
});
}});
$('#map_canvas').gmap('addMarker', { position: new google.maps.LatLng(57.9973333,12.0502107)})
.click(function() {
var self = this;
self.openInfoWindow({ 'content': 'Hello Worl23!' }, this);
} )
$('#map_canvas').gmap('addMarker', { position: new google.maps.LatLng(57.373333,12.0502107)})
.click(function() {
var self = this;
self.openInfoWindow({ 'content': 'Hello Worl234!' }, this);
} )
}).load('basic_map');
});
$('#basic_map').live('pageshow', function() {
demo.add('basic_map', function() { $('#map_canvas').gmap('refresh'); }).load('basic_map');
});
</script>
There is a easier way to use Google Maps api,https://github.com/HPNeo/gmaps. And what you need almost like this,http://hpneo.github.com/gmaps/examples/markers.html, you click the marker and the detail info shows