Add markers to a Ext.Map in Sencha Touch - extjs

Question

I am trying to make an application which displays a map with your current location marker and several markers related to data from the server which location is closed to your current location. So far I can render the map, show the current location and get the data related to this location. The problem arise when I try to add markers about the location of this data.
I´ve read through a lot of forums and pages but I found no solution.
I use this piece of code to add markers (to try to add them ..):
var marker = new google.maps.Marker({
map: map._map,
position: new google.maps.LatLng(bookletMarker[i].location[1],bookletMarker[i].location[0]),
title : bookletMarker[i].title,
draggable:false,
icon: "point.png"
});

Answer 1

//This code renders a map with 2 points and displays the route to travel from point A to point B
//On Map Render
onMapMaprender: function(map, gmap, eOpts) {
var record = Ext.getCmp('Panel').getData();
var map = Ext.ComponentQuery.query('#LocationMap')[0].getMap();
var polyline = new google.maps.Polyline();
var markerImage = new google.maps.MarkerImage(
'marker.png',
new google.maps.Size(32, 31),
new google.maps.Point(0, 0),
new google.maps.Point(16, 31)
);
var lat = record.data.latitude;
var lon = record.data.longitude;
console.log(lat,lon);
var destinationMarker = new google.maps.Marker({
icon: markerImage,
position: new google.maps.LatLng(lat,lon),
title : 'destination',
map: map,
})
var latSrc = localStorage.getItem('lat');
var lonSrc = localStorage.getItem('lon');
var sourceMarker = new google.maps.Marker({
icon: markerImage,
position: new google.maps.LatLng(latSrc,lonSrc),
title : 'source',
map: map,
})
function dir_callback(a,b){
g=a;
route_no=0;
if(b=="OK"){
var polyarr = a.routes[route_no].overview_path;
polyline.setPath(polyarr);
polyline.setMap(map);
}
}
var dirS = new google.maps.DirectionsService();
var req = {
origin: sourceMarker.getPosition(),
destination: destinationMarker.getPosition(),
travelMode: google.maps.DirectionsTravelMode.DRIVING,
provideRouteAlternatives : true
};
dirS.route(req,dir_callback);
},
//Setting the Map
var cr = new google.maps.LatLng(lat,lon);
Ext.getCmp('LocationMap').setMapCenter(cr);

Answer 2

You should be able to get the map instance from your map with getMap() and then add the pointer as described in the google maps api docs:
marker.setMap(map);

Answer 3

You can use map.getMap() to get the google map instance and use it when you create markers.

Answer 4

Here, you have directly added icon image path, instead use MarkerImage object as follow,
var imageIcon = new google.maps.MarkerImage(
"point.png",
new google.maps.Size(32, 32),
new google.maps.Point(0, 0),
new google.maps.Point(16, 31)
);
var marker = new google.maps.Marker({
map: map._map,
position: new google.maps.LatLng(bookletMarker[i].location[1],bookletMarker[i].location[0]),
title : bookletMarker[i].title,
draggable:false,
icon: imageIcon
});