View Full Version : Adding Marker to Map inside Panel

13 Sep 2011, 8:26 AM

I have a function that should add some markers to a google map.
The map is displayed inside a Panel and i don't know how to set the markers to the map.

Toolbar.views.Mapcard = Ext.extend(Ext.Panel, { title: "Map",
iconCls: "maps",
styleHtmlContent: true,
items: [
xtype: 'map',
fullscreen: true
initComponent: function() {
Ext.apply(this, {
dockedItems: [{
xtype: "toolbar",
title: "Map"
Toolbar.views.Mapcard.superclass.initComponent.apply(this, arguments);
Ext.reg('mapcard', Toolbar.views.Mapcard);

I also tried the following: inside the initComponent:

this.mapview = new Ext.Map({
id: 'mapView',
title: 'Map',
mapOptions: {
zoom: 11

this.items = [this.mapview];

and in my function, that is called by a store's load() event i want to set a marker but i cannot acces the map.

var shopmarker = new google.maps.Marker({
map: // how do i get the map here ? ,
position: latLng,
icon: image,
shape: shape,
shadow: shadow

I've tried this: "map: mapView.map" (as it worked in a former app) but no markers are displayed.

Thanks in advance!!


13 Sep 2011, 6:33 PM
Assuming you have something like:

var MapPanel = new Ext.Map({
... <map stuff here> ...


to get a map going in Sencha Touch, you can then reference it in Google Maps API..

Adding a marker goes as such:

var markers = {},
locationArray = {};

// populate your locationArray with locations...

locationArray.each(function(record) {
markers[id] = new google.maps.Marker({

map: MapPanel.map,
... <marker stuff here> ...


Hope that helps. I haven't built a map in a few months, but when I did it went like that.. basically the map: method wants from Sencha an Ext.Map var plus .map.

13 Sep 2011, 9:36 PM
Thanks for your reply!

The way you mentioned worked for me in my other app but now it doesn't...

I've tried to work with MVC in this app so i think my function, which sets the markers to the map has to be in a controller. When i do a console.log(mapPanel); inside my "addMarker()" function i just get a "null" for the map object.

So I thnk i just have to put the funtion into the controller, which has to be registered right ?

14 Sep 2011, 2:17 AM
so i've figured out a solution for my problem.

Toolbar.views.Mapcard = Ext.extend(Ext.Panel, {
initComponent: function(){
Ext.apply(this, { dockedItems: [{
xtype: "toolbar",
title: "Karte"
this.map = new Ext.Map ({
useCurrentLocation: true,
mapOptions: {
zoom: 11,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.DEFAULT
listeners: {
afterrender: function(map){
var geo = new Ext.util.GeoLocation({
accuracy: 1,
autoUpdate: true,
listeners: {
locationupdate: function(geo) {
center = new google.maps.LatLng(geo.latitude, geo.longitude);
zoom = 11;
map.on('activate', map.onUpdate, map, {single: true, data: center});

//set markers from store-data:

var latLng = new google.maps.LatLng(this.data.lat, this.data.lng);
var html='<b>' + this.data.name + '</b><br /><p>' + this.data.address + '</p>';
var shopmarker = new google.maps.Marker({
map: map.map,
position: latLng

//use "mosedown" instead of click, otherwise it is not working on android
google.maps.event.addListener(shopmarker, "mousedown", function() {
storeBubble.open(map.map, shopmarker);


this.items = this.map;

Toolbar.views.Mapcard.superclass.initComponent.apply(this, arguments);

This works quite well for me!

20 Oct 2011, 7:10 AM
Hi b0hne,

I am having the exact same problem.. having a Map inside a tabpanel.
So I've tried to copy your example, but my tab panel with the Map inside shows now map, only blank page.
Can you show the full example that works?

20 Oct 2011, 9:13 AM

So what exactly do you need ? Just the map inside a tab-panel or do you need an example with the function for adding markers ?
Could be so kind and give me a bit more details then i'll try to give you an working example.

4 Dec 2012, 12:04 PM
I have the same problem, I can't get the function that adds a marker into my google map.
I have view with this code:
Ext.define('practice.view.Localizacion', {
extend: 'Ext.Panel',
extend: 'Ext.Container',
xtype: 'mylocalizacion',
requires: [
config: {
title: 'Btt Tracker',
iconCls: 'star',
layout: 'fit',
constructor: function() {
var me=this;
var UAB= new google.maps.LatLng(41.500293,2.112582);
var myTopBar=Ext.create('Ext.Toolbar', {
docked: 'top',
title: 'Track'
var myToolbar=Ext.create('Ext.Toolbar', {
docked: 'top',
scrollable: 'horizontal'
var myButton=Ext.create('Ext.Button', {
text: 'Mark',
iconMask: 'true',
iconCls: 'locate',
id: 'miMark'
var myMap=Ext.create('Ext.Map', {
mapOptions: {
center: UAB,
zoom: 3,
mapTypeId: google.maps.MapTypeId.HYBRID,
navigationControl: true,
id: 'mapa'
me.add([myTopBar, myToolbar, myMap]);

And then I have my controller like this:

Ext.define('practice.controller.Main', {
extend: 'Ext.app.Controller',
config: {
refs: {
miMark: '#miMark',
mapa: '#mapa'
control: {
miMark: {
tap: 'mostrarMarker'
mostrarMarker: function(){
Ext.Msg.alert('Show marker in map');
var pos= new google.maps.LatLng(41.500293,2.112582);
var marker= new google.maps.Marker({
map: mapa.map,
position: pos,
visible: true,
icon: 'darkgreen_MarkerL.png',


This code should be easy to show a marker in the google map when I click the button, but it doesn't. Does anyone knows why not?? It would be great to have an answer... and a possible solution PLEASE!! Thanks a lot!