I'm trying to pull coordinate from an oracle database, convert the data to xml and then display the lat long as markers on a google map. The server side language I'm using is perl. So far I've managed to get the data out of the database and convert it to xml. This is the code, although it a little clumsy at the moment:
#!/usr/bin/perl
use strict;
use DBI;
use CGI qw(:standard);
use CGI::Carp qw(fatalsToBrowser);
print "Content-Type: text/xml\n\n";
#connect to database
my $dbh = DBI->connect ('DBI:Oracle:geosgen','username','password',{ RaiseError => 1 })
|| die "Database connection not made: $DBI::errstr";
my $sth = $dbh->prepare ("SELECT * from markers");
$sth->execute;
print "<?xml version=\"1.0\"?>\n";
print "<dataset>\n";
while (my ($id, $name, $address, $lat, $lng) = $sth->fetchrow_array ())
{
print " <row>\n";
print " <id>$id</id>\n";
print " <name>$name</name>\n";
print " <address>$address</address>\n";
print " <lat>$lat</lat>\n";
print " <lng>$lng</lng>\n";
print " </row>\n";
}
$dbh->disconnect ();
print "</dataset>\n";
The problem I'm having is getting the xml output to create markers for the map. Here's the google maps initialise within the html:
<script>
function initialise() {
myLatlng = new google.maps.LatLng(54.559323,-3.321304); // Add the coordinates
mapOptions = {
zoom: 5, // The initial zoom level when your map loads (0-20)
center: myLatlng, // Centre the Map to our coordinates variable
mapTypeId: google.maps.MapTypeId.ROADMAP, // Set the type of Map
}
geocoder = new google.maps.Geocoder();
infoWindow = new google.maps.InfoWindow;
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
// Render our map within the empty div
xmlUrl = "cgi-bin/flight_map.pl";
loadMarkers();
}
google.maps.event.addDomListener(window, 'load', initialise); // Execute our 'initialise' function once the page has loaded.
</script>
And in a seperate file some other javascript:
//
// Google Maps functions
//
// Google Maps vars
var myLatlng; // Add the coordinates
var mapOptions = {}
var geocoder;
var map;
var defaultZoom = 10;
var image;
var xmlUrl;
var infoWindow;
var markers;
var contactUrl;
function downloadUrl(url,callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
//request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function loadMarkers() {
map.markers = map.markers || []
downloadUrl(xmlUrl, function(data) {
var xml = data.responseXML;
markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var id = markers[i].getAttribute("id");
var name = markers[i].getAttribute('name');
var address = markers[i].getAttribute("address");
var image = {
url: marker_image,
size: new google.maps.Size(71, 132),
origin: new google.maps.Point(0, 0),
scaledSize: new google.maps.Size(71, 132)
};
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<div class='infowindow'><b>" + name + "</b> <br/>" + address+'<br/></div>';
var marker = new google.maps.Marker({
map: map,
position: point,
icon: image,
title: name
});
map.markers.push(marker);
bindInfoWindow(marker, map, infoWindow, html);
}
});
}
Sorry if this is rather long and convoluted but I'm completely stuck on this so any help would be much appreciated. Most of what I've done is based on this google maps tutorial:
No comments:
Post a Comment