How to display a map with markers based on XML Lat and Long.

[daftwolfie]

Hi everyone,
I'm creating this application which will display a list of road related incidents based on a XML feed. These XML feed contains Latitude and Longitude values as well. I would like to add the functionality of it in such a way that when a user clicks on any of the item on the list, a map will appear and show, with the help of markers , the location of the incident based on those Lat and Long values.

This is my Model, whereby I have extracted the fields i want from the XML feed:

Model.PNG

Right now, I would like to know how I can add these Lat and Long values to the map. Previously for the list I had used '{Message}' which works and displays the incident details on the list. How do I apply the values from the Model fields into the map? Thank You!!

[jeffrey.hobson]

You should check out the Google Maps v3 guides and documentation. For a quick summary though:

Map markers are created by instantiating the Google Maps Marker class and setting a value for the map.

var marker = new google.maps.Marker({
    position: new google.maps.LatLng(myLat, myLon)
});
marker.setMap(myMap); // Note that myMap is the google.maps.Map object, not the Ext.Map object

Use the Sencha Ext.Map object to display a Google Maps map wrapped in a panel.