rinjin07 - haven't decided yet?!!
Troy III 272 Posting Pro
rinjin07 0 Newbie Poster
Nooo, about to give up. have only had like 8 lessons in computing stuff :< this is way too much for me i guess
rinjin07 - haven't decided yet?!!
Airshow 416 WiFi Lounge Lizard Team Colleague
Rinjin,
The problem you set yourself is certainly ambitious for a first project but no need to give up yet.
If you want to try my approach, then see below. As I said, it's not as concise as Troy's but has the enormous advantage of using XML (that's an intentional wind-up for Troy).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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>
<style type="text/css">
h1.infoWindow {
margin: 0;
font-size: 11pt;
font-family: verdana,arial;
}
#map_canvas {
width: 600px;
height: 400px;
border: 1px solid #000;
}
#description {
width: 600px;
font-size: 10pt;
font-family: verdana,arial;
text-align:justify;
}
</style>
<meta name="unicode to HTML entity converter" value="http://konieczny.be/unicode.html">
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript">
//General purpose ajax utility
function ajaxRequest(url, successFn, failFn) {
var xhr = null;
try { xhr = new XMLHttpRequest(); }// code for IE7+, Firefox, Chrome, Opera, Safari
catch(e) {
try { xhr = new ActiveXObject("Microsoft.XMLHTTP"); }// code for IE6, IE5
catch(e) { return false; }
}
xhr.onreadystatechange = function() {
try {
if (xhr.readyState==4) {
if (xhr.status==200 || xhr.status==0) {
successFn(xhr.responseXML);
}
else if(failFn) failFn(xhr.status);
}
}
catch(e) { if(failFn) failFn(e.message); }
}
xhr.open("GET", url, true);
xhr.send();
return xhr;
}
//Specialised constructor for google.maps.InfoWindow
function InfoWindow(map, callbacks) {//functions in the callbacks object determine external behaviour
var infoWindow = new google.maps.InfoWindow({ content: '' });
google.maps.event.addListener(infoWindow, 'closeclick', callbacks.closeFn);
this.attachToMarker = function(p) {
google.maps.event.addListener(p.marker, 'click', function() {
infoWindow.setContent(callbacks.formatterFn(p));
infoWindow.open(map, this);
callbacks.openFn(p);
});
};
}
//Specialised constructor for google.maps.Map
function Map(canvas, point, zoom, template, msgContainer, type) {
//validate formal variables.
if(!canvas && canvas.getElementById) { return false; }
zoom = (typeof zoom == 'undefined') ? 9 : zoom;
type = (typeof type == 'undefined') ? 'ROADMAP' : type;
//variables and callback functions for infowindow
var infoWindowOpen = function(p) {//callback for infoWindow
if(msgContainer) { msgContainer.innerHTML = p.desc || ''; }//action on infoWindow open
};
var infoWindowClose = function() {//callback for infoWindow
if(msgContainer) { msgContainer.innerHTML = ''; }//action on infoWindow close
};
var formatter = function(p) {
return template.replace('%s0', p.title);
};
var callbacks = {formatterFn:formatter, openFn:infoWindowOpen, closeFn:infoWindowClose};
//create google maps objects
var options = {
zoom: zoom,
center: new google.maps.LatLng(point.lat, point.lng),
mapTypeId: google.maps.MapTypeId[type]
};
var map = new google.maps.Map(canvas, options);
var infoWindow = new InfoWindow(map, callbacks);//Make single InfoWindow, opened by all markers.
//public methods
this.addMarkers = function(points) {
for (i=0; i<points.length; i++) {
if(points[i].lat && points[i].lng) {
latlng = new google.maps.LatLng(Number(points[i].lat), Number(points[i].lng));
points[i].marker = new google.maps.Marker({position:latlng, map:map, title:points[i].title});
infoWindow.attachToMarker(points[i]);
}
}
};
}
onload = function() {
var canvas = document.getElementById("map_canvas");
var msgContainer = document.getElementById("description");
var template = '<h1 class="infoWindow">%s0<h1>';//template for infoWindow text
// ***************** Hard-coded data for dev/testing *****************
//var x = 51.50, y = -0.15;//London
y = 23.709921, x = 90.407143;//Dhaka
var dy = 0.02, dx = 0.01;
var hardCodedData = [
{lat:y, lng:x, title:'point_0', desc:'desc_0', marker:null},
{lat:y-dx, lng:x-dy, title:'point_1', desc:'desc_1', marker:null},
{lat:y-dx, lng:x+dy, title:'point_2', desc:'desc_2', marker:null},
{lat:y+dx, lng:x-dy, title:'point_3', desc:'desc_3', marker:null},
{lat:y+dx, lng:x+dy, title:'point_4', desc:'desc_4', marker:null}
];
// *******************************************************************
var useHardCodedData = 0;//0:xml data; 1:hard-coded data
if (canvas) {
if(useHardCodedData) {
var map = new Map(canvas, hardCodedData[0], 13, template, msgContainer);
map.addMarkers(hardCodedData);
}
else {
ajaxRequest('partners.xml', function(xmlDoc){
var xmlPartners = xmlDoc.getElementsByTagName("partner");
var partners = [], p;
for(var i=0; i<xmlPartners.length; i++) {
p = xmlPartners[i];
partners.push({
lat: p.getAttribute("lat"),
lng: p.getAttribute("lng"),
title: p.getAttribute("title"),
desc: p.getAttribute("desc"),
marker: null//markers are added later
});
}
var map = new Map(canvas, partners[0], 1, template, msgContainer);
map.addMarkers(partners);
}, function(msg) {
alert("Failed to get xml file\n" + msg);
});
}
}
}
</script>
</head>
<body>
<div id="map_canvas"></div>
<div id="description"></div>
</body>
</html>As posted, the code will look for the xml file partners.xml, my version of which is as follows:
<?xml version="1.0" encoding="utf-8" ?>
<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>Airshow
Troy III 272 Posting Pro
As I said, it's not as concise as Troy's but has the enormous advantage of using XML (that's an intentional wind-up for Troy).
Care to explain the word "enormous" in this regard?
Airshow 416 WiFi Lounge Lizard Team Colleague
Troy, I would only dig myself into a deeper hole.
Airshow
rinjin07 0 Newbie Poster
Airshow, you have been awesome. That last bit did the trick and I really can't thank you enough for all your advice and help :) Thanks to everyone else for the alternate options as well. Seriously appreciate it :)
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.