PDA

View Full Version : Google Maps Marker not Centered



spruitje
26 Jan 2013, 7:33 AM
I made a very simple Map view using google.maps.Geocoder + address specifications to show a static map of a given address.

Everything works well, except that the Marker shows up at the top/left corner of the window; it is NOT centered.

How could I show the marker in the centered position (which is default if 'useCurrentLocation' is 'true')?

I've spent ages on this with no result yet, any help is very much appreciated!

My code:



Ext.define('rcc-app.view.Map', {
extend: 'Ext.Map',
xtype: 'map',

config: {
title: 'Locatie',
iconCls: 'maps',
scrollable: false,
//useCurrentLocation: true,
mapOptions: {
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL,
position: google.maps.ControlPosition.RIGHT_BOTTOM,
},
zoom: 15
},

listeners: {
maprender: function(comp, map) {
var marker;
var geocoder = new google.maps.Geocoder();
geocoder.geocode({
'address': '///My address goes here// Like: Churchstreet 11, London, UK'
},
function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
title: "here!",
animation: google.maps.Animation.DROP
});
}
});

}
},

items: {
docked: 'top',
xtype: 'titlebar',
title: 'Locatie'
}
}
});

mitchellsimoens
28 Jan 2013, 7:12 AM
It's centered for me when I test on Chrome. One issue I see that shouldn't have any affect is you use xtype : 'map' when you extend via Ext.define, Ext.Map uses that xtype so you need to use a different xtype.

ScottH
28 Jan 2013, 8:30 AM
Try updating your maprender to



maprender: function(comp, map) {
var me = this;
var marker;
var geocoder = new google.maps.Geocoder();
geocoder.geocode({
'address': '///My address goes here// Like: Churchstreet 11, London, UK'
},
function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
title: "here!",
animation: google.maps.Animation.DROP
});
me.setMapOptions({ center : results[0].geometry.location });
}
});
}

spruitje
29 Jan 2013, 12:26 AM
Thank you very much ScottH, it's working like a charm! :)
Only thing: the marker still starts at the top/left-corner en then immediately slides in to center-position when tested in a desktop-browser like Chrome/Safari.
The iPhone-Simulator for instance does not show this behaviour, so it suits me fine.
But why does Chrome/Safari on a desktop does this?
(Just to understand what Sencha does...)

spruitje
29 Jan 2013, 12:32 AM
Thanks mitchell, but the thing is: I call the xtypes in a Main.js-view, so in the Map.js the x-type seems to be required as well to make it all work... or not?


Ext.define('my-app.view.Main', {
extend: 'Ext.tab.Panel',
xtype: 'main',
requires: [
'Ext.TitleBar'
],
config: {
tabBarPosition: 'bottom',


items: [
{
xtype: 'homepanel'
},
{
xtype: 'info'
},
{
xtype: 'contactform'
},
{
xtype: 'map'
}

]
}
});

ScottH
29 Jan 2013, 5:47 AM
Thank you very much ScottH, it's working like a charm! :)
Only thing: the marker still starts at the top/left-corner en then immediately slides in to center-position when tested in a desktop-browser like Chrome/Safari.
The iPhone-Simulator for instance does not show this behaviour, so it suits me fine.
But why does Chrome/Safari on a desktop does this?
(Just to understand what Sencha does...)

Move the setMapOptions line to before you put the marker down and the map should center itself and then place the marker, removing the sliding effect you're getting.

Sencha's code relies entirely on the browser's handling of html5, css, & webkit for the functionality, so you will see some inconsistency depending on what you are using to run it at the time. The default browser that is used for Android 4.0 handles webkit like crap so you can end up with any number of performance issues. But using the Chrome browser on the same device (opening the app as a weblink) and you will get beautiful performance. Unfortunately, when you package for native you're stuck with the default browser (least I'm 95% sure of that, I haven't found a solution and have not devoted all that much time to trying to really get around that limitation).

Just one of those things that you've got to keep an eye out for, as long as it works as desired on your target platform, that's all that really matters, right?

ScottH
29 Jan 2013, 5:50 AM
Thanks mitchell, but the thing is: I call the xtypes in a Main.js-view, so in the Map.js the x-type seems to be required as well to make it all work... or not?


Ext.define('my-app.view.Main', {
extend: 'Ext.tab.Panel',
xtype: 'main',
requires: [
'Ext.TitleBar'
],
config: {
tabBarPosition: 'bottom',


items: [
{
xtype: 'homepanel'
},
{
xtype: 'info'
},
{
xtype: 'contactform'
},
{
xtype: 'map'
}

]
}
});


What mitchell is saying is that there is already a defined xtype of 'map' inside the sencha framework, what you should do is set your original like this...


Ext.define('rcc-app.view.Map', {
extend : 'Ext.Map',
xtype : 'mymap',
config : { ....



And call it from your tabpanel with

xtype : 'mymap'

spruitje
29 Jan 2013, 6:25 AM
Move the setMapOptions line to before you put the marker down and the map should center itself and then place the marker, removing the sliding effect you're getting.

Sencha's code relies entirely on the browser's handling of html5, css, & webkit for the functionality, so you will see some inconsistency depending on what you are using to run it at the time. The default browser that is used for Android 4.0 handles webkit like crap so you can end up with any number of performance issues. But using the Chrome browser on the same device (opening the app as a weblink) and you will get beautiful performance. Unfortunately, when you package for native you're stuck with the default browser (least I'm 95% sure of that, I haven't found a solution and have not devoted all that much time to trying to really get around that limitation).

Just one of those things that you've got to keep an eye out for, as long as it works as desired on your target platform, that's all that really matters, right?

Ok thanks a lot ScottH and Mitchell for helping me understand things a bit more!

spruitje
3 Oct 2013, 8:17 AM
Centering the map worked fine, with this code in Sencha Touch 2.2.1, but after I updated my app to 2.3.0 the map does not center anymore; the marker stays at the top-left corner and does not move to the center anymore.

How could this be, has something changed to retrieve this in Sencha Touch 2.3.0 ?



Ext.define('my-app.view.Map', {
extend: 'Ext.Map',
xtype: 'mymap',

config: {
title: 'Location',
iconCls: 'locate',
scrollable: false,
//useCurrentLocation: true,
mapOptions: {
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL,
position: google.maps.ControlPosition.RIGHT_BOTTOM
},
zoom: 12
},

listeners: {
maprender: function(comp, map) {
var me = this;
var marker;
var geocoder = new google.maps.Geocoder();
geocoder.geocode({
'address': '//My address goes here//'
},
function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
me.setMapOptions({ center : results[0].geometry.location });
marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
title: "Here!",
animation: google.maps.Animation.DROP
});
}
});
}
},

items: {
docked: 'top',
xtype: 'titlebar',
title: 'Locatie'
}
}
});

fatica
3 Oct 2013, 12:40 PM
The only thing that worked for me was to delay it slightly


setTimeout(function(){
yourmap.getMap().setCenter(latlngbounds.getCenter());
},100);