View Full Version : render map with new data in store.

22 Nov 2011, 10:35 AM
Hi Guys,

I have a tab control with map and a time line panel. On a button click i get a json value and populate it into the store and then call a dispatch method in my controller to call the tab control view. The view opens up but the map render method is never called. Can you tell me how do i render the map with the new json data. I have attach the code below.

this method is called from button click dispatch method:

showMapBasedOnInputLocation: function (options) {
parking.views.map, options.animation

Tab Control :

var position = new google.maps.LatLng(37.44885, -122.158592);
var imageFileName;
var infoWindow = new google.maps.InfoWindow({});
var markers = new Array();

var MarkerTemplate = new Ext.XTemplate(

'<div class="mover">',
'<div class="bubble">',
'<div class="bHeader">',
'<div class="closeX"></div>',
'<div class="bBody">',
'Blocks near Filbert St.<br />',
'At Stockton St.',
'<div class="spacer10"></div>',
'<div class="borderBreak"></div>',
'<strong>Space Available:</strong> <strong>10%</strong> (1/11)<br />',
'<strong>Current Price:</strong> $2/hr-$8/4hrs',
'<a href="javascript:void(0);" onclick="showBubbleDetailsPage(id)">Show Details</a>&nbsp;&nbsp;<a href="#">Driving Directions</a>',
'</div><!-- END bBody -->',
'<div class="details">',
'<strong>Details:</strong><br />',
'Facility ID: 12345<br />',
'Type: Street<br />',
' Entry Height: 7ft<br />',
' Maximum Time: 24hrs<br />',
' </div><!-- END details -->',
' <div class="clear"></div>',
'<div class="bubbleCorner"><img src="img/global/bubbleCorner.png" width="21" height="22" /></div>',
'</div><!-- END bubble -->',
' </div><!-- END mover -->'


var map = new Ext.Map({
title: 'Map',
mapOptions: {
center: new google.maps.LatLng(37.381592, -122.135672),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP,
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.DEFAULT
listeners: {
render: function (comp, map) {

if (parking.stores.ParkingFacility.data.items.length > 0) {
pdata = parking.stores.ParkingFacility;
for (var i = 0, ln = pdata.data.items[0].length; i < ln; i++) {
imageFileName = image(pdata.data.items[0][i].Rendering, "ParkingFacility");
addMarkers(pdata.data.items[0][i], pdata.data.items[0][i].Latitude, pdata.data.items[0][i].Longitude, imageFileName, "ParkingFacility");

for (var j = 0, len = pdata.data.items[0].length; j < len; j++) {
imageFileName = image(pdata.data.items[0][j].Rendering, "ParkingZone");
addMarkers(pdata.data.items[0][j], pdata.data.items[0][j].CentralLatitude, pdata.data.items[0][j].CentralLongitude, imageFileName, "ParkingZone");


var image = function (rendering, type) {

var imagefile;
switch (rendering) {
case 0:
if (type == "ParkingFacility") {
imagefile = "icon_blueP.png";

else {
imagefile = "icon_blueSP.png";
case 1:
if (type == "ParkingFacility")
imagefile = "icon_greenP.png";
imagefile = "icon_greenSP.png";

case 2:
if (type == "ParkingFacility")
imagefile = "icon_yellowP.png";
imagefile = "icon_yellowSP.png";
case 3:

if (type == "ParkingFacility")
imagefile = "icon_redP.png";
imagefile = "icon_redSP.png";
return imagefile;

var addMarkers = function (data, latitude, longitude, image, content) {

var latLng = new google.maps.LatLng(latitude, longitude);

var icon = new google.maps.MarkerImage("/resources/images/" + image, null, null, new google.maps.Point(0, 34), new google.maps.Size(21, 34));

marker = new google.maps.Marker({
map: map.map,
position: latLng,
icon: icon

marker.set('location', data);

google.maps.event.addListener(marker, 'click', function () {
var area = this.get('location');
var infoWindowHtml = content;
infoWindow.open(map, this);

// setTimeout( function(){ map.panTo (position); } , 1000);


function clearMarkers() {
for (var i = 0; i < markers.length; i++) {
markers.length = 0;

var template = new Ext.XTemplate(

'<tpl for=".">',
'<div class="results">',
'<div class="icon">',
'<tpl if="ParkingType != &quot;On-street&quot;">',
'<tpl if="Rendering == 0 ">',
'<img src="/resources/images/icon_blueP.png" width="21" height="34" alt="Parking Facilities Icon" /></div>',
'<tpl if="Rendering ==1 ">',
'<img src="/resources/images/icon_greenP.png" width="21" height="34" alt="Parking Facilities Icon" /></div>',
'<tpl if="Rendering ==2 ">',
'<img src="/resources/images/icon_yellowP.png" width="21" height="34" alt="Parking Facilities Icon" /></div>',
'<tpl if="Rendering ==3 ">',
'<img src="/resources/images/icon_redP.png" width="21" height="34" alt="Parking Facilities Icon" /></div>',
'<tpl if="ParkingType == &quot;On-street&quot;">',
'<tpl if="Rendering == 0 ">',
'<img src="/resources/images/icon_blueSP.png" width="21" height="34" alt="Parking Zones Icon" /></div>',
'<tpl if="Rendering ==1 ">',
'<img src="/resources/images/icon_greenSP.png" width="21" height="34" alt="Parking Zones Icon" /></div>',
'<tpl if="Rendering ==2 ">',
'<img src="/resources/images/icon_yellowSP.png" width="21" height="34" alt="Parking Zones Icon" /></div>',
'<tpl if="Rendering ==3 ">',
'<img src="/resources/images/icon_redSP.png" width="21" height="34" alt="Parking Zones Icon" /></div>',
'<div class="info">',
'<strong>{ParkingType}</strong><br />',
'<strong>{Distance}</strong><br />',
'<a href="#" style="text-decoration: underline;">Show All Details</a>',
'<div style="margin-bottom: 8px;"></div>',
'Space Available: <strong>{PercentFull}%</strong> ({OccupiedParkingSpace}/{TotalParkingSpace})<br />',
'Current Price: $8/hr-$35/day<br />',
'Open Today: {TodayTimings}<br />',
'<a href="#" style="text-decoration: underline;">View On Map</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#" style="text-decoration: underline;">Get Driving Directions</a><br />',
'<div class="address">',
'{LotName}<br />',
'{Street}<br />',
'</div><!-- END address -->',

'<div style="clear: both;"></div>',



var timeline = new Ext.Panel({
title: 'ResultsList',
scroll: 'vertical',
tpl: template

parking.views.map = Ext.extend(Ext.Panel, {
fullscreen: true,
dockedItems: [
{ xtype: 'header' }
items: [{
xtype: 'tabpanel',
activeTab: 0,
plain: true,
layoutOnTabChange: true,
tabBar: {
dockedItems: [
xtype: 'button',
ui: 'back',
text: 'Start Over',
dock: 'left',
height: 5,
width: 102,
style: { top: '5px !important', height: '30px !important', backgroundimage: 'none !important', color: '#fff !important' },
handler: function () {
controller: parking.controllers.controller,
action: 'backToForm'

fullscreen: true,
cardSwitchAnimation: 'slide',
ui: 'light',
items: [map, timeline ]
initComponent: function () {
parking.views.map.superclass.initComponent.apply(this, arguments);

Can you tell me why the render method is not getting called.

Secondly, when the map does not load properly. I have to minimize the browser window and maximize again tho make the map show on the whole page. Attached the screen shot.


Any help will be really appriciated.


22 Nov 2011, 11:33 AM
If you want to render a new map every time your store changes you will need to remove and then add a new map component.

22 Nov 2011, 11:51 AM
Can you show me an example or code snippet based on my above post on how to do it.


25 Nov 2011, 12:45 PM
If you want to render a new map every time your store changes you will need to remove and then add a new map component.

Hello, I have following in controller :

this.mapPanel = this.render({
xtype: 'LocationsMapView'

//then get DOM of LocationsMapView, get coordinates, then setCenter the map

First time, map shows correctly. But second time, it just shows sencha's default Panel background.
You mentioned removing the map component.

if(this.mapPanel){ this.mapPanel.destroy(); }
I've tried above code but gives me error "Uncaught TypeError: Cannot read property 'parentNode' of undefined"

What concept am i missing regards to render, setactiveitem, then using DOM to get handle on map div that will be used for google map?