PDA

View Full Version : setMap(map) not working.



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);

mitchellsimoens
2 Jan 2012, 6:06 AM
Please do not double post and please use the code tags and not quote when posting code. I have cleaned both up for you.

When you do this:


markersArray[0].setMap(map);

Where is 'map' coming from and what is it?

kevinjset
2 Jan 2012, 2:37 PM
Yeah my bad about that when I first posted I forgot to put in the code tags, and then I thought I did the second time, but I guess it didn't work and I used quote tags instead. Anyway, I thought that the "map" from "markersArray[0].setMap(map);" came from "maprender : function (comp, map) {" and from "map : map" for both marker1 and marker2 respectively, since I want both marker1 and marker2 to display on "map." Also, do you know what "comp" means from "maprender : function (comp, map) {" ?

mitchellsimoens
3 Jan 2012, 5:24 AM
map is only valid in the context of the maprender event function. comp is usually the component that is firing the event, in this case it is the Ext.Map instance.

kevinjset
3 Jan 2012, 9:56 AM
Ahh I see. Okay cool thanks for clearing that up for me!