Develop Reference

cannot parse a url from xml file in javascript

I'm trying to parse an xml file . I'm using the function downloadUrl . The element <link> of my xml file contains a url with ' & ' ( ampersant character ) . The error in my browser says : " Cannot read property 'documentElement' of null " I replace the & with & in a sample file-similar to my xml and the parse runs great!One important information : I cannot edit my xml file .
So , the solution is to insert at the javascript code a function to replace this character & with & .Something like that i imagine:
function htmlEscape(items) {
return String(items)
.replace(/&/g, '&');
}
But i cannot find the way on how to do that.
Here's is my script :
var infowindow;
var map;
function initialize() {
var myLatlng = new google.maps.LatLng(38.822590,24.653320);
var myOptions = {
zoom: 6,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
downloadUrl("moredata.xml", function(doc) {
var items = doc.documentElement.getElementsByTagName("item");
for (var i = 0; i < items.length; i++) {
var description = items[i].getElementsByTagName("description")[0].textContent;
var temp = items[i].getElementsByTagName("temp")[0].textContent;
var title = items[i].getElementsByTagName("title")[0].textContent;
var link = items[i].getElementsByTagName("link")[0].textContent;
var latlng = new google.maps.LatLng(parseFloat(items[i].getElementsByTagName("glat")[0].textContent),
parseFloat(items[i].getElementsByTagName("glon")[0].textContent));
a part of my xml :
<channel>
<title>
Real time weather in Greece
</title>
<link>http://www.123.gr/</link>
<image>
<url>
http://www.123.gr/templates/metar/images/metar.gif
</url>
<title>123.gr</title>
<link>http://www.123.gr/</link>
</image>
<description>
Real time weather in Greece
</description>
<language>el</language>
<pubDate>Thu, 03 Apr 2014 17:08:10 +0300</pubDate>
<copyright>123.gr</copyright>
<managingEditor>kondilis#123.gr</managingEditor>
<webMaster>admin#123.gr</webMaster>
<item>
<title>Center</title>
<description>Salonica</description>
<link>
http://www.metar.gr/index.php?option=com_jumi&fileid=12&Itemid=73&station=1227
</link>
<temp>16.7 °C</temp>
<glat>40.422726139672626</glat>
<glon>22.93392777442932</glon>
</item>
</channel>
the downloadUrl function :
function downloadUrl(url, callback) {
var status = -1;
var request = createXmlHttpRequest();
if (!request) {
return false;
}
request.onreadystatechange = function() {
if (request.readyState == 4) {
try {
status = request.status;
} catch (e) {
// Usually indicates request timed out in FF.
}
if (status == 200) {
callback(request.responseXML, request.status);
request.onreadystatechange = function() {};
}
}
}
request.open('GET', url, true);
try {
request.send(null);
} catch (e) {
changeStatus(e);
}
};

The problem is that responseXML is broken because of an invalid XML document, it's not just an invalid string. You will probably have to retrieve the responseText, replace the ampersands with properly encoded entities and then do something like the solutions to this SO question to make that string into a traversable XML document

Refresh google map markers from mysql

I can pull this information from my MySQL table and display what I need to but I would like some help on how to refresh this data every 5 seconds or so with the current code that I have.
There isn't much data to show, just like 5 or 8 markers at any given time. I have included my current code that I use to pull the data. I am sort of OK with PHP/MySQL but very new to Google Maps.
<script type='text/javascript'>
//This javascript will load when the page loads.
jQuery(document).ready( function($){
//Initialize the Google Maps
var geocoder;
var map;
var markersArray = [];
var infos = [];
geocoder = new google.maps.Geocoder();
var myOptions = {
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
//Load the Map into the map_canvas div
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
//Initialize a variable that the auto-size the map to whatever you are plotting
var bounds = new google.maps.LatLngBounds();
//Initialize the encoded string
var encodedString;
//Initialize the array that will hold the contents of the split string
var stringArray = [];
//Get the value of the encoded string from the hidden input
encodedString = document.getElementById("encodedString").value;
//Split the encoded string into an array the separates each location
stringArray = encodedString.split("****");
var x;
for (x = 0; x < stringArray.length; x = x + 1)
{
var addressDetails = [];
var marker;
//Separate each field
addressDetails = stringArray[x].split("&&&");
//Load the lat, long data
var lat = new google.maps.LatLng(addressDetails[1], addressDetails[2]);
var image = new google.maps.MarkerImage(addressDetails[3]);
//Create a new marker and info window
var marker = new google.maps.Marker({
map: map,
icon: image,
position: lat,
content: addressDetails[0]
});
//Pushing the markers into an array so that it's easier to manage them
markersArray.push(marker);
google.maps.event.addListener( marker, 'click', function () {
closeInfos();
var info = new google.maps.InfoWindow({content: this.content});
//On click the map will load the info window
info.open(map,this);
infos[0]=info;
});
//Extends the boundaries of the map to include this new location
bounds.extend(lat);
}
//Takes all the lat, longs in the bounds variable and autosizes the map
map.fitBounds(bounds);
//Manages the info windows
function closeInfos(){
if(infos.length > 0){
infos[0].set("marker",null);
infos[0].close();
infos.length = 0;
}
}
});
</script>
</head>
<body>
<div id='input'>
<?php
//Initialize your first couple variables
$encodedString = ""; //This is the string that will hold all your location data
$x = 0; //This is a trigger to keep the string tidy
//Now we do a simple query to the database
// DB INFO CONNECTION IS HERE AND WORKS
$result = mysql_query("SELECT * FROM `ulocation` WHERE `ul_lat`!='' AND `ul_long`!='' AND `ul_onduty`='1'",$db1);
//Multiple rows are returned
while ($row = mysql_fetch_array($result, MYSQL_NUM))
{
//This is to keep an empty first or last line from forming, when the string is split
if ( $x == 0 )
{
$separator = "";
}
else
{
//Each row in the database is separated in the string by four *'s
$separator = "****";
}
$status='0';
$cadd = sql::getval('cal_address', 'call', "WHERE `cal_id`='$row[14]'");
$num = sql::getval('cal_num', 'call', "WHERE `cal_id`='$row[14]'");
$pcond = sql::getval('cal_pcond', 'call', "WHERE `cal_id`='$row[14]'");
$list="$num $cadd";
//Saving to the String, each variable is separated by three &'s
$encodedString = $encodedString.$separator.
"<table border=0 width='350' height='20' class='maincolm' cellpadding=0 cellspacing=0><td align=left valign=top><h2></h2></td><tr><td width=100%><font size=3 face=arial><p><b>".$row[2].
"</b>".
"<br>Address: $list".
"<br>Call Type: $pcond".
"<br><br>Lat: ".$row[5].
"<br>Long: ".$row[6].
"</td></table>".
"</p>&&&".$row[5]."&&&".$row[6]."&&&".$row[8]."&&&".$row[14];
$x = $x + 1;
}
?>
<input type="hidden" id="encodedString" name="encodedString" value="<?php echo $encodedString; ?>" />
<? echo "<body oncontextmenu=\"return false\" style=\"overflow: hidden; \" topmargin=0 leftmargin=0 rightmargin=0 bottommargin=0>";
<div id=\"map_canvas\"></div>
</body>
</html>";
?>

setInterval(function() {
$.ajax({ url: '/my/site',
data: {action: 'test'},
type: 'post',
success: function(output) {
// change the DOM with your new output info
}
});
}, 300000);
This will run an ajax call to any page you want, with any post data you want every 5 minutes.
FOR MORE CLARITY:
Let's say we have a PHP page called refreshComments.php that does this:
$result = mysql_query("SELECT * FROM `comments` WHERE `articleId` = $_POST['articleId']");
while($data = mysql_fetch_array($result)) {
$output[] = $data;
}
echo json_encode($output);
What this is doing is doing that simple query, and printing it out in a JSON object
In our Javascript, we have a page called scripts.js that does this:
setInterval(function() {
$.ajax({ url: 'refreshComments.php',
data: {articleId: '2'},
type: 'post',
success: function(output) {
// dynamically append new comments
console.log(output); // this just logs is
}
});
}, 300000);
What is this JS file doing? On an interval of 300000 milliseconds (or 5 minutes), it sends an ajax request to refreshComments.php. refreshComments.php responds with a JSON of our new data, and in the success() function, we use that new data.

Google Map javascript MarkerManager markers not showing

I have a map that reads an XML file; it's all very simple and copied from here:
http://geochalkboard.wordpress.com/2009/03/30/reading-xml-files-with-the-google-maps-api/
My version is here:
http://www.cloudfund.me/maps/mashup.html and the data file it's reading is here:
converted.xml in the same directory.
I don't get any points at all, when I run it. I put some console logging in to see if I could see anything, but as far as that's concerned, it just runs through without a hitch. The file loads ok, and I can watch the code loop through all the rows (208 in this example) without any problems.
The only warning I'm getting is the 'Resource interpreted as other passed as undefined' one; having had a look at some of the other threads, I can't see anything that helps - no empty src links, etc. As far as I can tell, this shouldn't stop it marking the points, either.
Here's the real kicker - in trying to trace this error, I set up an exact replica of the original code on my own server, and got an error about null fields, which I added some conditional code to to sort; this version works on my server. This is austin.html in the same directory (sorry, can't do more than two links in my first posts!)
So - my code is this:
<title>Test </title>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=AIzaSyDgybFoyn3i5j_6d7ul7p2dPNQ5b1xOWnk"
type="text/javascript">console.log("Loaded Maps API");</script>
<script src="http://gmaps-utility-library.googlecode.com/svn/trunk/markermanager/release/src/markermanager.js">console.log("MarkerManager");</script>
<script type="text/javascript">
console.log("Into Main Script");
function initialize() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(51.39906378, -2.449545605), 13);
map.setUIToDefault();
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.addMapType(G_PHYSICAL_MAP);
map.setMapType(G_PHYSICAL_MAP);
console.log("Reached end of map initialising");
addMarkersFromXML();
console.log("MarkersfromXML")
}
}
function addMarkersFromXML(){
var batch = [];
mgr = new MarkerManager(map);
var request = GXmlHttp.create();
console.log("About to open converted.xml")
request.open('GET', 'converted.xml', true);
console.log("Opened Converted.xml")
request.onreadystatechange = function() {
if (request.readyState == 4 && request.status == 200)
{
var xmlDoc = request.responseXML;
var xmlrows = xmlDoc.documentElement.getElementsByTagName("row");
for (var i = 0; i < xmlrows.length; i++) {
var xmlrow = xmlrows[i];
console.log("Running through row number",i)
var xmlcellLongitude = xmlrow.getElementsByTagName("longitude")[0];
console.log(xmlcellLongitude);
var xmlcellLatitude = xmlrow.getElementsByTagName("latitude")[0];
var point = new GLatLng(parseFloat(xmlcellLatitude.firstChild.data),parseFloat(xmlcellLongitude.firstChild.data));
//get the PAO
var xmlcellAssetName = xmlrow.getElementsByTagName("pao")[0];
console.log(xmlcellAssetName);
var celltextAssetName = xmlcellAssetName.firstChild.data;
//get the area
var xmlcellArea = xmlrow.getElementsByTagName("area")[0];
console.log(xmlcellArea);
var celltextArea = xmlcellArea.firstChild.data;
//get the land type
var xmlcellLandType = xmlrow.getElementsByTagName("landtype")[0];
console.log(xmlcellLandType);
var celltextLandType = xmlcellLandType.firstChild.data;
//get the Planning Permissions
var xmlcellPlanning = xmlrow.getElementsByTagName("planning")[0];
console.log(xmlcellPlanning);
var celltextPlanning = xmlcellPlanning.firstChild.data;
var htmlString = "Asset Name: " + celltextAssetName + "<br>" + "Size: " + celltextArea + "<br>" + "Land Type: " + celltextLandType + "<br>" + "Planning Permissions: " + celltextPlanning;
//var htmlString = 'yes'
var marker = createMarker(point,htmlString);
batch.push(marker);
}
mgr.addMarkers(batch,50);
mgr.refresh();
}
}
request.send(null);
}
function createMarker(point,html) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 1100px; height: 700px"></div>
</body>
</html>

Think you have a typo. In your code, you're pulling an incomplete URL for the API:
<script src="//maps.google.com/maps?file=api&v=2&sensor=false&key=AIzaSyDgybFoyn3i5j_6d7ul7p2dPNQ5b1xOWnk"
That errant // seems to be throwing the code off.
Though, to be perfectly honest, the originating example (and austin.html) doesn't exactly work as one would imagine it should. The points do get rendered, but no effective clustering takes place when you zoom out. Suspect that the 2.0 branch of the API got moved to a newer version and created a bit of an incompatibility.
Recommend that you rewrite this in API version 3. There is a cluster manager that works for it quite well.
See http://tools.voanews2.com/nuclear_reactors/

Invalid value for property <position>

I'm attempting to combine perl and Javascript to map IP address Lat/Long locations to a Google Map using the Google Maps API v3. What I'm getting back is in the marker, I'm getting the error: Uncaught Error: Invalid value for property <position>: 43.073052,-89.40123
My code is:
#!/usr/bin/perl -w
use CGI qw(:standard);
use CGI::Carp qw/fatalsToBrowser warningsToBrowser/;
use CGI::Session ( '-ip_match');
use SOAP::Lite;
use lib '/home/schreiber/perl5/lib/perl5';
use JSON qw(encode_json);
$session = CGI::Session->load();
$q = new CGI;
my $soap = SOAP::Lite
-> uri('http://v1.fraudlabs.com/')
-> proxy('http://v1.fraudlabs.com/ip2locationwebservice.asmx')
-> on_action(sub { join "/", "http://v1.fraudlabs.com", $_[1] });
$license = "<removed>";
#if($session->is_expired) {
# print $q->header(-cache_control=>"no-cache, no-store, must-revalidate");
# print "Your session has expired. Please login again.";
# print "<br/>Login";
#} elsif($session->is_empty) {
# print $q->header(-cache_control=>"no-cache, no-store, must-revalidate");
# print "You have not logged in";
#} else {
print $q->header(-cache_control=>"no-cache, no-store, must-revalidate");
open (IPF, "/home/access_log");
#incomingarray=<IPF>;
$i = 0;
foreach $pair(#incomingarray) {
($ip, $rest) = split(/ - - /, $pair);
$incomingarray[$i] = $ip;
chomp $ip;
$i++;
}
close (IPF);
my %hash = map { $_, 1 } #incomingarray;
my #distinctIP = keys %hash;
$j = 0;
my #iplocation;
foreach (#distinctIP) {
my $method = SOAP::Data->name('IP2Location')->attr({xmlns =>
'http://v1.fraudlabs.com/' });
my #params = SOAP::Data->name('inputdata' => \SOAP::Data->value(
SOAP::Data->name(IP=>$_),
SOAP::Data->name(LICENSE=>$license)
));
my $result = $soap->call($method => #params);
$lat = $result->valueof('//LATITUDE');
$long = $result->valueof('//LONGITUDE');
push(#iplocation, "$lat,$long");
}
my $json = encode_json(\#iplocation);
# print "Content-Type: text/html\n\n";
print '<html>
<head>
<script type="text/javascript">
function initialize() {
var myOptions = {
zoom: 8,
center: new google.maps.LatLng(44.49, -91.30),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById(\'map_canvas\'),
myOptions);
var coord_data = new Array();
coord_data = '.$json.';
var marker;
for (var i = 1; i < coord_data.length; i++) {
console.log(coord_data[i]);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(coord_data[i]),
map:map
});
marker.setMap(map);
}
}
function loadScript() {
var script = document.createElement(\'script\');
script.type = \'text/javascript\';
script.src = \'//maps.googleapis.com/maps/api/js?sensor=false&callback=initialize\';
document.body.appendChild(script);
}
window.onload = loadScript;
</script>
</head>
<body>
<div id="map_canvas" style="width: 100%; height: 100%"></div>
</body>
</html>
';
#}
Any assistance would be greatly appreciated.

The problem is that when you assign the position here --
marker = new google.maps.Marker({
position:coord_data[i],
map:map
});
-- you give it a raw JSON object, but it's expecting a google.maps.LatLng object. You will want to assign it like this--
position: new google.maps.LatLng(coord_data[i].lon,coord_data[i].lat)
See here also for some good samples of the Gmaps API usage:
https://developers.google.com/maps/documentation/javascript/v2/examples/

How can I fix this JavaScript syntax error?

This is puzzling me. I'm using Google Map's Geocoding to find locations. I am attempting to use the example here, which is from Google, and it is just not working for me.
Error:
http://maps.gstatic.com/intl/en_us/mapfiles/159e/maps2.api/main.js
Line 174
var point = new GLatLng(,);
Code:
<script src="http://maps.google.com/maps?file=api&v=2&key='.$config['locations.gMaps.key'].'" type="text/javascript"></script>
<script src="http://www.google.com/uds/api?file=uds.js&v=1.0&key='.$config['locations.gMaps.key'].'" type="text/javascript"></script>
<script src="http://www.google.com/uds/solutions/localsearch/gmlocalsearch.js" type="text/javascript"></script>
<style type="text/css">
#import url("http://www.google.com/uds/css/gsearch.css");
#import url("http://www.google.com/uds/solutions/localsearch/gmlocalsearch.css");
</style>
<script type="text/javascript">
function addListener(element, baseName, handler) {
if (element.addEventListener)
element.addEventListener(baseName, handler, false);
else if (element.attachEvent)
element.attachEvent("on"+baseName,handler);
}
var map'.$num.';
function initialize'.$num.'()
{
if (GBrowserIsCompatible())
{
map'.$num.' = new GMap2(document.getElementById("google_map'.$num.'"),{mapTypes:[G_HYBRID_MAP]});
var point = new GLatLng('.$row->LocationLat.','.$row->LocationLon.');
map'.$num.'.setCenter(new GLatLng('.$row->LocationLat.','.$row->LocationLon.'),4);
var mapControl = new GMapTypeControl();
map'.$num.'.addControl(mapControl);
map'.$num.'.addControl(new GLargeMapControl());
map'.$num.'.addControl(new GOverviewMapControl());
map'.$num.'.enableDoubleClickZoom();
map'.$num.'.enableScrollWheelZoom();
var bounds = new GLatLngBounds;
var myIcon = new GIcon();
myIcon.image = "http://www.google.com/mapfiles/marker.png";
myIcon.iconAnchor = new GPoint((markerImage1.width/2),markerImage1.height);
bounds.extend(point);
setBounds(map'.$num.',bounds);
var address = "' . $address . '";
var geocoder = new GClientGeocoder();
showAddress(address, geocoder);
}
}
function showAddress(address, geocoder) {
geocoder.getLatLng(
address,
function(point) {
if (!point) {
alert(address + " not found");
} else {
map'.$num.'.setCenter(point, 13);
var marker = new GMarker(point);
map'.$num.'.addOverlay(marker);
marker.openInfoWindowHtml(address);
}
}
);
}
function setBounds(map'.$num.',bounds)
{
map'.$num.'.setZoom(15);
map'.$num.'.setCenter(bounds.getCenter());
}
function chargement()
{
markerImage1 = new Image();
markerImage1.src = "http://www.google.com/mapfiles/marker.png";
setTimeout("initialize'.$num.'()", 500);
}
addListener(window, "load", chargement);
</script>
My code is generated by PHP, so when there is an ' that means I'm opening or closing the string that is holding the JavaScript.

Maybe I didn't get it, but
var point = new GLatLng(,);
is not valid javascript
It should be either
var point = new GLatLng(param1, param2);
or
var point = new GLatLng();
or
var point = new GLatLng(null,null);
... depending on what the GLatLng constructor is

This statement:
var point = new GLatLng(,);
Is not correct because there isn't a lat or lng number specified. This is because this statement:
var point = new GLatLng('.$row->LocationLat.','.$row->LocationLon.');
Is incorrect. I'd try something like:
var point = new GLatLng(<?php echo $row->LocationLat . ',' . $row->LocationLon; ?>);
If that doesn't work, then $row->LocationLat or $row->LocationLon are possibly empty.

Problem 1- The function showAddress() is not closed.
Problem 2 - your map object needs to be defined outside of the functions so that showAddress() can access it.
Problem 3 - The references to the map object inside of showAddress() are incorrect

check if the php string you are printing into the html+js exists in the first place. php generates the htm and sends it to the user, for now on it's htm+javascript problem.
it looks like a javascript problem, but you really generated a wrong syntax with php to begin with, because you tried to print something problematic and it printed an empty space.
always be careful of that, be sure of what you print.