kevinjset
2 Jan 2012, 1:37 AM
Hello! This is just a map (Sencha Touch 1.x using a wrapper for the Google Maps API V3) with two locations (location 1 and location 2). I want to be able to hide/show location 2 at will using buttons "hide location 2" and "show location 2" respectively. I'm having trouble re-showing my Location 2 Marker. I have an array called markersArray, which I push my Location 2 Marker into. I'm able to hide the marker successfully using "markersArray[0].setMap(null)," but when I want to re-show my Location 2 Marker with "markersArray[0].setMap(map)," it doesn't work. Does anybody know why my setMap(map) isn't working? Also, at "maprender : function (comp, map)", what does comp mean? (I was following the source code for index.js of SenchaTouch example of Map) Here's the following code:
App.views.HomePharmacyLocations = Ext.extend(Ext.Panel, {
html: '<h2>Pharmacy Locations</h2> <p>This is the Pharmacy Locations Screen.</p>',
initComponent: function() {
toolbar = new Ext.Toolbar({
dock : 'top',
xtype : 'toolbar',
ui : 'light',
defaults : {
iconMask: true
},
items : [
{
text: 'Show Location 2',
ui: 'confirm',
handler: function(){
markersArray[0].setMap(map);
},
},
{ xtype: 'spacer' },
{
text: 'Hide Location 2',
ui: 'confirm',
handler: function(){
markersArray[0].setMap(null);
},
}
]
});
var markersArray = [];
var Location1 = new google.maps.LatLng(34.147195, -118.151457);
var Location2 = new google.maps.LatLng(33.656985, -117.773104);
var marker1, marker2;
var mapdemo = new Ext.Map({
mapOptions : {
center: Location1,
mapTypeId : google.maps.MapTypeId.ROADMAP,
zoom : 9
},
listeners : {
maprender : function (comp, map) {
marker1 = new google.maps.Marker({
position: Location1,
title : 'Location 1',
map: map
});
marker2 = new google.maps.Marker({
position: Location2,
title : 'Location 2',
map: map
});
markersArray.push(marker2);
/*
if(markersArray) {
for (i in markersArray) {
markersArray[i].setMap(null);
}
}
*/
}
}
});
new Ext.Panel({
fullscreen: true,
dockedItems: [toolbar],
items: [mapdemo]
});
App.views.HomePharmacyLocations.superclass.initComponent.call(this);
},
styleHtmlContent: true,
style: "background-color: #ADB4C3;",
});
Ext.reg('HomePharmacyLocations', App.views.HomePharmacyLocations);
App.views.HomePharmacyLocations = Ext.extend(Ext.Panel, {
html: '<h2>Pharmacy Locations</h2> <p>This is the Pharmacy Locations Screen.</p>',
initComponent: function() {
toolbar = new Ext.Toolbar({
dock : 'top',
xtype : 'toolbar',
ui : 'light',
defaults : {
iconMask: true
},
items : [
{
text: 'Show Location 2',
ui: 'confirm',
handler: function(){
markersArray[0].setMap(map);
},
},
{ xtype: 'spacer' },
{
text: 'Hide Location 2',
ui: 'confirm',
handler: function(){
markersArray[0].setMap(null);
},
}
]
});
var markersArray = [];
var Location1 = new google.maps.LatLng(34.147195, -118.151457);
var Location2 = new google.maps.LatLng(33.656985, -117.773104);
var marker1, marker2;
var mapdemo = new Ext.Map({
mapOptions : {
center: Location1,
mapTypeId : google.maps.MapTypeId.ROADMAP,
zoom : 9
},
listeners : {
maprender : function (comp, map) {
marker1 = new google.maps.Marker({
position: Location1,
title : 'Location 1',
map: map
});
marker2 = new google.maps.Marker({
position: Location2,
title : 'Location 2',
map: map
});
markersArray.push(marker2);
/*
if(markersArray) {
for (i in markersArray) {
markersArray[i].setMap(null);
}
}
*/
}
}
});
new Ext.Panel({
fullscreen: true,
dockedItems: [toolbar],
items: [mapdemo]
});
App.views.HomePharmacyLocations.superclass.initComponent.call(this);
},
styleHtmlContent: true,
style: "background-color: #ADB4C3;",
});
Ext.reg('HomePharmacyLocations', App.views.HomePharmacyLocations);