I have custom Google panorama. I init it like this:
panorama = new google.maps.StreetViewPanorama(document.getElementById('map'), {
pano: 'pano',
visible: true,
panoProvider: get_custom_panorama,
pov: {
heading: 345,
pitch: -10,
zoom: 0.7
},
mode : 'webgl',
zoomControlOptions: {
position: google.maps.ControlPosition.RIGHT_BOTTOM,
style: google.maps.ZoomControlStyle.LARGE
},
addressControl: false
});
I want to limit minimum zoom level to, let's say, 1.
Is it possible? I don't see any helpful options or listeners I can use.
The closest what I've found is:
panorama.addListener('zoom_changed', function() {
if (panorama.getZoom()<1)
{
var pov=panorama.getPov();
panorama.setPov({
heading: pov.heading,
pitch: pov.pitch,
zoom: 1
});
}
});
But even this doesn't work. And you can see why: on zoom_changed event zoom is already changed. I need something like "before_zoom_changed" listener...
Related
I am trying to implement this example on my webforms page, slightly different. I have a map and when I change its mode to streetview, I want to show a small map on its bottom left corner that follows the streetview. The image I think is clear of what I try to achieve.
When the map is initialised I do the following
var mapOptions = {
center: new google.maps.LatLng(latitude, longitude),
zoom: 10,
tilt: 30,
zoomControl: true,
zoomControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
},
streetViewControl: true,
streetViewControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
}
};
map = new google.maps.Map(document.getElementById("map"), mapOptions);
var smallmapOptions = {
center: new google.maps.LatLng(latitude, longitude),
zoom: 15
};
smallmap = new google.maps.Map(document.getElementById("smallmap"), smallmapOptions);
and when the pegman is dropped I set the streetview to the little map as following
google.maps.event.addListener(map.getStreetView(), 'visible_changed', function () {
if (this.getVisible()) {
$("#smallmap").show();
var streetViewPanorama = new google.maps.StreetViewPanorama(document.getElementById("map"), {
position: new google.maps.LatLng(latitude, longitude),
pov: {
heading: 34,
pitch: 10
}
});
smallmap.setStreetView(streetViewPanorama);
} else {
$("#smallmap").hide();
}
});
however I do not get the desired result as you see in this pic. My setup or way of doing this must be wrong.
edit: I also tried the following, but no difference
var streetViewPanorama = new google.maps.StreetViewPanorama(document.getElementById("map"), {
position: new google.maps.LatLng(this.position.lat(), this.position.lng()),
pov: {
heading: 34,
pitch: 10
}
});
by the way, I do not understand this pov property of the above, maybe this is causing the issue?
I changed the smallmapOptions code to the following and moved it inside the visible_changed event and now I see the small map clearly with the pegman walking according to the map's streetview
var smallmapOptions = {
center: new google.maps.LatLng(this.position.lat(), this.position.lng()),
zoom: 15
};
smallmap = new google.maps.Map(document.getElementById("smallmap"), smallmapOptions);
I've been trying to get google maps to work on my sencha touch page but it just won't work.
Ive found a lot of topics on this problem, but I can't seem to find the problem in my code. Basically at the moment I'm trying to put a marker on my current location with google maps. Later I will try to show a route based on a given adress. But when I open the page I only see the interface elements of the map. It keeps saying the following in my element inspector in chrome:
Uncaught RangeError: Maximum call stack size exceeded
ze
F.get
F.get
(anonymous function)
F.transform_changed
ag
ag
F.set
Rs.(anonymous function).ta
F.aa
Qh.(anonymous function).l
(anonymous function)
O.trigger
F.aa
Qh.(anonymous function).l
(anonymous function)
O.trigger
F.aa
Qh.(anonymous function).l
(anonymous function)
O.trigger
I just noticed I am also getting the following messages in element inspector:
Resource interpreted as Font but transferred with MIME type font/woff: "http://themes.googleusercontent.com/static/fonts/roboto/v9/Hgo13k-tfSpn0qi1SFdUfT8E0i7KZn-EPnyo3HZu7kw.woff".
Resource interpreted as Font but transferred with MIME type font/woff: "http://themes.googleusercontent.com/static/fonts/roboto/v9/2UX7WLTfW3W8TclTUvlFyQ.woff".
Resource interpreted as Font but transferred with MIME type font/woff: "http://themes.googleusercontent.com/static/fonts/roboto/v9/RxZJdnzeo3R5zSexge8UUT8E0i7KZn-EPnyo3HZu7kw.woff".
The code in my view is as follows:
Ext.define('Sencha.view.Tournaments', {
extend: 'Ext.Container',
xtype: 'tournamentPage',
config: {
title: 'maps',
layout: 'fit'
},
initialize : function() {
var lat, lng;
var geoLocationOptions = {
maximumAge: 3000,
timeout: 5000,
enableHighAccuracy: true
};
navigator.geolocation.getCurrentPosition(geoLocationSuccess,geoLocationError,geoLocationOptions);
function geoLocationSuccess(position) {
lat = position.coords.latitude;
lng = position.coords.longitude;
}
function geoLocationError() {
Ext.Msg.alert('Error','Error while getting geolocation');
}
var position = new google.maps.LatLng(lat,lng);
map = this.add({
xtype: 'map',
getLocation: true,
autoLoad: true,
mapOptions: {
zoom: 15,
center: position,
mapTypeId: google.maps.MapTypeId.ROADMAP,
navigationControl: true,
zoomControl: true,
mapTypeControl: true,
scrollwheel: true,
scaleControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE
}
}
});
marker = new google.maps.Marker({
id: 'geoLocMarker',
position: position,
map: map.getMap(),
visible: true
});
}
})
I hope I'm not asking to stupid of a question, I'm trying to learn! I've been going at it for a while now and it just does not seem to work! Thanks in advance.
var layout = Ext.create('Ext.panel.Panel', {
//renderTo: 'layout',
width: window.innerWidth,
height: window.innerHeight,
//title: 'Border Layout', //no title will be blank
layout: 'border',
items: [{
title: 'Message List',
region: 'south', // position for region
xtype: 'panel',
height: 100,
split: true, // enable resizing
collapsible: true,
margins: '0 5 5 5',
collapsed: true
},tree,{
xtype: 'gmappanel',
region: 'center',
id : 'mygooglemap',
center: new google.maps.LatLng(3.951941, 102.052002),
mapOptions: {
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
}],
renderTo: Ext.getBody() //get the body and display Layout at there
});
});
function addInfoWindow(lat,lng) {
var map123 = Ext.getCmp('mygooglemap');
var latLng = new google.maps.LatLng(lat, lng);
map123.SetCenter(latLng);
}
how come i can't set the map to center of the coordinate?
Firebug with this error
TypeError: map123.setCenter is not a function
[Break On This Error]
map123.setCenter(latLng);
EDITED
where is my GMapPanel.js download from https://raw.github.com/VinylFox/ExtJS.ux.GMapPanel/master/src/GMapPanel3.js
then i put it in my localhost/ux/GMapPanel3.js
and this is my config before use the GMapPanel
Ext.Loader.setPath('Ext.ux', 'ux/');
Ext.require([
'Ext.tree.*',
'Ext.data.*',
'Ext.window.MessageBox',
'Ext.window.*',
'Ext.ux.GMapPanel'
]);
but fail to set Center , why?
I am assuming that you are using the plugin from here: https://github.com/VinylFox/ExtJS.ux.GMapPanel
Assuming that is true, from looking at the code it looks like you need to use getMap() on your gmappanel before calling setCenter():
map123.getMap().setCenter(latLng);
Or, you can specify the setCenter property when configuring the gmappanel:
{
xtype: 'gmappanel',
region: 'center',
id : 'mygooglemap',
setCenter: {
lat: 3.951941,
long: 102.052002
},
mapOptions: {
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
}
One of the great things about ExtJS/Javascript is that you have access to the code of all of your libraries. When you see errors like "xxx is not a function", it should be pretty self-explanatory: the function you are trying to use is not available on the object on which you are calling it.
I have been struggling with this all day. I have made new buttons to actually go on my map that match the Google Maps buttons sit on the map better. I have been trying to get them to work with the current buttons above the map so I can remove those but I can't seem to get them to work. What am I missing.
Here is a link to the page so you can see. The buttons above the map work and I am going to remove them. The buttons on the map don't work which I am trying to get to work.
DEMO LINK
Here is the code. The var radarButton and var satButton is the new ones. The ones below that is to the current buttons.
jQuery(document).ready(function($) {
var mapTypeId = wundermap.getMapTypeId("hyb");
var googlemap = new google.maps.Map($("#map")[0], {
center: new google.maps.LatLng(32.782878, -96.609862),
panControl: false,
zoom: 6,
mapTypeId: mapTypeId,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL,
position: google.maps.ControlPosition.RIGHT_TOP
},
});
var radarOptions = {
gmap: googlemap,
name: 'Radar',
position: google.maps.ControlPosition.TOP_RIGHT,
action: function(){
if (wundermap.map.overlayMapTypes.length==0) {
wundermap.map.overlayMapTypes.push(null); // create empty overlay entry
wundermap.map.overlayMapTypes.setAt("1",Radar);
}
else {
wundermap.map.overlayMapTypes.clear();
}
}
}
var radarButton = new buttonControl(radarOptions);
var satOptions = {
gmap: googlemap,
name: 'Satellite',
position: google.maps.ControlPosition.TOP_RIGHT,
action: function(){
if (wundermap.map.overlayMapTypes.length==0) {
wundermap.map.overlayMapTypes.push(null); // create empty overlay entry
wundermap.map.overlayMapTypes.setAt("1",Satellite);
}
else {
wundermap.map.overlayMapTypes.clear();
}
}
}
var satButton = new buttonControl(satOptions);
wundermap.setOptions({
map: googlemap,
refreshPeriod: 60000,
units: "english",
debug: 0,
source: "wxmap",
StreetsOverlay: true,
layers: [
{
layer: "Radar",
active: "on",
opacity: 70,
type: "N0R",
type2: "",
animation: {
num: 6,
max: 10,
delay: 25
},
stormtracks: "off",
smooth: "on",
subdomain: "radblast-aws"
},
{
layer: "Satellite",
defaultUI: 0,
opacity: "85",
source: "",
active: "off",
animation: {
num: 1,
max: 8,
delay: 25
}
},
],
});
wundermap.initialize();
});
Here is the link to the code for the actual layer. The code is to long to post but the overlay is called Radar.
RADAR CODE
The place to start is the JavaScript console. The error messages there tell you what the problems are.
First, when the page is loaded you have an error on line 286 of wxgr3radar.php:
<body onload="initialize()">
Where is your initialize() function defined? I don't see it in your code.
Then, when I click the Satellite button it stops on line 41 of imap.js because map.overlayMapTypes is undefined:
if (map.overlayMapTypes.length==0) {
Here you're expecting map to be a Maps API object, but map is not what you think it is. Look at it in the debugger. It's a DOM element, not a Maps API map. Your Maps API map is in a variable called googlemap, which you create in line 3 of imap.js.
I am using google maps in my sencha touch application. And I am using current location as true. But some time I am getting my current location different some time.
Below is the code I have used to show map.
this.map = new Ext.Map({
mapOptions : {
zoom: 12,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.DEFAULT
}
},
useCurrentLocation: true,
});