PDA

View Full Version : Geolocation Google Maps API in Extjs 4.2



maecy
14 Jan 2014, 8:55 PM
I am trying to put a google map with my web system that will track the terminals I have with their respective geolocation. I already have my API Key from google. So, I am using these codes but I am getting an error.



items:[
{
xtype: 'map',
title: 'Map',
getLocation: true
},
]

If anyone could help me that would be really great.

scottmartin
15 Jan 2014, 1:48 PM
It should be


xtype: 'gmappanel'


Have a look at our example:
http://docs.sencha.com/extjs/4.2.1/extjs-build/examples/window/gmap.html
http://docs.sencha.com/extjs/4.2.1/extjs-build/examples/window/gmap.js

maecy
15 Jan 2014, 6:06 PM
I still gets this error: Uncaught TypeError: Cannot call method 'substring' of undefined

scottmartin
15 Jan 2014, 6:28 PM
If the examples did not help, then you will need to post your code so we can have a look.

maecy
15 Jan 2014, 7:42 PM
So, basically, I just want to display the map in my web. Here's my code:
Ext.ns('dlti.view.widget');//Order Window View
Ext.define('dlti.view.widget.UserHome' ,{
extend: 'Ext.panel.Panel',
id: 'dlti-user-home',
alias: 'widget.UserHome',
layout: {
type: 'hbox',
region: 'center'
},



items:[{
xtype: 'label',
html: '<b>Welcome Guest!</b>'
},
{
xtype: 'gmappanel',
title: 'Map',
getLocation: true
},

]



});

maecy
20 Jan 2014, 11:01 PM
I still haven't resolved my problem. This is my current code but it returns only as a blank..


items:[
{xype: 'gmappanel',
title: 'Map',
getLocation: true,
gmapType: 'map',
zoomLevel: 14,
setCenter: {
lat: 14.482089,
lng: 120.8919,
marker: {
title: 'Central Park'
}}
}

scottmartin
21 Jan 2014, 5:30 AM
You should have another look at our example and review the config settings:
http://docs.sencha.com/extjs/4.2.1/extjs-build/examples/window/gmap.js

maecy
22 Jan 2014, 1:33 AM
I always get this error: Uncaught TypeError: Cannot call method 'substring' of undefined
Ext.ns('dlti.view.widget');//Order Window View
Ext.define('dlti.view.widget.UserHome' ,{
extend: 'Ext.panel.Panel',
id: 'dlti-user-home',
alias: 'widget.UserHome',
layout: {
type: 'hbox',
region: 'center'
},



items: [{
xtype: 'gmappanel',
center: {
geoCodeAddr: '4 Yawkey Way, Boston, MA, 02215-3409, USA',
marker: {title: 'Fenway Park'}
},
markers: [{
lat: 42.339641,
lng: -71.094224,
title: 'Boston Museum of Fine Arts',
listeners: {
click: function(e){
Ext.Msg.alert('It\'s fine', 'and it\'s art.');
}
}
},{
lat: 42.339419,
lng: -71.09077,
title: 'Northeastern University'
}]
}
]

});

evant
22 Jan 2014, 1:52 AM
http://www.sencha.com/forum/showthread.php?272170

maecy
22 Jan 2014, 10:36 PM
I have looked at the examples but still no luck. Could anyone be kind enough to guide me into putting a map inside my system? I really need help.

scottmartin
23 Jan 2014, 7:10 AM
Provide your code that you are using to create the map ... html and js (not just snippets)

maecy
23 Jan 2014, 8:02 PM
Here' smy html code:


<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> <script type="text/javascript" src="js/lib/ext-all-debug.js"></script> <script type="text/javascript" src="js/util/dlti.util.js"></script>

and again, this is my code for my view:



Ext.ns('dlti.view.widget');
//Order Window View
Ext.define('dlti.view.widget.UserHome' ,{
extend: 'Ext.panel.Panel',
id: 'dlti-user-home',
alias: 'widget.UserHome',
layout: {
type: 'hbox',
region: 'center'
},


items:[{
xtype: 'gmappanel',
region: 'center',
id: 'mygooglemap',
zoomLevel: 3,
gmapType: 'map',
mapConfOpts:['enableScrollWheelZoom','enableDoubleClickZoom','enableDragging'],
mapControls: ['GSmallMapControl','GMapTypeControl','NonExistantControl'],
setCenter: {
'lat': 37.4419,
'lng': 122.1419,
marker:{ title: 'Palo Alto'}
}
}
]



});