View Full Version : GMapPanel3 how to add markers dynamically?

18 Jun 2012, 1:30 AM
Hello everyone,

As I know, the google maps extension for ExtJS 4 is VinylFox's GMapPanel3 - as he shared here (https://github.com/VinylFox/ExtJS.ux.GMapPanel/tree/master/src) -.
I just want to learn if someone has also played with it, how can I add markers dynamically? i.e. I'm using store for markers that will be added after center marker has rendered. I did it with using Sencha Touch. Ext.Map was very successful and I use Google Maps API v3 with it.
The code that I use for ExtJS 4 is here:

// this is my panel; this.map is gmappanel
this.on('afterrender', function() {
var store = Ext.create(appName + '.store.Markers');
callback: function(records, operation, success) {
Ext.each(records, function(rec) {
console.log(rec.raw.title + ' ==> ' + rec.raw.lat + ' : ' + rec.raw.lng);
var tmpPoint = new google.maps.LatLng(rec.raw.lat,rec.raw.lng);
var tmp = new google.maps.Marker({
position : new google.maps.LatLng(rec.raw.lat,rec.raw.lng),
lat : rec.raw.lat,
lng : rec.raw.lng,
title : rec.raw.title,
infoWindow : 'Sonradan eklenen',
icon : pinImageRed,
shadow : pinShadow,
animation : google.maps.Animation.DROP
me.map.addMarker(tmpPoint, tmp, false, false);
google.maps.event.addListener(tmp, 'click', function() {
infoBubble.open(me.map, tmp);

I tried 'render, beforeshow, beforerender, etc.' events but I haven't got any results yet.
I'll be happy if someone can help me.
Thanks in advance.
With regards,

28 Jun 2012, 3:08 PM
I believe you will have to use the Google API direct to perform this.