Hello.
I'm trying to develop a kind of online dashboard: map with thousand
markers.
I draw for each marker (with a click event) a Pie chart, bar chart and
GeoChart. Each of these graphics elements has its own data but
together they form the dashboard’s content. This is how I proceed.
// I create the map
function loadMap()
{
var latlng = new google.maps.LatLng(myLat,myLng);
var myOptions ={
zoom: 13,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new
google.maps.Map(document.getElementById("map_div"),
myOptions);
readData(map);
} // End LoadMap
// I will read XML file
function readData(map)
{
var thisCC;
var nbrLatMAX,nbrLatMIN,nbrLngMAX,nbrLngMIN;
var nbrLat=[];
var nbrLng=[];
var thisGen1st;
var thisGen2nd;
var thisGen3rd;
var thisText;
var thisImmPop,thisImmImm;
var urlMyXML="./data/myFile.xml";
downloadUrl(urlMyXML, function(data)
{
var xml = data.responseXML;
var markers =
xml.documentElement.getElementsByTagName("point");
sizeFile= markers.length;
//alert ("markers.length:"+sizeFile);
for (var i = 0; i < markers.length; i++)
{
// I read the data here, for ex:
thisGen1st = parseFloat(markers[i].getAttribute("Gen1st"));
// I send to a function that form an array
storeOutlets(thisCC,thisGen1st,thisGen2nd,thisGen3rd,nbrLat,nbrLng);
}// Loop Ends here
// I send to a function that reads the array
readOutlets(map,
CC,arrGen1st,arrGen2nd,arrGen3rd,arrLat,arrLon,arrText);
}); // Here ends downloadUrl
}// readData ends here
//
function storeOutlets
(thisCC,thisGen1st,thisGen2nd,thisGen3rd,nbrLat,nbrLng,thisText)
{
// the array is filled here, for ex:
arrGen1st.push(thisGen1st);
} // readData ends here
//
function readOutlets(map,
CC,arrGen1st,arrGen2nd,arrGen3rd,arrLat,arrLon,arrText)
{
// some definitions
for(var i=0;i<CC.length;i++)
{
thisCC=costCentre[i];
// Each time I read a record I send it t
CreateMarkers
createMarker(map,latlng,thisText,
thisCC,thisGen1st,thisGen2nd,thisGen3rd);
}
}// readOutlets Ends here
//
function
createMarker(map,CPC_Position,infoCPC,thisCC,thisGen1st,thisGen2nd,thisGen3rd)
{
var marker = new google.maps.Marker({
map: map,
position: CPC_Position,
icon:icon_CPC,
title:infoCPC
});
google.maps.event.addListener(marker, 'click', function()
{
//With a clcik I send to Graphics elements: PieChart, Bar
chart,..
drawTable('Gen1st',thisGen1st,'Gen2nd',thisGen2nd,'Gen3rd',thisGen3rd,thisCC) ;
drawVisualization();
//....
});
} // createMarkers ends here
This is the most important part of the code.
My problem, is when I click on a marker, then I can no longer click on
an other, which means; data is lost! Map need to be refreshed.. No?
Maybe it's an Ajax problem, but I could not have a clue... Could you
help please?
Thank You
Abel
--
You received this message because you are subscribed to the Google Groups
"Google Maps JavaScript API v3" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/google-maps-js-api-v3?hl=en.
