Member Avatar for rinjin07

Hi guys,

Forgive me if this is a stupid question as I'm fairly new to computing. Been trying to make a webpage that displays a googlemap with multiple markers based on data from an XML file but can't seem to get it to work. Would be ETERNALLY grateful to anyone who can pick out where I'm going wrong!

<html>
<head>
<script type="text/javascript">

	function callXML(){
		if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
  			xmlhttp=new XMLHttpRequest();
  		}
		else {// code for IE6, IE5
  			xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  		}
		xmlhttp.open("GET","partners.xml",false);
		xmlhttp.send();
		return xmlhttp.responseXML;
	}
	
		xmlDoc=callXML();
		
		var partners=xmlDoc.getElementsByTagName("partner");
		var lats=new Array();
		var lngs=new Array();
		var titles=new Array();
		var descs=new Array();
		var lat;
		var lng;
		var title;
		var desc;

		for (var i=0;i<partners.length;i++) {
				lat=partners[i].getAttribute("lat");
				lats.push(lat);
				lng=partners[i].getAttribute("lng");
				lngs.push(lng);
				titles=partners[i].getAttribute("title");
				titles.push(title);
				descs=partners[i].getAttribute("desc");
				descs.push(desc);
		}
		
		var latlng = new google.maps.LatLng(lats[0], lngs[0]);
		var myOptions = {zoom: 11, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP};
    	        var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
		
		for (i=0;i<partners.length;i++){
				latlng = new google.maps.LatLng(lats[i], lngs[i]);
				marker= new google.maps.Marker({position: latlng, map: map, title: titles[i]});
		}
				
	</script>
</head>
<body>

<div id="map_canvas">

 </div>

</body>



</html>
  • 3 Contributors
  • 35 Replies
  • 477 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by rinjin07

Recommended Answers

All 35 Replies

Member Avatar for Airshow

Rinjin,

Here's a few things to try:

Give the page a doctype (first line, right at the top of the file). eg.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Install google maps on the page:
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>

If it still doesn't work, then split the code down the middle and test the two halves separately :

  1. 2nd half: Work with hard-coded arrays - lats, lngs, titles and descs - for say 3 or 4 points. Do the markers appear on the map?
  2. 1st half: Fetch the xml file and populate the arrays. Do the arrays contain the correct data as expected?

When both halves work, then put them back together. It will work.

Airshow

Edited by Airshow because: n/a
Member Avatar for rinjin07

Rinjin,

Here's a few things to try:

Give the page a doctype (first line, right at the top of the file). eg.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Install google maps on the page:
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>

If it still doesn't work, then split the code down the middle and test the two halves separately :

  1. 2nd half: Work with hard-coded arrays - lats, lngs, titles and descs - for say 3 or 4 points. Do the markers appear on the map?
  2. 1st half: Fetch the xml file and populate the arrays. Do the arrays contain the correct data as expected?

When both halves work, then put them back together. It will work.

Airshow

Hi Airshow,

Thanks so much for taking the time to try and help me. I've added in the bits you suggested and I have tried to test it in that way but it seems like no matter what I do the page won't even display the map, with or without the markers, it's always just a blank page :<

Member Avatar for Airshow

If your test with hard-coded arrays yields a blank page then then you need to concentrate on the Google code. Make sure that the AJAX code is commented out.

Do you get an error in your error console or does it fail silently?

Have you tried testing with hard-coded values in the line var latlng = new google.maps.LatLng(lats[0], lngs[0]); ?

Airshow

Edited by Airshow because: n/a
Member Avatar for rinjin07

If your test with hard-coded arrays yields a blank page then then you need to concentrate on the Google code. Make sure that the AJAX code is commented out.

Do you get an error in your error console or does it fail silently?

Have you tried testing with hard-coded values in the line var latlng = new google.maps.LatLng(lats[0], lngs[0]); ?

Airshow

Hi Airshow,

Thanks for bearing with me. I did try that but I still get the same problem of having nothing displayed, but not sure where to go from there :<<

Member Avatar for rinjin07

If your test with hard-coded arrays yields a blank page then then you need to concentrate on the Google code. Make sure that the AJAX code is commented out.

Do you get an error in your error console or does it fail silently?

Have you tried testing with hard-coded values in the line var latlng = new google.maps.LatLng(lats[0], lngs[0]); ?

Airshow

I did notice that I didn't declare the marker variable though, so have added that in at least

Member Avatar for Airshow

Rinjin,

I've not tried running your code but guess it will fail at line 42 (maybe silently), because the DOM element with id="map_canvas" doesn't exist when the code runs.

By wrapping all your javascript in:

onload = function(){
    //your code here
}

you will ensure that it doesn't run until the HTML in the document body has been interpreted and rendered.

Airshow

Member Avatar for Airshow

You also need to give the canvas some width and height.

Add to the document head:

<style>
#map_canvas {
	width:300px;
	height:300px;
	border:1px solid #000;
}
</style>

Airshow

Member Avatar for rinjin07

You also need to give the canvas some width and height.

Add to the document head:

<style>
#map_canvas {
	width:300px;
	height:300px;
	border:1px solid #000;
}
</style>

Airshow

I've changed some stuff around and have gotten the map to show, but none of the markers are coming up even if i hardcode the lat and lng. code looks like this atm

<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Distributor Locations</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=abcdefg&sensor=true_or_false"
            type="text/javascript"></script>
    <script type="text/javascript">

	function callXML(){
		if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
  			xmlhttp=new XMLHttpRequest();
  		}
		else {// code for IE6, IE5
  			xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  		}
		xmlhttp.open("GET","partners.xml",false);
		xmlhttp.send();
		return xmlhttp.responseXML;
	}
	
    function initialize() {
      if (GBrowserIsCompatible()) {
        var map = new google.maps.Map(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(0, 0), 1);
		map.setMapType(G_SATELLITE_MAP);
		map.enableRotation();
      }
	  
	  xmlDoc=callXML();
	  
	  var partners=xmlDoc.getElementsByTagName("partner");
		var lats=new Array();
		var lngs=new Array();
		var titles=new Array();
		var descs=new Array();
		var lat;
		var lng;
		var title;
		var desc;
		var marker;

		for (var i=0;i<partners.length;i++) {
				lat=partners[i].getAttribute("lat");
				lats.push(lat);
				lng=partners[i].getAttribute("lng");
				lngs.push(lng);
				title=partners[i].getAttribute("title");
				titles.push(title);
			//	descs=partners[i].getAttribute("desc");
			//	descs.push(desc);
		}
		
		for (i=0;i<title.length;i++){
				latlng = new google.maps.LatLng(23.709921, 90.407143);
				marker= new google.maps.Marker({position: latlng, map: map, title: titles[i]});
		}
    }

    </script>
  </head>
  <body onload="initialize()" onunload="GUnload()">
    <div id="map_canvas" style="width: 600px; height: 400px"></div>
  </body>
</html>
Member Avatar for Airshow

Rinjin, you're still trying to debug the whole thing in one go.

First get the markers right with hard-coded data, then debug the AJAX.

The line for (i=0;i<title.length;i++){ needs fixing. It should loop through the array titles not the string title .

Airshow

Member Avatar for rinjin07

Rinjin, you're still trying to debug the whole thing in one go.

First get the markers right with hard-coded data, then debug the AJAX.

The line for (i=0;i<title.length;i++){ needs fixing. It should loop through the array titles not the string title .

Airshow

nooo im still trying to get the hard coded version to work :<<<

Member Avatar for Airshow

OK, can you post the version with the hard-code, so I can see it please.

A

Member Avatar for rinjin07

OK, can you post the version with the hard-code, so I can see it please.

A

sure

<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Distributor Locations</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=abcdefg&sensor=true_or_false"
            type="text/javascript"></script>
    <script type="text/javascript">

	function callXML(){
		if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
  			xmlhttp=new XMLHttpRequest();
  		}
		else {// code for IE6, IE5
  			xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  		}
		xmlhttp.open("GET","partners.xml",false);
		xmlhttp.send();
		return xmlhttp.responseXML;
	}
	
    function initialize() {
      if (GBrowserIsCompatible()) {
        var map = new google.maps.Map(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(0, 0), 1);
		map.setMapType(G_SATELLITE_MAP);
		map.enableRotation();
		map.addControl(new GLargeMapControl());
      }
	  
	  xmlDoc=callXML();
	  
	  var partners=xmlDoc.getElementsByTagName("partner");
		var lats=new Array();
		var lngs=new Array();
		var titles=new Array();
		var descs=new Array();
		var lat;
		var lng;
		var title;
		var desc;


		for (var i=0;i<partners.length;i++) {
				lat=partners[i].getAttribute("lat");
				lats.push(lat);
				lng=partners[i].getAttribute("lng");
				lngs.push(lng);
				title=partners[i].getAttribute("title");
				titles.push(title);
			//	descs=partners[i].getAttribute("desc");
			//	descs.push(desc);
		}
		
		for (i=0;i<titles.length;i++){
				latlng = new google.maps.LatLng(23.709921, 90.407143);
				marker= new google.maps.Marker({position: latlng, map: map, title: titles[i]});
		}
    }

    </script>
  </head>
  <body onload="initialize()" onunload="GUnload()">
    <div id="map_canvas" style="width: 600px; height: 400px"></div>
  </body>
</html>
Member Avatar for Airshow

That's not what I meant by hard-coded. The code still relies on partners and partners relies on AJAX to deliver an xml file.

Also, now there's a mixture of google maps api v2 and v3. Should be v3 throughout.

This is more like what I was expecting to see:

<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Distributor Locations</title>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript">
onload = function() {
	var canvas = document.getElementById("map_canvas");
	if (canvas) {
		// *** Hard-coded data ***
		var lat_0 = 23.709921;
		var lng_0 = 90.407143;
		var lats = [lat_0+0, lat_0-0.03, lat_0-0.03, lat_0+0.03, lat_0+0.03];
		var lngs = [lng_0+0, lng_0-0.03, lng_0+0.03, lng_0-0.03, lng_0+0.03];
		var titles = ['point_0', 'point_1', 'point_2', 'point_3', 'point_4'];
		// ***********************

		var myOptions = {
			zoom: 11,
			center: new google.maps.LatLng(lats[0], lngs[0]),
			mapTypeId: google.maps.MapTypeId.ROADMAP
		};
		var map = new google.maps.Map(canvas, myOptions);
		
		var marker;
		for (i=0; i<titles.length; i++) {
			latlng = new google.maps.LatLng(lats[i], lngs[i]);
			marker = new google.maps.Marker({position: latlng, map: map, title: titles[i]});
		}
	}
}
</script>
</head>

<body>

	<div id="map_canvas" style="width: 600px; height: 400px"></div>

</body>
</html>

Airshow

Edited by Airshow because: n/a
Member Avatar for rinjin07

That's not what I meant by hard-coded. The code still relies on partners and partners relies on AJAX to deliver an xml file.

Also, now there's a mixture of google maps api v2 and v3. Should be v3 throughout.

This is more like what I was expecting to see:

<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Distributor Locations</title>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript">
onload = function() {
	var canvas = document.getElementById("map_canvas");
	if (canvas) {
		// *** Hard-coded data ***
		var lat_0 = 23.709921;
		var lng_0 = 90.407143;
		var lats = [lat_0+0, lat_0-0.03, lat_0-0.03, lat_0+0.03, lat_0+0.03];
		var lngs = [lng_0+0, lng_0-0.03, lng_0+0.03, lng_0-0.03, lng_0+0.03];
		var titles = ['point_0', 'point_1', 'point_2', 'point_3', 'point_4'];
		// ***********************

		var myOptions = {
			zoom: 11,
			center: new google.maps.LatLng(lats[0], lngs[0]),
			mapTypeId: google.maps.MapTypeId.ROADMAP
		};
		var map = new google.maps.Map(canvas, myOptions);
		
		var marker;
		for (i=0; i<titles.length; i++) {
			latlng = new google.maps.LatLng(lats[i], lngs[i]);
			marker = new google.maps.Marker({position: latlng, map: map, title: titles[i]});
		}
	}
}
</script>
</head>

<body>

	<div id="map_canvas" style="width: 600px; height: 400px"></div>

</body>
</html>

Airshow

okay thank you, so i guess that means there's a problem with my arrays? ive replaced the hard code with the section of my code that is meant to fetch the attributes and push them into the prospective arrays but it's gone right back to the problem of displaying nothing

Member Avatar for Airshow

Yes, that's what I would expect. The problem is not with the arrays themselves but with the way you are trying to populate them with data.

You need to do some background reading on AJAX.

Hint: xmlhttp.open("GET","partners.xml",false); won't work in most browsers. Try xmlhttp.open("GET","partners.xml",true); with an asynchronous response handler.

With the help of examples on the web, you'll find it's quite simple. I could write the for you but you will get more satisfaction from doing it youself.

Airshow

Edited by Airshow because: n/a
Member Avatar for rinjin07

Yes, that's what I would expect. The problem is not with the arrays themselves but with the way you are trying to populate them with data.

You need to do some background reading on AJAX.

Hint: xmlhttp.open("GET","partners.xml",false); won't work in most browsers. Try xmlhttp.open("GET","partners.xml",true); with an asynchronous response handler.

With the help of examples on the web, you'll find it's quite simple. I could write the for you but you will get more satisfaction from doing it youself.

Airshow

Yeah I appreciate that, thank you, and I know it's a lot more work for you to try and drop hints rather than come out with the answer. but it hasnt worked at all, would it help if i provided the xml code as well?

Member Avatar for Airshow

Rinjin,

Don't get despondent. I've learned this stuff over the last 13 years or so and some of it was hard work.

Yes, post the XML. I'll see what I can do with it.

Airshow

Edited by Airshow because: n/a
Member Avatar for Troy III

Hello rinjin07
you are using AJAX call in sync context.
The "A" in AJAX stands for "Asynchronous"

Therefore this code might get you walking:

var oReq = getXMLHttpRequest();
var xmlDoc;

function getXMLHttpRequest(){
        return new window.XMLHttpRequest;
	}

function handleRequest(){
	    if( oReq.readyState == 4 ){
	        if( oReq.status == 200 ){
	xmlDoc = oReq.responseXML;
	procesXMLData() 
		}
	    }
	}
	
if (oReq != null) {
	    oReq.open("GET", "partners.xml", true);
	    oReq.onreadystatechange = handleRequest;
	    oReq.send();
}
	
function procesXMLData(){
	var lat, lng, title, desc;
	var lats=[], lngs=[], titles=[], descs=[];
	var partners=xmlDoc.getElementsByTagName("partner");

alert(partners[0])	/*if you get this alert you are good to go
		if alert 'undefined' or something bad:
		change "partners.xml" to its absolute url
		else remove this alert and continue debugging hereon
		if the rest of the script is good but still no go
		re-check your html code as adviced by Airshow */

	for (var i=0;i<partners.length;i++) {
		lat=partners[i].getAttribute("lat");
		lats.push(lat);
		lng=partners[i].getAttribute("lng");
		lngs.push(lng);
		titles=partners[i].getAttribute("title");
		titles.push(title);
		descs=partners[i].getAttribute("desc");
		descs.push(desc);
	}
	
	var latlng = new google.maps.LatLng(lats[0], lngs[0]);
	var myOptions = {zoom: 11, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP};
    	        var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
	
	for (i=0;i<partners.length;i++){
			latlng = new google.maps.LatLng(lats[i], lngs[i]);
			marker= new google.maps.Marker({position: latlng, map: map, title: titles[i]});
	}

Regards @all, Troy III

Member Avatar for rinjin07

thanks guyssss, but i dont even get an alert or anything. still just showing nothing on the page, no map, no anything, no matter what i do except for the hard coded version :<

Member Avatar for Airshow

Rinjin,

Can you post the XML please.

Airshow

Member Avatar for rinjin07

Rinjin,

Can you post the XML please.

Airshow

<partners>
<partner lat="23.709921" lng="90.407143" title="ARANYA (Bangladesh)- WTFO Member" desc="ARANYA is a craft research and development organization which has been working with the revival and promotion of the fine craft traditions of Bangladesh for more than two decades. As a fair trade micro-enterprise, ARANYA's partnership with craftspeople guarantees fair wages and ensures that they are not exploited or undervalued. ARANYA has revived the use of natural dyes in Bangladesh and has trained hundreds of artisans in dyeing and printing techniques. It works in hand-woven, embroidered and block printed handloom silk and organic cotton fabrics. It has developed and worked with the Jamdani Nakshi Kantha techniques, unique to Bangladesh."/>
<partner lat="-16.5026527" lng="-68.1622267" title="ASARBOLSEM (BOLIVIA)- WFTO Member" desc="Asociación Artesanal Boliviana Señor de Mayo is a co-operative working in Bolivia since 1989. It has more than 390 members, spread our throughout Bolivia. Of the members, 98% are women and disabled people. Señor de Mayo specialises in producing handmade textiles, knitted jumpers, scarves, hats, and gloves of alpaca and wool. From the sale price 77% is returned to the producer, 3% is put into an emergency fund and 20% is ploughed back into the organisation and used for training, education, family planning and technical assistance. Asarbolsem also has a fund to provide its members with educational, health and legal support."/>
<partner lat="23.1666667" lng="89.2166667" title="CHARKA Handicrafts" desc="Charka, meaning wheel, is a self-sustaining project of Jagorani Chakra, a large NGO based in Jessore. Charka specialises in fine hand embroidery produced by local village women. Jagorani Chakra first developed training programmes in the early 1990s and later opened a small shop to market its products.  They soon developed a reputation for the highest quality. Charka is constantly training more women and increasing the size of its product range. All the materials used are eco-friendly.  Through its on-going training programmes Charka hopes that these skills will be preserved and handed down to future generations, both perpetuating the art and providing income for the families. As the women work either individually or in groups, they are able to earn whilst meeting their daily responsibilities in and around the home."/>
<partner lat="-9.189967" lng="-75.015152" title="CIAP(Central Interregional de Artesanos del Perú)" desc="CIAP works with 2,000 producers from different parts of Peru. 80% of its members are women. For CIAP, culture is fundamental. 'When people are buying our products, they are sharing our past, our present and our future… We want to share our history, our hopes' says Julia Castro of CIAP. CIAP produces a wide range of products: knitwear and weaving in alpaca and cotton, ceramics, jewellery, embroidery, patchwork quilts and many more of the fine traditional crafts from Peru.  CIAP offers training and marketing advice to its members.  It has just developed an alternative tourism programme and also runs a savings/credit co-operative for CIAP members."/>
<partner lat="23.7671123" lng="90.3561705" title="Ecota Fairtrade Forum- WTFO Member" desc="Ecota Fairtrade Forum is an organisation that networks and coordinates between producers belonging to small- and medium-sized fair trade enterprises.  These are all involved in helping to develop the craftwork sector.  Ecota helps artisans to develop their products and to raise their income levels so as to alleviate poverty in Bangladesh.  It is keen to promote fair and ethical trading relationships that benefit its member organisations.  All in all, it has 31 affiliates that involve nearly a million craftsmen."/>
<partner lat="23.684994" lng="90.356331" title="DEW (Development Wheel)" desc="Development Wheel (DEW) is a Bangladeshi non-government voluntary development organisation.  It seeks to provide an institutional framework to help fight poverty.  It enhances the technical and business skills in both rural and urban areas among people who are basically self-employed.  DEW works primarily with women’s groups, both in the craft sector and in agriculture.  It has around 900 women members and their families in and around Jamalpur, Jessore, Manikgonj and Dhaka."/>
</partners>
Edited by rinjin07 because: n/a
Member Avatar for Troy III

thanks guyssss, but i dont even get an alert or anything. still just showing nothing on the page, no map, no anything, no matter what i do except for the hard coded version :<

Hello

You need to debug this step first:

var oReq = getXMLHttpRequest();
var xmlDoc;

function getXMLHttpRequest(){
        return new window.XMLHttpRequest;
	}

function handleRequest(){
	    if( oReq.readyState == 4 ){
	        if( oReq.status == 200 ){
	xmlDoc = oReq.responseXML;
	procesXMLData() 
		}
	    }
	}
	
if (oReq != null) {
	    oReq.open("GET", "partners.xml", true);
	    oReq.onreadystatechange = handleRequest;
	    oReq.send();
}
	
function procesXMLData(){
	var lat, lng, title, desc;
	var lats=[], lngs=[], titles=[], descs=[];
	var partners=xmlDoc.getElementsByTagName("partner");

	alert(partners[0])	
	}

Because If you've only pasted the previous code without inspecting your following declarations - you'd undoubtedly fail. Because the function {procesXMLData} is left open [not finished] for you to work on. If nothing else, it lacks its final closing "}" and will fail to register / cause a javascript error before anything else. As it did.

OK than, first:
Watch if(this shortened code) will give you an alert box, -If it does:

A) But theres nothing useful in its message content (as I sugested earlier) - format your xml doc reference as absolute i.e.: "http://mydomain.com/mycordsfolder/partners.xml" and refresh you page.
If this doesn't solve the problem: please make sure that your "partners.xml" file: 1. Exists; 2. Is in the same folder; 3. Contains Tags of type <partner> (in same case xml sensitive nature).

B)But if there is an object in an alert message, feel confident to continue refining your loop section.

Member Avatar for Troy III

Just drop the filthy XML completely, that was never meant to be and wasn't even supposed to exist. It's a worthless artificial w3c crap that was never meant to be used in practice anyway.


Here, try this:

<!DOCTYPE native>
<html>
<head>
<meta charset="utf-8">
<style>
#disp
	{	font: normal 12pt calibri;
		width: 600px;
		margin: auto;
	}
#map_canvas
	{	
		width: 600px;
		height: 400px;
		border-radius:5px;
		border: gray 4px double;
	}
#desc	
	{	
		text-align:justify;
	}
</style>
<script id=DSO src="partners.txt"></script>
<script id=API src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script>
function openMap() {
	var myLatlng = new google.maps.LatLng(partners[0].lat, partners[0].lng);
	var myOptions = {
		zoom: 8,
		center: myLatlng,
		mapTypeId: google.maps.MapTypeId.ROADMAP
		}
	var map = new google.maps.Map(map_canvas, myOptions);
	
	title.innerHTML = partners[0].title;
	desc.innerHTML = partners[0].desc;
	}
	onload=openMap;
</script>

</head>
<body>
<div id=disp>
	<h1 id=title> </h1>
	<div id=map_canvas> </div>
<br>
	<div id=desc> </div>
</div>
</body>
</html>

and here is your brand new js-DSO

{partners=[
	{
		lat:"23.709921", 
		lng:"90.407143", 
		title:"ARANYA (Bangladesh)- WTFO Member", 
		desc:"ARANYA is a craft research and development organization which has been working with the revival and promotion of the fine craft traditions of Bangladesh for more than two decades. As a fair trade micro-enterprise, ARANYA's partnership with craftspeople guarantees fair wages and ensures that they are not exploited or undervalued. ARANYA has revived the use of natural dyes in Bangladesh and has trained hundreds of artisans in dyeing and printing techniques. It works in hand-woven, embroidered and block printed handloom silk and organic cotton fabrics. It has developed and worked with the Jamdani Nakshi Kantha techniques, unique to Bangladesh."
		},
	{
		lat:"-16.5026527",
		lng:"-68.1622267",
		title:"ASARBOLSEM (BOLIVIA)- WFTO Member",
		desc:"Asociación Artesanal Boliviana Señor de Mayo is a co-operative working in Bolivia since 1989. It has more than 390 members, spread our throughout Bolivia. Of the members, 98% are women and disabled people. Señor de Mayo specialises in producing handmade textiles, knitted jumpers, scarves, hats, and gloves of alpaca and wool. From the sale price 77% is returned to the producer, 3% is put into an emergency fund and 20% is ploughed back into the organisation and used for training, education, family planning and technical assistance. Asarbolsem also has a fund to provide its members with educational, health and legal support."
		},
	{
		lat:"23.1666667",
		lng:"89.2166667",
		title:"CHARKA Handicrafts",
		desc:"Charka, meaning wheel, is a self-sustaining project of Jagorani Chakra, a large NGO based in Jessore. Charka specialises in fine hand embroidery produced by local village women. Jagorani Chakra first developed training programmes in the early 1990s and later opened a small shop to market its products.  They soon developed a reputation for the highest quality. Charka is constantly training more women and increasing the size of its product range. All the materials used are eco-friendly.  Through its on-going training programmes Charka hopes that these skills will be preserved and handed down to future generations, both perpetuating the art and providing income for the families. As the women work either individually or in groups, they are able to earn whilst meeting their daily responsibilities in and around the home."
		},
	{
		lat:"-9.189967",
		lng:"-75.015152",
		title:"CIAP(Central Interregional de Artesanos del Perú)",
		desc:"CIAP works with 2,000 producers from different parts of Peru. 80% of its members are women. For CIAP, culture is fundamental. 'When people are buying our products, they are sharing our past, our present and our future… We want to share our history, our hopes' says Julia Castro of CIAP. CIAP produces a wide range of products: knitwear and weaving in alpaca and cotton, ceramics, jewellery, embroidery, patchwork quilts and many more of the fine traditional crafts from Peru.  CIAP offers training and marketing advice to its members.  It has just developed an alternative tourism programme and also runs a savings/credit co-operative for CIAP members."
		},
	{
		lat:"23.7671123",
		lng:"90.3561705",
		title:"Ecota Fairtrade Forum- WTFO Member",
		desc:"Ecota Fairtrade Forum is an organisation that networks and coordinates between producers belonging to small- and medium-sized fair trade enterprises.  These are all involved in helping to develop the craftwork sector.  Ecota helps artisans to develop their products and to raise their income levels so as to alleviate poverty in Bangladesh.  It is keen to promote fair and ethical trading relationships that benefit its member organisations.  All in all, it has 31 affiliates that involve nearly a million craftsmen."
		},
	{
		lat:"23.684994",
		lng:"90.356331",
		title:"DEW (Development Wheel)",
		desc:"Development Wheel (DEW) is a Bangladeshi non-government voluntary development organisation.  It seeks to provide an institutional framework to help fight poverty.  It enhances the technical and business skills in both rural and urban areas among people who are basically self-employed.  DEW works primarily with women’s groups, both in the craft sector and in agriculture.  It has around 900 women members and their families in and around Jamalpur, Jessore, Manikgonj and Dhaka."
		}
	]
}

Name it "partners.txt"; save it in UTF-8 in any case to avoid server complications do the same with html, it is set as utf anyway.

Member Avatar for Troy III

rinjin here is your simple navigable version.

<!DOCTYPE native>
<html>
<head>
<style>
#map_canvas{width:720px;height:480px;}
</style>
<script id=DSO src="partners.txt"></script>
<script id=API src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script>
n=-1;
function openMap() {
   n<5?n+=1:n=0
	var myLatlng = new google.maps.LatLng(partners[n].lat, partners[n].lng);
	var marker = new google.maps.Marker({position:myLatlng, title:partners[n].title}); 
	var myOptions = {zoom:8, center:myLatlng, mapTypeId:google.maps.MapTypeId.TERRAIN};
	var map = new google.maps.Map(map_canvas, myOptions);
	marker.setMap(map);
	title.innerHTML = partners[n].title;
	desc.innerHTML = partners[n].desc;
	goNext.onclick = openMap;
	}
	onload = openMap;
</script>
</head>
<body>
<div id=disp>
	<h1 id=title> </h1>
	<div id=map_canvas> </div>
	<p id=goNext><a href='javascript:void 0'>go next</a></p>
	<div id=desc> </div>
</div>
</body>
</html>

And no don't use the bloody UTF it doesn't support all characters (used) - leave it as is, let the browser detect encoding, it does a better job than me. This revision uses markers also...

Have fun
Troy III p.a.e.

Member Avatar for Airshow

Meanwhile, I have something completely different in mind but I won't post it because Troy's approach will certainly do the job if departure from (evil) XML is ok.

Airshow

Member Avatar for Troy III

Well... :')
-There's no such thing as evil Language i.e.,[any communications protocol], the thing with xml and other web filth, is that they are practically unusable.
xhml is dead, thank goodness - long live HTML.

But anyway feel free to post it, I like your coding manner.

p.s: have you tried the last revision? Only tested on IE9 and Fx5 but I'm sure it will work full range, way back to IE4.01.

Regards.

Member Avatar for rinjin07

the xml i sent is only exemplary, have over 30 instances of partners i need to add in :<

Member Avatar for Troy III

well that's what you get for using xml.
converting it all into a js-DSO [javascript data source objrct] on some rich text editor is a breeze.

You take a sample of mine compare it with your xml: find the diferences an use find / replace than copy-paste it all in a plain text document . And yes nowdays its called a JSON.

You could use some XML to JSON converter but youre out of luck -your xml is mallformed according to dreaconian error handling of you data formulation on the xml parser I gues.

-but here are two possible automatic conversions made online:

{"partners":{"partner":[{"@attributes":{"lat":"23.709921","lng":"90.407143","title":"ARANYA (Bangladesh)- WTFO Member","desc":"ARANYA is a craft research and development organization which has been working with the revival and promotion of the fine craft traditions of Bangladesh for more than two decades. As a fair trade micro-enterprise, ARANYA's partnership with craftspeople guarantees fair wages and ensures that they are not exploited or undervalued. ARANYA has revived the use of natural dyes in Bangladesh and has trained hundreds of artisans in dyeing and printing techniques. It works in hand-woven, embroidered and block printed handloom silk and organic cotton fabrics. It has developed and worked with the Jamdani Nakshi Kantha techniques, unique to Bangladesh."}},{"@attributes":{"lat":"-16.5026527","lng":"-68.1622267","title":"ASARBOLSEM (BOLIVIA)- WFTO Member","desc":"Asociaci\u00f3n Artesanal Boliviana Se\u00f1or de Mayo is a co-operative working in Bolivia since 1989. It has more than 390 members, spread our throughout Bolivia. Of the members, 98% are women and disabled people. Se\u00f1or de Mayo specialises in producing handmade textiles, knitted jumpers, scarves, hats, and gloves of alpaca and wool. From the sale price 77% is returned to the producer, 3% is put into an emergency fund and 20% is ploughed back into the organisation and used for training, education, family planning and technical assistance. Asarbolsem also has a fund to provide its members with educational, health and legal support."}},{"@attributes":{"lat":"23.1666667","lng":"89.2166667","title":"CHARKA Handicrafts","desc":"Charka, meaning wheel, is a self-sustaining project of Jagorani Chakra, a large NGO based in Jessore. Charka specialises in fine hand embroidery produced by local village women. Jagorani Chakra first developed training programmes in the early 1990s and later opened a small shop to market its products.  They soon developed a reputation for the highest quality. Charka is constantly training more women and increasing the size of its product range. All the materials used are eco-friendly.  Through its on-going training programmes Charka hopes that these skills will be preserved and handed down to future generations, both perpetuating the art and providing income for the families. As the women work either individually or in groups, they are able to earn whilst meeting their daily responsibilities in and around the home."}},{"@attributes":{"lat":"-9.189967","lng":"-75.015152","title":"CIAP(Central Interregional de Artesanos del Per\u00fa)","desc":"CIAP works with 2,000 producers from different parts of Peru. 80% of its members are women. For CIAP, culture is fundamental. 'When people are buying our products, they are sharing our past, our present and our future\u2026 We want to share our history, our hopes' says Julia Castro of CIAP. CIAP produces a wide range of products: knitwear and weaving in alpaca and cotton, ceramics, jewellery, embroidery, patchwork quilts and many more of the fine traditional crafts from Peru.  CIAP offers training and marketing advice to its members.  It has just developed an alternative tourism programme and also runs a savings\/credit co-operative for CIAP members."}},{"@attributes":{"lat":"23.7671123","lng":"90.3561705","title":"Ecota Fairtrade Forum- WTFO Member","desc":"Ecota Fairtrade Forum is an organisation that networks and coordinates between producers belonging to small- and medium-sized fair trade enterprises.  These are all involved in helping to develop the craftwork sector.  Ecota helps artisans to develop their products and to raise their income levels so as to alleviate poverty in Bangladesh.  It is keen to promote fair and ethical trading relationships that benefit its member organisations.  All in all, it has 31 affiliates that involve nearly a million craftsmen."}},{"@attributes":{"lat":"23.684994","lng":"90.356331","title":"DEW (Development Wheel)","desc":"Development Wheel (DEW) is a Bangladeshi non-government voluntary development organisation.  It seeks to provide an institutional framework to help fight poverty.  It enhances the technical and business skills in both rural and urban areas among people who are basically self-employed.  DEW works primarily with women\u2019s groups, both in the craft sector and in agriculture.  It has around 900 women members and their families in and around Jamalpur, Jessore, Manikgonj and Dhaka."}}]}}

converted at: http://extjs.org.cn/xml2json/xml2json_online.php

{
  "partners": {
    "partner": [
      {
        "-title": "ARANYA (Bangladesh)- WTFO Member",
        "-desc": "ARANYA is a craft research and development organization which has been working with the revival and promotion of the fine craft traditions of Bangladesh for more than two decades. As a fair trade micro-enterprise, ARANYA's partnership with craftspeople guarantees fair wages and ensures that they are not exploited or undervalued. ARANYA has revived the use of natural dyes in Bangladesh and has trained hundreds of artisans in dyeing and printing techniques. It works in hand-woven, embroidered and block printed handloom silk and organic cotton fabrics. It has developed and worked with the Jamdani Nakshi Kantha techniques, unique to Bangladesh.",
        "-lng": "90.407143",
        "-lat": "23.709921"
      },
      {
        "-title": "ASARBOLSEM (BOLIVIA)- WFTO Member",
        "-desc": "Asociación Artesanal Boliviana Señor de Mayo is a co-operative working in Bolivia since 1989. It has more than 390 members, spread our throughout Bolivia. Of the members, 98% are women and disabled people. Señor de Mayo specialises in producing handmade textiles, knitted jumpers, scarves, hats, and gloves of alpaca and wool. From the sale price 77% is returned to the producer, 3% is put into an emergency fund and 20% is ploughed back into the organisation and used for training, education, family planning and technical assistance. Asarbolsem also has a fund to provide its members with educational, health and legal support.",
        "-lng": "-68.1622267",
        "-lat": "-16.5026527"
      },
      {
        "-title": "CHARKA Handicrafts",
        "-desc": "Charka, meaning wheel, is a self-sustaining project of Jagorani Chakra, a large NGO based in Jessore. Charka specialises in fine hand embroidery produced by local village women. Jagorani Chakra first developed training programmes in the early 1990s and later opened a small shop to market its products.  They soon developed a reputation for the highest quality. Charka is constantly training more women and increasing the size of its product range. All the materials used are eco-friendly.  Through its on-going training programmes Charka hopes that these skills will be preserved and handed down to future generations, both perpetuating the art and providing income for the families. As the women work either individually or in groups, they are able to earn whilst meeting their daily responsibilities in and around the home.",
        "-lng": "89.2166667",
        "-lat": "23.1666667"
      },
      {
        "-title": "CIAP(Central Interregional de Artesanos del Perú)",
        "-desc": "CIAP works with 2,000 producers from different parts of Peru. 80% of its members are women. For CIAP, culture is fundamental. 'When people are buying our products, they are sharing our past, our present and our future… We want to share our history, our hopes' says Julia Castro of CIAP. CIAP produces a wide range of products: knitwear and weaving in alpaca and cotton, ceramics, jewellery, embroidery, patchwork quilts and many more of the fine traditional crafts from Peru.  CIAP offers training and marketing advice to its members.  It has just developed an alternative tourism programme and also runs a savings/credit co-operative for CIAP members.",
        "-lng": "-75.015152",
        "-lat": "-9.189967"
      },
      {
        "-title": "Ecota Fairtrade Forum- WTFO Member",
        "-desc": "Ecota Fairtrade Forum is an organisation that networks and coordinates between producers belonging to small- and medium-sized fair trade enterprises.  These are all involved in helping to develop the craftwork sector.  Ecota helps artisans to develop their products and to raise their income levels so as to alleviate poverty in Bangladesh.  It is keen to promote fair and ethical trading relationships that benefit its member organisations.  All in all, it has 31 affiliates that involve nearly a million craftsmen.",
        "-lng": "90.3561705",
        "-lat": "23.7671123"
      },
      {
        "-title": "DEW (Development Wheel)",
        "-desc": "Development Wheel (DEW) is a Bangladeshi non-government voluntary development organisation.  It seeks to provide an institutional framework to help fight poverty.  It enhances the technical and business skills in both rural and urban areas among people who are basically self-employed.  DEW works primarily with women’s groups, both in the craft sector and in agriculture.  It has around 900 women members and their families in and around Jamalpur, Jessore, Manikgonj and Dhaka.",
        "-lng": "90.356331",
        "-lat": "23.684994"
      }
    ]
  }
}

converted at; http://jsontoxml.utilities-online.info/

they aim to make them back and fourth convertible, while my code isnt because there's no need for persons person redoundance...
So choose your poison than :)

Member Avatar for Airshow

Troy,

p.s: have you tried the last revision? Only tested on IE9 and Fx5 but I'm sure it will work full range, way back to IE4.01.

Both versions work fine here in Opera 11.50 under Win7.

Your code is so concise, I'm almost afraid to post my monster, though it does contain a little extra functionality (clickable markers and an infoWindow) and you can switch between external and hard-coded data for dev/testing.

I won't post it yet because it will give Rinjin a headache from too many choices.

Airshows

Edited by Airshow because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.