PDA

View Full Version : Google Map Markers



alexandercarter
20 Jul 2010, 7:38 AM
Hello,

I'm in the first stages of understanding Sencha and I was taking a look at previous threads concerning Google Map markers, but couldn't find a solution. I would just like to adapt some basic code so that the marker, and the info-bubble appear.


demos.Map = new Ext.Map({
layout: 'fit',
mapOptions: {
zoom: 15,
center: new google.maps.LatLng(43.621786,3.882551)
}
});

I understand the code provided by Google below, but am unsure on how to integrate it with the above code. Could anyone help? Thank you in advance :)


var marker = new google.maps.Marker({
position: "43.621786,3.882551",
title:"Hello World!"
});

marker.setMap(map);

evant
20 Jul 2010, 7:45 AM
The map example shows exactly that, you'll see in the code it adds a marker. The code is the same:



Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function() {
var toolbar = new Ext.Toolbar({
dock: 'top',
xtype: 'toolbar',
title: 'Map'
});

var position = new google.maps.LatLng(37.23895,-122.158592);

var mapdemo = new Ext.Map({
center: position
});

new Ext.Panel({
fullscreen: true,
dockedItems: [toolbar],
items: [mapdemo]
});

// The following is accomplished with the Google Map API

var infowindow = new google.maps.InfoWindow({
content: 'Ext JS'
})

var marker = new google.maps.Marker({
position: position,
map: mapdemo.map
});

google.maps.event.addListener(marker, 'click', function() {
infowindow.open(mapdemo.map, marker);
});
}
});

alexandercarter
20 Jul 2010, 8:19 AM
Thank you!

To elaborate on the point, I was wondering if it was possible to insert the Google Map code into the icon view? In the first panel, I'd have text, in the second, a map. What I'm trying to understand are the basic principles, because after that it's so well constructed that I shouldn't have a lot of difficulty putting the basic elements together. I imagine I have to call a card, rather than HTML? Again, thanks :)


demos.Icons = new Ext.TabPanel({
items: [{
iconCls: 'bookmarks',
title: 'Bookmarks',
cls: 'card card3',
html: 'Text here'
},
{
iconCls: 'search',
title: 'Search',
cls: 'card card4',
html: 'Google Map here'
}],
tabBar: {
dock: 'bottom',
scroll: {
direction: 'horizontal',
scrollbars: false
},
layout: {
pack: 'center'
}
},
});

evant
20 Jul 2010, 8:23 AM
var map = new Ext.Map(.......);
demos.Icons = new Ext.TabPanel({
items: [{
iconCls: 'bookmarks',
title: 'Bookmarks',
cls: 'card card3',
html: 'Text here'
},
{
iconCls: 'search',
title: 'Search',
cls: 'card card4',
layout: 'fit',
items: map
}],
tabBar: {
dock: 'bottom',
scroll: {
direction: 'horizontal',
scrollbars: false
},
layout: {
pack: 'center'
}
},
});

alexandercarter
20 Jul 2010, 8:33 AM
So great, the map loads inside the icon frame :) Is there any reason based on the code below that my own coordinates are not picked up and the default Palo Alto map is shown? I'm sorry to bother you one last time.


var position = new google.maps.LatLng(43.621786,3.882551);
var map = new Ext.Map({ center: position });
var marker = new google.maps.Marker({ position: position, map: map.map });
demos.Icons = new Ext.TabPanel({
items: [{
iconCls: 'bookmarks',
title: 'Bookmarks',
cls: 'card card3',
html: 'Text here'
},
{
iconCls: 'search',
title: 'Search',
cls: '',
layout: 'fit',
items: map
}],
tabBar: {
dock: 'bottom',
scroll: {
direction: 'horizontal',
scrollbars: false
},
layout: {
pack: 'center'
}
},
});

evant
20 Jul 2010, 8:41 AM
var position = new google.maps.LatLng(43.621786, 3.882551);
var map = new Ext.Map({
mapOptions: {
center: position
}
});

alexandercarter
20 Jul 2010, 8:59 AM
Thank you :D

alexandercarter
20 Jul 2010, 9:27 AM
OK.

evant
20 Jul 2010, 5:33 PM
Give the map some time to render:



Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function() {
var position = new google.maps.LatLng(43.621786, 3.882551);
var map = new Ext.Map({
mapOptions: {
center: position
},
listeners: {
delay: 500,
afterrender: function(){
var marker = new google.maps.Marker({
position: position,
map: map.map
});
}
}
});

var icons = new Ext.TabPanel({
fullscreen: true,
items: [{
iconCls: 'bookmarks',
title: 'Bookmarks',
cls: 'card card3',
html: 'Text here'
}, {
iconCls: 'search',
title: 'Search',
cls: '',
layout: 'fit',
items: map
}],
tabBar: {
dock: 'bottom',
scroll: {
direction: 'horizontal',
scrollbars: false
},
layout: {
pack: 'center'
}
},
});
}
});

alexandercarter
21 Jul 2010, 2:36 AM
You, sir, are a genius! Fully functional :)

tissot
21 Jul 2010, 7:35 AM
I would like to center on my current position and place a marker, but this does not work (it centers but does not show a marker, using the center directive shows the marker:


var position = new google.maps.LatLng(53.602049,10.02619);

var map = new Ext.Map({
getLocation: true,
mapOptions: {
//center: position,
zoom: 12
},
listeners: {
delay: 500,
afterrender: function(){
var marker = new google.maps.Marker({
position: position,
map: map.map
});
var infowindow = new google.maps.InfoWindow({
content: 'Demo'
})
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(mapdemo.map, marker);
});
}
}
});

evant
21 Jul 2010, 7:55 AM
Works fine for me.

tissot
22 Jul 2010, 12:52 AM
Sorry but it does not work here. I modified the sencha map example: same result - getLocation: true does not show the marker, enabling center: position does show it (tested with IPhone,Chrome and firefox)


Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function() {
var toolbar = new Ext.Toolbar({
dock: 'top',
xtype: 'toolbar',
title: 'Map'
});

var positionM = new google.maps.LatLng(53.602049,10.02619);

var mapdemo = new Ext.Map({
getLocation: true,
mapOptions: {
//center: positionM,
zoom: 12
}
});

new Ext.Panel({
fullscreen: true,
dockedItems: [toolbar],
items: [mapdemo]
});

// The following is accomplished with the Google Map API

var infowindow = new google.maps.InfoWindow({
content: 'marker'
})

var marker = new google.maps.Marker({
position: positionM,
map: mapdemo.map
});

google.maps.event.addListener(marker, 'click', function() {
infowindow.open(mapdemo.map, marker);
});
}
});


example2: no map is rendered (but the map Object is alive and has geo.coords ) :(



index.js:

Ext.setup({
icon: 'icon.png',
glossOnIcon: false,
onReady: function() {

var tabpanel = new Ext.TabPanel({
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
fullscreen: true,
ui: 'light',
animation: {
type: 'slide',
cover: true
},
defaults: {
scroll: 'vertical'
},
items: [{
iconCls: 'team',
title: 'LEs',
xtype: 'container',
cls: 'card3',
layout: 'fit',
items: mapX
}]
});

}
});


map.js:
var mapX = new Ext.Map({
getLocation: true,
mapOptions: {
// center: new google.maps.LatLng(53.602049,10.02619),
zoom: 12
},
listeners: {
delay: 500,
afterrender: function(){
var position = new google.maps.LatLng(53.602049,10.02619);
var marker = new google.maps.Marker({
position: position,
map: mapX.map,
title: 'pdv'
});
var infowindow = new google.maps.InfoWindow({
content: 'pdv'
})
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(mapX.map, marker);
});
}
}
});

mayur.tendulkar
4 Oct 2010, 10:57 PM
Hi,
My map demo works fine. Even I can put a marker on the map. However, I'm getting the position through 'geo' property and setting the marker using 'centerchange' event. Because of this, whenever I zoom-in / zoom-out the center changes and more markers are added. How can I solve this issue to add 'Locate Me' functionality, rather than embedding a location inside code.
Thanks.

gmanraj
10 Oct 2010, 11:15 PM
Hi, I have 50 markers, i tried someway to show the infowindow but not worked. Please guide me to create multiple markers with different infowindow?


for (var i = 0; i < 50; i++)
{
var marker = this.markers[i];

var infowindow = new google.maps.InfoWindow({
content: contents[i]
});

google.maps.event.addListener(marker, 'click', function() {
infowindow.open(mapdemo.map, marker);
});
}

TomInc
8 May 2011, 2:41 PM
Looking around the web for a solution to this too.. anyone know of any way to add multiple infowindows with different details? I have 10 markers placed (That was the easy bit!) Wondering if there's a way to direct each one to a different infowindow?

gmanraj
8 May 2011, 10:38 PM
found the solution.

for (var i = 0; i < 50; i++)
{
var marker = this.markers[i];

google.maps.event.addListener(marker, 'click', showInfoWindow(content[i], map, marker));
}


void showInfoWindow(content, map, marker)
{
if (infowindow == nil)
{
infowindow = new google.maps.InfoWindow({
content: content
});
}
else
{
infowindow.setContent(content);
}
infowindow.open(map, marker);
}

ajg3
9 May 2011, 5:50 AM
Using a MVC setup, how would i pass the positionM variable like tissot states?


var positionM = new google.maps.LatLng(53.602049,10.02619);

var mapdemo = new Ext.Map({
getLocation: true,
mapOptions: {
//center: positionM,
zoom: 12
}
});


this is what i currently have


Toolbar.views.Maps = Ext.extend(Ext.Map, {
title: "Map",
getLocation: true,
mapOptions: {
//center: positionM,
zoom: 12
},
initComponent: function() {
Toolbar.views.Maps.superclass.initComponent.apply(this, arguments);
}
});