Problem with Markers in GoogleMaps

[tubamanu]

Hi,

i'm trying to display the current location of a user using googlemaps. Getting latitude and longitude is working fine, also creating the map and center the location of the user is working.

Only adding a marker to the map is not working.
whats wrong with my code?



cf.Main = function(){return {

theMarker :false,
thePanel :false,
theMap :false,
theCurrentPosition :false,

init: function ( latitude, longitude) {
// initPosition
this.theCurrentPosition = new google.maps.LatLng( latitude,longitude );
// init Map with position centered
this.initMap();
// trying to add markter to the map
this.initMarker();
// create panel with map
this.initPanel();
},

initMap: function () {
this.theMap = new Ext.Map({
center: this.theCurrentPosition,
getLocation: true,
mapOptions: {
zoom: 10
}
});
},


initMarker: function () {
this.theMarker = new google.maps.Marker({
position: this.theCurrentPosition,
map: this.theMap.map
});
},


initPanel: function () {
this.thePanel = new Ext.Panel({
fullscreen: true,
items: [this.theMap]
});
}
};}();

[grantatwbx]

Hi there, I was having a similar problem and I think it might be a bug with Sencha touch. The issue is that fullscreen property must be set on the Ext.Map like this:



this.theMap = new Ext.Map({
fullscreen:true,
center: this.theCurrentPosition,
getLocation: true,
mapOptions: {
zoom: 10
}
});

it's not even documented, but if it's not there then render() is never called in the component internally.

[tubamanu]

hi there,

thx 4 your reply :)

yes, maybe sencha framework has some problems with render functionality. I was facing this when adding dynamically items to an Ext.Panel.

I've tried your piece of code but without success. I used fullscreen:true already in my Panel, where i add my map. Also setting fullscreen:true to my map and not adding it to my panel is not working.....

the correct position is set, cause my map is centered where my current position is.....

anyway, thx for your help

[tubamanu]

Hi folks,

currently i'm having another problem with the map component. When a user enteres the application, i'm using
navigator.geolocation.getCurrentPosition to get the position of the user. If geolaction is not supported or not working the right way i set some default latiute and longitude coordinates. then i'm setting these coordinates to my map and center the coordinates with getLocation = true....

my problem is, that getLocation : true only works when navigator.geolocation.getCurrentPosition is working, if i set the paramters manually it is not working....

is the component working the right way? or am i doing something wrong?
my init function looks is this:



if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
function(position) {
cf.Main.init( position.coords.latitude, position.coords.longitude );
},
function(err) {
cf.Main.init( (48.78), (9.18) );
});
}
else {
alert("I'm sorry, but geolocation services are not supported by your browser.");
}

[grantatwbx]

there were definitely some errors when the fullscreen property was not set on the Map. Another thing to keep in mind is that you should call
marker.setMap(map); where "map" is the Ext.Map map property (a wrapper around google map). It might also help to do this in an event handler for senchaMap.geo.on('update', function() {}); and then manually call senchaMap.geo.updateLocation();

there's alot of stuff that left out of the Sencha example... you kinda need to dig into the google map docs to get the full picture.

good luck!

[tubamanu]

Thx again for your reply. Iwill test it and leave some notices
If i get it working.....

[Mebel]

It's possible to remove a marker after i add before ?
Or can i reset the position ?

regards
Mebel