i've declare my map
ChalkMobile.mapContent = new Ext.Map({
fullscreen: 'true',
useCurrentLocation: 'true',
mapOptions : {
zoom: 18,
},
});
but it's not showing in fullscreen. there's a large grey area and the map covers only less than 1/8 of the screen. any idea how to fix this?
thanks. =D
Have you tried the following?
layout: {
type: 'fit'
},
Related
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.
var layout = Ext.create('Ext.panel.Panel', {
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, {
html: '<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAZx1jmE9yB533ED9suD13buyd0pEfmTzI&sensor=false&dummy=.js">
</script>
<script type="text/javascript">
init();
function init() {
var googleMapOptions =
{
center: new google.maps.LatLng(53.5267, -1.13330),
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP};
map = new google.maps.Map(document.getElementById("map_canvas"),googleMapOptions);
}</script>
<body>
<div id="map_canvas" style="width:600px; height:400px"></div>
</body>',
renderTo: Ext.getBody()
}],
renderTo: Ext.getBody()
// get the body and display Layout at there
});
but i m using http://jsfiddle.net/anthor/ufTpN/ are work well, when paste in ExrJS then can't load google map. Why?
PS: I don't want to use Gmappanel and No Iframe, because I want to add marker on this page
First of all, I advise you to use Ext.ux.GMapPanelView basic implementation.
P/S:i don't want to use Gmappanel and No Iframe,because i want to add marker on this page
You can add a marker very simple, look at the code:
addMarker: function(marker) {
marker = Ext.apply({
map: this.gmap
}, marker);
if (!marker.position) {
marker.position = new google.maps.LatLng(marker.lat, marker.lng);
}
var o = new google.maps.Marker(marker);
Ext.Object.each(marker.listeners, function(name, fn){
google.maps.event.addListener(o, name, fn);
});
return o;
}
So you can even add listeners to it.
What you are trying to do in the code snippet (example):
{
html: '<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAZx1jmE9yB533ED9suD13buyd0pEfmTzI&sensor=false&dummy=.js"></script>
<script type="text/javascript">
init();
function init() {
var googleMapOptions = {
center: new google.maps.LatLng(53.5267, -1.13330),
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP};
map = new google.maps.Map(document.getElementById("map_canvas"),googleMapOptions);
}
</script>
**<body>**
<div id="map_canvas" style="width:600px; height:400px"></div>
**</body>**',
**renderTo: Ext.getBody()**
}
Sorry, absolutely is wrong. Adding body tag, rendering to body being under the panel container Ext.panel.Panel, which itself renders its items and etc, this looks that you know not much about the ext's internals and how it works.
You are trying to do something similar that guys from sencha propose to use via basic and very, very simple ux implementation. You can extend it even further.
Just take a look at:
GMapPanelView example
also look at the source just to see where googleapis are plugged (you can extend the gmap view loading it async if you want)
GMapPanelView source code
example source
An very simple example with layout border, you have used. In the west region you can find add button, press it to add marker.
Gmap usage, jsfiddle (just an example; don't write actual code this way)
Do not be afraid to look at the source!
Good Luck ;)
I'm setting a map for mobile device and want to utilize the zoom slider.
g.map = new google.maps.Map(
document.getElementById("mapcanvas"),
{
disableDoubleClickZoom : false,
disableDefaultUI : true,
scaleControl : true,
panControl : false,
navigationControl : true,
mapTypeControl : false,
zoomControlOptions : {
position : google.maps.ControlPosition.RIGHT_BOTTOM,
style : google.maps.ZoomControlStyle.LARGE
},
mapTypeControlOptions: {
mapTypeIds : [
google.maps.MapTypeId.ROADMAP,
google.maps.MapTypeId.HYBRID
],
style : google.maps.MapTypeControlStyle.HORIZONTAL_BAR
},
zoom : 16,
center : new google.maps.LatLng('37.8477', '-122.2627'),
mapTypeId : google.maps.MapTypeId.ROADMAP
}
When I look at this on desktop the control is the slider, but on a mobile device, it still displays the small + and - buttons and no slider.
Is this a bug? How can I force the slider for zooming?
No, this is not a bug. The default behaviour for the zoom tool is to display large on large screen devices, and small (just the + -) on smaller screens like phones.
If you would like to always see the larger zoom tool with the slider, you need to set google.maps.ZoomControlStyle.LARGE in mapOptions. Ex:
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(-33, 151),
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE
}
}
Here is my source:
https://developers.google.com/maps/documentation/javascript/controls#DefaultUI
You can set the undocumented controlSize map option property with an integer value (i.e., 20) for setting the size of the map controls.
Please see the #Dutchmanjonny's post for the latest: Huge Google Maps Controls (Possible Bug?)
According to the screenshot below, I have a grey border/padding around the Google map, did someone know how to remove it?
Thanks
Here is my code:
var map;
function initialize(canvas,lat,lng) {
var myOptions = {
zoom: 16,
center: new google.maps.LatLng(lat,lng),
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP,
panControl: false,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL,
position: google.maps.ControlPosition.LEFT_TOP
},
scaleControl: false,
streetViewControl: false,
scrollwheel: false
};
map = new google.maps.Map(document.getElementById(canvas),myOptions);
}
I have 3 page to embed the Google map, and I added the code below to call Google map
$(document).ready(function() {
initialize("causewayBayMapCanvas","22.281001", "114.186375");
});
UPDATE:
<div style="width:300px; height:200px; border: 1px solid #0051B9">
<div id="<?php echo $mapId;?>" class="map rounded"></div>
</div>
Looks like a zero size div problem. You didn't provide the code that sets the size of the map div. You need to make sure the size is defined when your initialize function is called. If you are using percentage heights and widths, see this (v2) tutorial from Mike Williams' that addresses percentage sizes for maps: The Basics - Part 20 Using a percentage height for the map div
I've had this problem before too.
The way I fixed was to resize the map by using this code after initializing the map:
google.maps.event.trigger(map, 'resize');
If you have the map showing up on multiple pages, you may need to do this whenever the user goes to the page.