PDA

View Full Version : Who got Google Maps V3 and Ext JS 4 running?



Gunmen
5 Jul 2011, 1:39 PM
Hi there,

Who got Google Maps V3 and Ext JS 4 running in a window panel?

I can't get the code of @VinylFox to work. I have added ext-all.js and ext-all.css, and his Ext.ux.GMapPanel3.js. Error: Uncaught TypeError: Object #<Object> has no method 'reg'. I guess the system of registration an extension has changed but not in this extension.

Is there a good working example?

Thanks!

jbuonagurio
5 Jul 2011, 3:20 PM
I'm having similar problems trying to get Bing Maps working, the map renders fine inside of a panel but maybe I'm not fully understanding this MVC pattern, because I can't figure out how to use methods from outside the Ext.define.



/**
* Map View
* @extends Ext.Panel
*/

Ext.define('App.view.Map', {
extend: 'Ext.Panel',
alias: 'widget.mappanel',

border: false,
initComponent: function() {
this.callParent(arguments);
this.on('afterrender', this.afterRender, this);
},
afterRender: function() {
var bingMapsKey = 'KEY';
var wh = this.ownerCt.getSize();

Ext.applyIf(this, wh);
this.callParent(arguments);

this.map = new Microsoft.Maps.Map(
this.body.dom,
{
credentials: bingMapsKey,
mapTypeId: Microsoft.Maps.MapTypeId.road,
enableClickableLogo: false,
enableSearchLogo: false,
zoom: 7
}
);
},
setLocation: function() {
var geoLocationProvider = new Microsoft.Maps.GeoLocationProvider(this.map);
geoLocationProvider.getCurrentPosition();
}
});


I guessed from this I'd be able to call App.view.Map.setLocation() but I get the "has no method" error. The map itself works fine though, if you don't need to interact with it you should be able to use Google Maps in the same way.

Gunmen
6 Jul 2011, 1:06 AM
@jbuonagurio: Did you checked GMapPanel (https://github.com/VinylFox/ExtJS.ux.GMapPanel) of Ext JS community member VinylFox?

VinylFox
6 Jul 2011, 5:05 AM
I'm actually working on an ExtJS 4 compatible version right now.

jbuonagurio
6 Jul 2011, 6:37 AM
@jbuonagurio: Did you checked GMapPanel (https://github.com/VinylFox/ExtJS.ux.GMapPanel) of Ext JS community member VinylFox?

Yes I did (thanks VinylFox) and it appears to work similarly, but the variable scoping and inheritance in Ext JS 4 seems to work differently, maybe someone can clarify. For example in GMapPanel3.js the gmap object is defined in the apiReady function:


this.gmap = new google.maps.Map(this.body.dom, {
zoom: this.zoomLevel,
mapTypeId: google.maps.MapTypeId.ROADMAP
});


The getMap method is then able to return the same object, but it doesn't seem to work this way in Ext JS 4. This code would not work:



getMap : function() {
return this.gmap;
},


I got around it by just defining gmap (map in my case) as a static variable and calling methods using prototype, e.g. App.view.Map.prototype.getPosition(); but I'm not sure if this is good practice.

Gunmen
6 Jul 2011, 8:53 AM
I'm actually working on an ExtJS 4 compatible version right now.
Whohoo! Do you have a release date in mind?

I would love to use your extension to dynamically add and remove markers. This is where I'm now working on.

In the V2 maps extention version I had the problem that I could not center the map without adding a marker in the center (combined setting). I hope in the new version we can center the map without adding a marker.

Gunmen
6 Jul 2011, 2:11 PM
Shea, can you tell how to add markers in the 'old version'? This is what I have so far...



point = new GLatLng(record.data.geo.coordinates[0], record.data.geo.coordinates[1]);
Ext.getCmp('map').addMarker(point, false, false, false, null);


How can I add a title? And show a msg or alert when the user clicks on a marker?

VinylFox
7 Jul 2011, 9:58 AM
Did you see the createInfoWindow method?

Gunmen
7 Jul 2011, 10:34 AM
Nope, and that is because I'm using the older extension (with Maps V2). Why? Because that is the one I can get to work. In the older version I could not find a createInfoWindow function.

Gunmen
8 Jul 2011, 1:17 PM
And I got it to work via the Maps documentation. Thank you all for your support. And yes, I look forward for further updates of this extension.

cdg10620
16 Aug 2011, 12:38 PM
@VinylFox, is there any update on when a compatible version will be available?

Thanks.

cdg10620
17 Aug 2011, 5:50 AM
I've been trying to get the GMapPanel created by @VinylFox working with ExtJs 4 and Google Maps V3. I edited the GMapPanel.js source and finally got it to load. I have the source as follows:




Ext.namespace('Ext.ux.panel');
/**
* MODIFIED: CDG10620
* Edited source to make compatible with ExtJS.
* Added support for gmapType: 'satellite' to enable the satellite map on load.
*/


Ext.define( 'Ext.ux.GMapPanel', {
extend: 'Ext.panel.Panel',
/**
* @cfg {Boolean} border
* Defaults to <tt>false</tt>. See {@link Ext.Panel}.<code>{@link Ext.Panel#border border}</code>.
*/
border: false,


/**
* @cfg {Array} respErrors
* An array of msg/code pairs.
*/
respErrors: [{
code: 'UNKNOWN_ERROR',
msg: 'A geocoding or directions request could not be successfully processed, yet the exact reason for the failure is not known.'
},{
code: 'ERROR',
msg: 'There was a problem contacting the Google servers.'
},{
code: 'ZERO_RESULTS',
msg: 'The request did not encounter any errors but returns zero results.'
},{
code: 'INVALID_REQUEST',
msg: 'This request was invalid.'
},{
code: 'REQUEST_DENIED',
msg: 'The webpage is not allowed to use the geocoder for some reason.'
},{
code: 'OVER_QUERY_LIMIT',
msg: 'The webpage has gone over the requests limit in too short a period of time.'
}],
/**
* @cfg {Array} locationTypes
* An array of msg/code/level pairs.
*/
locationTypes: [{
level: 4,
code: 'ROOFTOP',
msg: 'The returned result is a precise geocode for which we have location information accurate down to street address precision.'
},{
level: 3,
code: 'RANGE_INTERPOLATED',
msg: 'The returned result reflects an approximation (usually on a road) interpolated between two precise points (such as intersections). Interpolated results are generally returned when rooftop geocodes are unavailable for a street address.'
},{
level: 2,
code: 'GEOMETRIC_CENTER',
msg: 'The returned result is the geometric center of a result such as a polyline (for example, a street) or polygon (region).'
},{
level: 1,
code: 'APPROXIMATE',
msg: 'The returned result is approximate.'
}],
/**
* @cfg {String} respErrorTitle
* Defaults to <tt>'Error'</tt>.
*/
respErrorTitle : 'Error',
/**
* @cfg {String} geoErrorMsgUnable
* Defaults to <tt>'Unable to Locate the Address you provided'</tt>.
*/
geoErrorMsgUnable : 'Unable to Locate the Address you provided',
/**
* @cfg {String} geoErrorTitle
* Defaults to <tt>'Address Location Error'</tt>.
*/
geoErrorTitle : 'Address Location Error',
/**
* @cfg {String} geoErrorMsgAccuracy
* Defaults to <tt>'The address provided has a low accuracy.<br><br>{0} Accuracy.'</tt>.
* <div class="mdetail-params"><ul>
* <li><b><code>ROOFTOP</code></b> : <div class="sub-desc"><p>
* The returned result is a precise geocode for which we have location information accurate down to street address precision.
* </p></div></li>
* <li><b><code>RANGE_INTERPOLATED</code></b> : <div class="sub-desc"><p>
* The returned result reflects an approximation (usually on a road) interpolated between two precise points (such as intersections). Interpolated results are generally returned when rooftop geocodes are unavailable for a street address.
* </p></div></li>
* <li><b><code>GEOMETRIC_CENTER</code></b> : <div class="sub-desc"><p>
* The returned result is the geometric center of a result such as a polyline (for example, a street) or polygon (region).
* </p></div></li>
* <li><b><code>APPROXIMATE</code></b> : <div class="sub-desc"><p>
* The returned result is approximate.
* </p></div></li>
* </ul></div>
*/
geoErrorMsgAccuracy : 'The address provided has a low accuracy.<br><br>"{0}" Accuracy.<br><br>{1}',
/**
* @cfg {String} gmapType
* The type of map to display, generic options available are: 'map', 'panorama'.
* Defaults to <tt>'map'</tt>.
* More specific maps can be used by specifying the google map type:
* <div class="mdetail-params"><ul>
* <li><b><code>G_NORMAL_MAP</code></b> : <div class="sub-desc"><p>
* Displays the default road map view
* </p></div></li>
* <li><b><code>G_SATELLITE_MAP</code></b> : <div class="sub-desc"><p>
* Displays Google Earth satellite images
* </p></div></li>
* <li><b><code>G_HYBRID_MAP</code></b> : <div class="sub-desc"><p>
* Displays a mixture of normal and satellite views
* </p></div></li>
* <li><b><code>G_DEFAULT_MAP_TYPES</code></b> : <div class="sub-desc"><p>
* Contains an array of the above three types, useful for iterative processing.
* </p></div></li>
* <li><b><code>G_PHYSICAL_MAP</code></b> : <div class="sub-desc"><p>
* Displays a physical map based on terrain information.
* </p></div></li>
* <li><b><code>G_MOON_ELEVATION_MAP</code></b> : <div class="sub-desc"><p>
* Displays a shaded terrain map of the surface of the Moon, color-coded by altitude.
* </p></div></li>
* <li><b><code>G_MOON_VISIBLE_MAP</code></b> : <div class="sub-desc"><p>
* Displays photographic imagery taken from orbit around the moon.
* </p></div></li>
* <li><b><code>G_MARS_ELEVATION_MAP</code></b> : <div class="sub-desc"><p>
* Displays a shaded terrain map of the surface of Mars, color-coded by altitude.
* </p></div></li>
* <li><b><code>G_MARS_VISIBLE_MAP</code></b> : <div class="sub-desc"><p>
* Displays photographs taken from orbit around Mars.
* </p></div></li>
* <li><b><code>G_MARS_INFRARED_MAP</code></b> : <div class="sub-desc"><p>
* Displays a shaded infrared map of the surface of Mars, where warmer areas appear brighter and colder areas appear darker.
* </p></div></li>
* <li><b><code>G_SKY_VISIBLE_MAP</code></b> : <div class="sub-desc"><p>
* Displays a mosaic of the sky, as seen from Earth, covering the full celestial sphere.
* </p></div></li>
* </ul></div>
* Sample usage:
* <pre><code>
* gmapType: G_MOON_VISIBLE_MAP
* </code></pre>
*/
gmapType : 'map',
/**
* @cfg {Object} setCenter
* The initial center location of the map. The map needs to be centered before it can be used.
* A marker is not required to be specified.
* More markers can be added to the map using the <code>{@link #markers}</code> array.
* For example:
* <pre><code>
setCenter: {
geoCodeAddr: '4 Yawkey Way, Boston, MA, 02215-3409, USA',
marker: {title: 'Fenway Park'}
},


// or just specify lat/long
setCenter: {
lat: 42.345573,
lng: -71.098326
}
* </code></pre>
*/
/**
* @cfg {Number} zoomLevel
* The zoom level to initialize the map at, generally between 1 (whole planet) and 40 (street).
* Also used as the zoom level for panoramas, zero specifies no zoom at all.
* Defaults to <tt>3</tt>.
*/
zoomLevel: 3,
/**
* @cfg {Number} yaw
* The Yaw, or rotational direction of the users perspective in degrees. Only applies to panoramas.
* Defaults to <tt>180</tt>.
*/
yaw: 180,
/**
* @cfg {Number} pitch
* The pitch, or vertical direction of the users perspective in degrees.
* Defaults to <tt>0</tt> (straight ahead). Valid values are between +90 (straight up) and -90 (straight down).
*/
pitch: 0,
/**
* @cfg {Boolean} displayGeoErrors
* True to display geocoding errors to the end user via a message box.
* Defaults to <tt>false</tt>.
*/
displayGeoErrors: false,
/**
* @cfg {Boolean} minGeoAccuracy
* The level to display an accuracy error below. Defaults to <tt>ROOFTOP</tt>. For additional information
* see <a href="http://code.google.com/apis/maps/documentation/reference.html#GGeoAddressAccuracy">here</a>.
*/
minGeoAccuracy: 'ROOFTOP',
/**
* @cfg {Array} mapConfOpts
* Array of strings representing configuration methods to call, a full list can be found
* <a href="http://code.google.com/apis/maps/documentation/reference.html#GMap2">here</a>.
* For example:
* <pre><code>
* mapConfOpts: ['enableScrollWheelZoom','enableDoubleClickZoom','enableDragging'],
* </code></pre>
*/
/**
* @cfg {Array} mapControls
* Array of strings representing map controls to initialize, a full list can be found
* <a href="http://code.google.com/apis/maps/documentation/reference.html#GControlImpl">here</a>.
* For example:
* <pre><code>
* mapControls: ['GSmallMapControl','GMapTypeControl','NonExistantControl']
* </code></pre>
*/
/**
* @cfg {Array} markers
* Markers may be added to the map. Instead of specifying <code>lat</code>/<code>lng</code>,
* geocoding can be specified via a <code>geoCodeAddr</code> string.
* For example:
* <pre><code>
markers: [{
//lat: 42.339641,
//lng: -71.094224,
// instead of lat/lng:
geoCodeAddr: '465 Huntington Avenue, Boston, MA, 02215-5597, USA',
marker: {title: 'Boston Museum of Fine Arts'},
listeners: {
click: function(e){
Ext.Msg.alert('Its fine', 'and its art.');
}
}
},{
lat: 42.339419,
lng: -71.09077,
marker: {title: 'Northeastern University'}
}]
* </code></pre>
*/
// private
mapDefined: false,
// private
mapDefinedGMap: false,


initComponent: function(){
this.addEvents(
/**
* @event mapready
* Fires when the map is ready for interaction
* @param {GMapPanel} this
* @param {GMap} map
*/
'mapready',
/**
* @event apiready
* Fires when the Google Maps API is loaded
*/
'apiready'
);

Ext.applyIf(this,{
markers: [],
cache: {
marker: [],
polyline: [],
infowindow: []
}
});

this.callParent(arguments);


if (window.google && window.google.maps){
this.on('afterrender', this.apiReady, this);
}else{
window.gmapapiready = Ext.bind( this.apiReady, this );
this.buildScriptTag('http://maps.google.com/maps/api/js?sensor=false&callback=gmapapiready');
}
},


apiReady : function(){

if (this.rendered){

(Ext.Function.defer(function(){

var mapType;
switch(this.gmapType){
case 'map':
mapType = google.maps.MapTypeId.ROADMAP;
break;
case 'satellite':
mapType = google.maps.MapTypeId.SATELLITE;
break;
case 'hybrid':
mapType = google.maps.MapTypeId.HYBRID;
break;
}


if (typeof mapType === 'string' && mapType != ''){
this.gmap = new google.maps.Map(this.body.dom, {zoom:this.zoomLevel,mapTypeId:mapType});
this.mapDefined = true;
this.mapDefinedGMap = true;
}

if (this.gmapType === 'panorama'){
this.gmap = new GStreetviewPanorama(this.body.dom);
this.mapDefined = true;
}

if (!this.mapDefined && this.gmapType){
this.gmap = new google.maps.Map(this.body.dom, {zoom:this.zoomLevel,mapTypeId: google.maps.MapTypeId.ROADMAP});
this.gmap.setMapTypeId(this.gmapType);
this.mapDefined = true;
this.mapDefinedGMap = true;
}


google.maps.event.addListenerOnce( this.getMap(), 'tilesloaded', Ext.bind( this.onMapReady, this ) );
google.maps.event.addListener( this.getMap(), 'dragend', Ext.bind( this.dragEnd, this ) );

if (typeof this.setCenter === 'object') {
if (typeof this.setCenter.geoCodeAddr === 'string'){
this.geoCodeLookup(this.setCenter.geoCodeAddr, this.setCenter.marker, false, true, this.setCenter.listeners);
}else{
if (this.gmapType === 'map' || this.gmapType === 'satellite' || this.gmapType === 'hybrid'){
var point = new google.maps.LatLng(this.setCenter.lat,this.setCenter.lng);
this.getMap().setCenter(point, this.zoomLevel);
this.lastCenter = point;
}
if (typeof this.setCenter.marker === 'object' && typeof point === 'object') {
this.addMarker(point, this.setCenter.marker, this.setCenter.marker.clear);
}
}
if (this.gmapType === 'panorama'){
this.getMap().setLocationAndPOV(new google.maps.LatLng(this.setCenter.lat,this.setCenter.lng), {yaw: this.yaw, pitch: this.pitch, zoom: this.zoomLevel});
}
}

}, 200, this));
}else{
this.on('afterrender', Ext.Function.defer(this.apiReady, 200, this), this);
}
},
// private
afterRender : function(){

var wh = this.ownerCt.getSize();
Ext.applyIf(this, wh);

Ext.ux.GMapPanel.superclass.afterRender.call(this);


},
// private
buildScriptTag: function(filename, callback) {
var script = document.createElement('script'),
head = document.getElementsByTagName("head")[0];
script.type = "text/javascript";
script.src = filename;

return head.appendChild(script);
},
// private
onMapReady : function(){

this.addMapControls();
this.addOptions();

this.addMarkers(this.markers);

this.fireEvent('mapready', this, this.getMap());

},
// private
onResize : function(w, h){

Ext.ux.GMapPanel.superclass.onResize.call(this, w, h);


// check for the existance of the google map in case the onResize fires too early
if (typeof this.getMap() == 'object') {
google.maps.event.trigger(this.getMap(), 'resize');
if (this.lastCenter){
this.getMap().setCenter(this.lastCenter, this.zoomLevel);
}
}


},
// private
setSize : function(width, height, animate){

Ext.ux.GMapPanel.superclass.setSize.call(this, width, height, animate);


// check for the existance of the google map in case setSize is called too early
if (Ext.isObject(this.getMap())) {
google.maps.event.trigger(this.getMap(), 'resize');
if (this.lastCenter){
this.getMap().setCenter(this.lastCenter, this.zoomLevel);
}
}

},
// private
dragEnd: function(){
this.lastCenter = this.getMap().getCenter();
},
/**
* Returns the current google map which can be used to call Google Maps API specific handlers.
* @return {GMap} this
*/
getMap : function(){

return this.gmap;

},
/**
* Returns the maps center as a GLatLng object
* @return {GLatLng} this
*/
getCenter : function(){

return this.getMap().getCenter();

},
/**
* Returns the maps center as a simple object
* @return {Object} this has lat and lng properties only
*/
getCenterLatLng : function(){

var ll = this.getCenter();
return {lat: ll.lat(), lng: ll.lng()};

},
/**
* Creates markers from the array that is passed in. Each marker must consist of at least
* <code>lat</code> and <code>lng</code> properties or a <code>geoCodeAddr</code>.
* @param {Array} markers an array of marker objects
*/
addMarkers : function(markers) {
if (Ext.isArray(markers)){
for (var i = 0; i < markers.length; i++) {
if (markers[i]) {
if (typeof markers[i].geoCodeAddr == 'string') {
this.geoCodeLookup(markers[i].geoCodeAddr, markers[i].marker, false, markers[i].setCenter, markers[i].listeners);
} else {
var mkr_point = new google.maps.LatLng(markers[i].lat, markers[i].lng);
this.addMarker(mkr_point, markers[i].marker, false, markers[i].setCenter, markers[i].listeners);
}
}
}
}

},
/**
* Creates a single marker.
* @param {Object} point a GLatLng point
* @param {Object} marker a marker object consisting of at least lat and lng
* @param {Boolean} clear clear other markers before creating this marker
* @param {Boolean} center true to center the map on this marker
* @param {Object} listeners a listeners config
*/
addMarker : function(point, marker, clear, center, listeners){

Ext.applyIf(marker,{});


if (clear === true){
this.clearMarkers();
}
if (center === true) {
this.getMap().setCenter(point, this.zoomLevel)
this.lastCenter = point;
}


var mark = new google.maps.Marker(Ext.apply(marker, {
position: point
}));

if (marker.infoWindow){
this.createInfoWindow(marker.infoWindow, point, mark);
}

this.cache.marker.push(mark);
mark.setMap(this.getMap());


if (typeof listeners === 'object'){
for (evt in listeners) {
google.maps.event.addListener(mark, evt, listeners[evt]);
}
}

return mark;

},
/**
* Creates a single polyline.
* @param {Array} points an array of polyline points
* @param {Object} linestyle an object defining the line style to use
*/
addPolyline : function(points, linestyle){

var plinepnts = new google.maps.MVCArray, pline, linestyle = linestyle ? linestyle : {
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
};

Ext.each(points, function(point){
plinepnts.push(new google.maps.LatLng(point.lat, point.lng));
}, this);

var pline = new google.maps.Polyline(Ext.apply({
path: plinepnts
},linestyle));

this.cache.polyline.push(pline);

pline.setMap(this.getMap());


},
/**
* Creates an Info Window.
* @param {Object} inwin an Info Window configuration
* @param {GLatLng} point the point to show the Info Window at
* @param {GMarker} marker a marker to attach the Info Window to
*/
createInfoWindow : function(inwin, point, marker){

var me = this, infoWindow = new google.maps.InfoWindow({
content: inwin.content,
position: point
});

if (marker) {
google.maps.event.addListener(marker, 'click', function(){
me.hideAllInfoWindows();
infoWindow.open(me.getMap());
});
}

this.cache.infowindow.push(infoWindow);


return infoWindow;


},
// private
hideAllInfoWindows : function(){
for (var i = 0; i < this.cache.infowindow.length; i++) {
this.cache.infowindow[i].close();
}
},
// private
clearMarkers : function(){

this.hideAllInfoWindows();
this.hideMarkers();


},
// private
hideMarkers : function(){
Ext.each(this.cache.marker, function(mrk){
mrk.setMap(null);
});
},
// private
showMarkers : function(){
Ext.each(this.cache.marker, function(mrk){
mrk.setMap(this.getMap());
},this);
},
// private
addMapControls : function(){

if (this.gmapType === 'map') {
if (Ext.isArray(this.mapControls)) {
for(i=0;i<this.mapControls.length;i++){
//this.addMapControl(this.mapControls[i]);
}
}else if(typeof this.mapControls === 'string'){
//this.addMapControl(this.mapControls);
}else if(typeof this.mapControls === 'object'){
//this.getMap().add_control(this.mapControls);
}
}

},
/**
* Adds a GMap control to the map.
* @param {String} mc a string representation of the control to be instantiated.
*/
addMapControl : function(mc){

var mcf = window[mc];
if (typeof mcf === 'function') {
//this.getMap().addControl(new mcf());
}

},
// private
addOptions : function(){

if (Ext.isArray(this.mapConfOpts)) {
var mc;
for(i=0;i<this.mapConfOpts.length;i++){
//this.addOption(this.mapConfOpts[i]);
}
}else if(typeof this.mapConfOpts === 'string'){
//this.addOption(this.mapConfOpts);
}

},
/**
* Adds a GMap option to the map.
* @param {String} mo a string representation of the option to be instantiated.
*/
addOption : function(mo){

var mof = this.getMap()[mo];
if (typeof mof === 'function') {
this.getMap()[mo]();
}

},
/**
* Looks up and address and optionally add a marker, center the map to this location, or
* clear other markers. Sample usage:
* <pre><code>
buttons: [
{
text: 'Fenway Park',
handler: function(){
var addr = '4 Yawkey Way, Boston, MA, 02215-3409, USA';
Ext.getCmp('my_map').geoCodeLookup(addr, undefined, false, true, undefined);
}
},{
text: 'Zoom Fenway Park',
handler: function(){
Ext.getCmp('my_map').zoomLevel = 19;
var addr = '4 Yawkey Way, Boston, MA, 02215-3409, USA';
Ext.getCmp('my_map').geoCodeLookup(addr, undefined, false, true, undefined);
}
},{
text: 'Low Accuracy',
handler: function(){
Ext.getCmp('my_map').geoCodeLookup('Paris, France', undefined, false, true, undefined);
}
},{


text: 'Bogus Address',
handler: function(){
var addr = 'Some Fake, Address, For, Errors';
Ext.getCmp('my_map').geoCodeLookup(addr, undefined, false, true, undefined);
}
}
]
* </code></pre>
* @param {String} addr the address to lookup.
* @param {Object} marker the marker to add (optional).
* @param {Boolean} clear clear other markers before creating this marker
* @param {Boolean} center true to set this point as the center of the map.
* @param {Object} listeners a listeners config
*/
geoCodeLookup : function(addr, marker, clear, center, listeners) {

if (!this.geocoder) {
this.geocoder = new google.maps.Geocoder();
}
this.geocoder.geocode({
address: addr
}, Ext.bind( this.addAddressToMap, this, [addr, marker, clear, center, listeners], true));

},
// private
centerOnClientLocation : function(){
this.getClientLocation(function(loc){
var point = new google.maps.LatLng(loc.latitude,loc.longitude);
this.getMap().setCenter(point, this.zoomLevel);
this.lastCenter = point;
});
},
// private
getClientLocation : function(fn, errorFn){
if (!errorFn) {
errorFn = Ext.emptyFn;
}
if (!this.clientGeo) {
this.clientGeo = google.gears.factory.create('beta.geolocation');
}
geo.getCurrentPosition(Ext.bind( fn, this), errorFn);
},
// private
addAddressToMap : function(response, status, addr, marker, clear, center, listeners){
if (!response || status !== 'OK') {
this.respErrorMsg(status);
}else{
var place = response[0].geometry.location,
accuracy = this.getLocationTypeInfo(response[0].geometry.location_type,'level'),
reqAccuracy = this.getLocationTypeInfo(this.minGeoAccuracy,'level');
if (accuracy === 0) {
this.geoErrorMsg(this.geoErrorTitle, this.geoErrorMsgUnable);
}else{
if (accuracy < reqAccuracy) {
this.geoErrorMsg(this.geoErrorTitle, String.format(this.geoErrorMsgAccuracy, response[0].geometry.location_type, this.getLocationTypeInfo(response[0].geometry.location_type,'msg')));
}else{
point = new google.maps.LatLng(place.xa,place.za);
if (center){
this.getMap().setCenter(point, this.zoomLevel);
this.lastCenter = point;
}
if (typeof marker === 'object') {
if (!marker.title){
marker.title = response.formatted_address;
}
var mkr = this.addMarker(point, marker, clear, false, listeners);
if (marker.callback){
marker.callback.call(this, mkr, point);
}
}
}
}
}

},
// private
geoErrorMsg : function(title,msg){
if (this.displayGeoErrors) {
Ext.MessageBox.alert(title,msg);
}
},
// private
respErrorMsg : function(code){
Ext.each(this.respErrors, function(obj){
if (code == obj.code){
Ext.MessageBox.alert(this.respErrorTitle, obj.msg);
}
}, this);
},
// private
getLocationTypeInfo: function(location_type,property){
var val = 0;
Ext.each(this.locationTypes, function(itm){
if (itm.code === location_type){
val = itm[property];
}
});
return val;
}
});

I had to remove references to the .defer function and use Ext.Function.defer instead. Also, instead of using .createDelegate you should now use Ext.Bind. I have not extensively tested this so there may be issues.

Hopefully others find this useful.

-CDG10620

siebe vos
1 Nov 2011, 5:27 AM
@CDG10620

Thanks for modifying the GMapPanelV3 source into Ext4!

Unfortunately I have a problem using the 'Ext.ux.GMapPanel':

Does the setCenter work for you with the sample address that is in the source? I can't get the geoCodeAddr to work with any address:

{geoCodeAddr: '4 Yawkey Way, Boston, MA, 02215-3409, USA', marker: {title: 'Fenway Park'}}
The setCenter with latitude / longitude works fine:

{lat: 42.345573, lng: -71.098326}

In the Ext3 version (Vinylfox) both worked for me. Do you have any suggestions?

Thanks in advance!

cdg10620
1 Nov 2011, 5:38 AM
@siebe vos

I'm only using the set center portion of it. I have not needed to use the geoCodeAddr. This is my implementation.



this.map = Ext.create( 'Ext.ux.GMapPanel', {
title: 'Google Maps',
margins: '4 4 4 0',
zoomLevel: 14,
gmapType: 'map',
id: 'googleMap',
border: true,
setCenter: {
lat: latVal,
lng: lngVal
}
})


In my code i'm also extending the Ext.ux.GMapPanel. I'll play around with that and try to see what the issue is.

-CDG10620

siebe vos
1 Nov 2011, 6:08 AM
@CDG10620 Thanks for your quick reply. Your sample works for me too (as I specified in #13), but I have a problem with the geoCodeAddr (looking up an address). Does that one work for you?

Thanks again!

cdg10620
1 Nov 2011, 6:27 AM
@siebe vos

No it doesn't. Whenever I try to use the geoCodeAddr it is loading the panel but the map never loads up. I'll have to play around with it and see what is going on. Maybe @VinylFox or someone else will chime in.

-CDG10620

siebe vos
1 Nov 2011, 6:35 AM
@CDG10620
Thanks for looking into this, I have the same behaviour. I hope you find a solution.
Siebe

siebe vos
2 Nov 2011, 3:08 AM
@CDG10620

I found the problem: within method "addAddressToMap" line 13 must be changed from



point = new google.maps.LatLng(place.xa,place.za);


into:


point = this.fixLatLng(place);


to the class the old function fixLatLng must be added (see original source from Vinylfox):


fixLatLng: function (llo) {
if (this.getMap().getMapTypeId() === 'SKY') {
if (this.getMap().getCurrentMapType().QO == 'visible') {
llo.lat(180 - llo.lat());
llo.lng(180 - llo.lng());
}
}
return llo;
}


Suggestion: you could add the alias 'widget.gmappanel' to the class (and remove the Ext.namespace in the top (not used?)

Thanks!

-Siebe

cdg10620
2 Nov 2011, 6:02 AM
@Siebe

Nice find. I've changed my source and it works on my machine. Glad you found a fix for that.

dagotodros
10 Jan 2012, 4:43 AM
Hi. I use ExtJS 4 with GMapPanel3. When I use method addPolyline I see error message - "An invalid or illegal string was specified" code: "12". What I do wrong?

ispypie
24 Jan 2012, 2:24 AM
Hi

Can I just ask if people are using the latest VinylFox extension are having any speed issues?
My maps are really slow. Obviously I don't think this is the extension I just keen to know whether people have got maps working in Extjs4 in nested panels. The single window examples work okay for me but when I port it to my ui dashboard it just kills it. All I've got is a border layout with menu on left and content /map on right.

minorbug
6 Feb 2012, 7:52 PM
I am also having issues with nested panels (though I'm using Ext 4.1) and the gogle map extension.. specifically, when placing a google map panel in a tabpanel. onResize is never called, and the initial size of the panel (which looks like its calculated using the owenerCt.getSize() command, returns a small area (usually 4x4 or 4x6 pixels)

medinfo87
20 Mar 2012, 9:21 AM
Hello,please how can I get the lat and long with extjs 4 from a position on the cart map..

I couldn't even add listner to the cart map

alfa19
10 May 2012, 1:53 AM
Hi,

i've a question about this library.

I wanna use it to create a map with directions from an origin to a destination.

the code i use is this:


var directionDisplay;
var directionsService = new google.maps.DirectionsService();

directionsDisplay = new google.maps.DirectionsRenderer();
var request = {
origin: 'Boston',
destination: 'New York',
travelMode: google.maps.DirectionsTravelMode.DRIVING
};

directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setMap(map.getMap());
directionsDisplay.setPanel(document.getElementById('tabs2'));
directionsDisplay.setDirections(response);
winMap.showMap();
}
});

where map is:


var map = new Ext.ux.GMapPanel({
gmapType: 'map',
mapConfOpts: ['enableScrollWheelZoom','enableDoubleClickZoom','enableDragging'],
mapControls: ['GSmallMapControl','GMapTypeControl','NonExistantControl'],
id: 'my_map1'
});

and winMap.showMap is a method that show a Ext.Window containing the map (it works with normal setCenter map, so it is not the problem).

The road directions are correctly displayed on div tabs2, but the Ext.windows contain only a gray background and not the map image. The same code used without extjs works fine.

how can i fix this?

thanks a lot

talha06
11 Jun 2012, 4:30 AM
Hello to all,

I want to learn how can I set map's center to client current location? It can be done with a config(useCurrentLocation) at Sencha Touch but it's not available at Ext JS 4.1. I tried to some events like beforerender that calculates current location of client, then I tried to create map, but it didn't work at all. Is there anyone who had done this before? I'll be happy if someone can guide me through to solution?

Thanks in advance.