View Full Version : Sencha map with markers

16 Jan 2012, 7:02 AM
I have been working around with the Ext.map recently. But i find i really difficult to use. It is very slow at loading (i can live with that part).

I want to add a marker to my map. I wan't to do this from lat and lng. I found a lot of examples on this forum, but none of them, have made it possible for me to put a marker on my map.

I would like to put the little blue marker which defines where i am. Like this:

And then I would like to put the red markers for some stores around me.
How is it possible to get these different markers added to the following code:

ToolbarDemo.views.Mapcard = Ext.extend(Ext.Panel, {
dockedItems: [{
xtype: 'toolbar',
title: 'View contact',
ui: 'blue',
items: [
text: 'Tilbage',
ui: 'back',


layout: 'card',
items: [{
xtype: 'map',
id: 'map',
useCurrentLocation: true,
mapOptions: {
zoom: 7,
mapTypeId : google.maps.MapTypeId.ROADMAP,
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.DEFAULT

updateWithRecord: function(record) {
Ext.each(this.items.items, function(item) {
var toolbar = this.getDockedItems()[0];
var mapToRefresh = Ext.getCmp('map');
var marker = new google.maps.Marker({
map: mapToRefresh.map,
position: new google.maps.LatLng(-25.363882,131.044922)
ToolbarDemo.views.Homecard.superclass.initComponent.apply(this, arguments);
Ext.reg('homecard', ToolbarDemo.views.Homecard);

I really hope someone can help me. I believe i have tried almost everyhing... :)

16 Jan 2012, 8:29 AM
The markers are a google map feature so you would have to consult their docs and do it on the actual google map component that is under the ST Map component.

17 Jan 2012, 1:24 AM
Also check out Ext.Leaflet in the examples forum...it has some cool examples with markers.