PDA

View Full Version : Maps and Markers



Rohall
16 Jul 2010, 8:16 AM
Hey Everyone, I'm having a bit of trouble getting a marker to display on a map. The map appears, but no marker is displayed. I've actually had no luck drawing anything at all on top of the map...any help would be hugely appreciated!




this.panelMap = new Ext.Map({
layout: 'fit',
mapOptions: {
zoom: 2,
center: new google.maps.LatLng(-25.363882,131.044922)
}
});

var marker = new google.maps.Marker({
map: this.panelMap.map,
position: new google.maps.LatLng(-25.363882,131.044922)
});

arlo.carreon
16 Jul 2010, 9:12 AM
Your syntax looks good. I think it might be the "this" object that is confusing your marker config can you try this code for your marker.



var mapObj = this.panelMap.map;
var marker = new google.maps.Marker({
map: mapObj,
position: new google.maps.LatLng(-25.363882,131.044922)
});


let me know.

Rohall
16 Jul 2010, 9:16 AM
Thanks for the help, but unfortunately that doesn't seem to make a difference. Any other ideas?

arlo.carreon
16 Jul 2010, 9:32 AM
I see what the problem is. You need to create the marker sometime AFTER the map has been loaded into the panel.

Rohall
16 Jul 2010, 9:38 AM
Thanks again, I made that adjustment and I'm still getting the same results. Do I need to do anything to refresh the map?



this.ui = new ui.ContainerUI({
title: "Store UI",
dockedItems: [this.titleBar],
items: [ this.panelHome, this.panelMap ]
});

//this.ui.insertDocked(2, this.backButton);

this.ui.getLayout().next("slide", true);
//this.ui.getLayout().next("slide", true);

var mapObj = this.panelMap.map;
var marker = new google.maps.Marker({
map: mapObj,
position: new google.maps.LatLng(-25.363882,131.044922)
});

arlo.carreon
16 Jul 2010, 9:56 AM
did you try adding the marker in the:


Ext.Setup({ onReady: function(){
var mapObj = this.panelMap.map;
var marker = new google.maps.Marker({
map: mapObj,
position: new google.maps.LatLng(-25.363882,131.044922)
});
} })

Rohall
16 Jul 2010, 10:00 AM
hmm good thought, but still no luck.

I think I have the Friday at 2pm syndrome.

arlo.carreon
16 Jul 2010, 10:06 AM
lol, I guess so. Sorry I couldn't help.

arlo.carreon
16 Jul 2010, 10:13 AM
Your map object and marker object are good. I inserted them into my application and it shows your map with your marker. You must have something wrong with your flow. I attached a screen shot.

Rohall
16 Jul 2010, 10:17 AM
Thanks again for all your help. I'm going to dig around my code and try and figure out what the heck I did wrong :P. I'll post a reply here when I fix it.

Rohall
16 Jul 2010, 10:20 AM
the plot thickens. The marker is displayed for a second as the map loads and then disappears once it has been centered...

arlo.carreon
16 Jul 2010, 10:27 AM
lol, awesome. Seems like it is coming along.

Rohall
16 Jul 2010, 12:46 PM
I ended up reducing my code to just the map element and the panel that is displaying it, but I'm still having no luck at all. If anyone has a working map in one of their applications (excluding the demos, wasn't able to make any progress from them) I'd really love to take a look. Thanks :).

arlo.carreon
16 Jul 2010, 12:58 PM
I have tested this and it works fine. It is the bare bones of my current project.



// Some Variables
var defaultLocation = {latitude:29.763324,longitude:-95.379634};


// Map Object/Settings
var HARmap = new Ext.Map({
xtype: 'map',
centered: true,
mapOptions:
{
center: new google.maps.LatLng(defaultLocation.latitude,defaultLocation.longitude),
zoom:11
}
});
// END - MAP Settings

var bottomMenu =
{
xtype: 'splitbutton',
items:
[
{text:'Property Criteria',handler: function(){ alert('Property Form Here'); }},
{text:'Location / Amenities',handler: function(){ alert('Location Form Here'); }},
{text:'Open Houses Search', handler: function(){ alert('Open House Form Here'); } }
]
}

new Ext.setup({
glossOnIcon: false,
onReady:
function()
{
new Ext.Panel({
fullscreen: true,
dockedItems:
[{
xtype: 'toolbar',
dock: 'top',
title: 'HAR Map Touch',
ui: 'light'
},
{
xtype: 'toolbar',
dock: 'bottom',
ui: 'dark',
defaults: {ui:'mask'},
items:[bottomMenu]
}],
items: [HARmap]
});

// Add marker
var marker = new google.maps.Marker({
position: new google.maps.LatLng(defaultLocation.latitude, defaultLocation.longitude),
map: HARmap.map
});

}
});

arlo.carreon
16 Jul 2010, 1:01 PM
Here is some code that works for me.



// Some Variables
var defaultLocation = {latitude:29.763324,longitude:-95.379634};


// Map Object/Settings
var HARmap = new Ext.Map({
xtype: 'map',
centered: true,
mapOptions: { center: new google.maps.LatLng(defaultLocation.latitude,defaultLocation.longitude), zoom:11 }
});
// END - MAP Settings

var bottomMenu =
{
xtype: 'splitbutton',
items:
[
{text:'Property Criteria',handler: function(){ alert('Property Form Here'); }},
{text:'Location / Amenities',handler: function(){ alert('Location Form Here'); }},
{text:'Open Houses Search', handler: function(){ alert('Open House Form Here'); } }
]
}

new Ext.setup({
glossOnIcon: false,
onReady:
function()
{
new Ext.Panel({
fullscreen: true,
dockedItems:
[{
xtype: 'toolbar',
dock: 'top',
title: 'HAR Map Touch',
ui: 'light'
},
{
xtype: 'toolbar',
dock: 'bottom',
ui: 'dark',
defaults: {ui:'mask'},
items:[bottomMenu]
}],
items: [HARmap]
});

// Add marker
var marker = new google.maps.Marker({
position: new google.maps.LatLng(defaultLocation.latitude, defaultLocation.longitude),
map: HARmap.map
});

}
});

Rohall
17 Jul 2010, 11:32 AM
Thanks so much! This works perfectly. i'm going to try and figure out the cause, if I do I'll let you know. Either way if I can repay the favor just let me know :D