PDA

View Full Version : Adding Marker to Map inside Panel



b0hne
13 Sep 2011, 8:26 AM
Hi,

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!!

Simon

rgporter
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.

b0hne
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 ?

b0hne
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;
if(map.rendered){
map.update(center);
}else{
map.on('activate', map.onUpdate, map, {single: true, data: center});
}
}
}
});
geo.updateLocation();

//set markers from store-data:
ListStore.each(function(store){

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.setContent(html);
storeBubble.open(map.map, shopmarker);
});
});
}


}
});




this.items = this.map;

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


This works quite well for me!

zooldk
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?

b0hne
20 Oct 2011, 9:13 AM
Hi!

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.

IbarCarty
4 Dec 2012, 12:04 PM
Hi!!
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: [
'Ext.device.Geolocation',
'Ext.device.Notification',
'Ext.Map',
'Ext.TitleBar',
'Ext.tab.Bar',
'Ext.SegmentedButton'
],
config: {
title: 'Btt Tracker',
iconCls: 'star',
layout: 'fit',
},
constructor: function() {
var me=this;
me.callParent(arguments);
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'
});
myToolbar.add([myButton]);
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!