Javascript and Php

[Cedars]

This is using googlemaps to produce php queried markers with info windows.

 

function initialize() {
     if (GBrowserIsCompatible()) {
       var map = new GMap2(document.getElementById("map_canvas"));
       map.addControl(new GSmallMapControl());
       map.setCenter(new GLatLng(45.8598, -92.6010), 11);
}
//Switched stuff here and ALMOST got what I wanted
   function createMarker(point, html) {
     var marker = new GMarker(point);
     var html = loc;
GEvent.addListener(marker, 'click', function() 
{marker.openInfoWindowHtml(html);
});
return marker;
};

<?php
//connection stuff
//Then my isset stuff
//Then query stuff
if (!$result2)
{
echo "no results ";
}
while($row = mysql_fetch_array($result2))
{
echo "var point = new GLatLng(" . $row['lat'] . "," . $row['lon'] . ");n";
//Switching stuff here prevents any google map from showing
echo "var marker = createMarker(point, '" . addslashes($row['loc']) . "');n";

echo "map.addOverlay(marker);n";
echo "n";
}
}
}
mysql_close();
?>
} 
//]]>
</script>

If I edit this line:

var html = loc;

to

var html = "loc";

it prints loc in the info window.

 

I have tried numerous variations on that line and cannot get it to produce the correct data in the info window.

 

When I view source on the page its showing the query is pulling the correct data in a list like this (I colored the data which is not showing in the info window):

 

var point = new GLatLng(45.845924,-92.625931);

var marker = createMarker(point, 'refuge');

map.addOverlay(marker);

 

Where its red, its showing up as loc in the infowindow if I put var html = "loc". If I leave it as loc, the markers and the info window do not show.

 

Any clues? Its gotta be something simple.

[alexander]

did you mean '"' . addslashes($row['loc']) . '"' this way it outputs "#" where # is the value of $row['loc'] with all special symbols escaped

 

also make sure that $row['loc'] returns the result you are looking for (i.e. output it to make sure they are the values you are looking for

[Cedars]

did you mean '"' . addslashes($row['loc']) . '"' this way it outputs "#" where # is the value of $row['loc'] with all special symbols escaped

 

also make sure that $row['loc'] returns the result you are looking for (i.e. output it to make sure they are the values you are looking for

 

Hi Alex,

 

Thanks for getting back to me.

 $row['loc']

is a string. I tried to clear out the .addslashes etc and made it look like the code line above it (lat/long), and it still didnt work.

 

I really think its the javascript portion that is causing the issue and I just cant figure it out.

 

As I said, if I change the line var html = loc (in the javascript function create marker) to

var html = "loc" The map shows the correct markers but each marker has loc as the text within and not the text the php query is returning (red portion in first post). But the markers are placed correctly via the lat/long coordinates returned by the php query results here:

while($row = mysql_fetch_array($result2))
{
echo "var point = new GLatLng(" . $row['lat'] . "," . $row['lon'] . ");n";
echo "var html = createMarker(point, '" . addslashes($row['loc']) . "');n";
echo "map.addOverlay(marker);n";
echo "n";
}

 

So the javascript is not reading var html correctly.

 

Heres a similar function from a different source:

 

function addMarker(current) {
     var marker  = new GMarker(new GLatLng(current.latitude, 
                                           current.longtitude));
     map.addOverlay(marker);
     GEvent.addListener(marker, 'click', function() {
         var html = '<h3>' + current.name + '</h3><p>' + 
                    current.description + '</p>';
         marker.openInfoWindowHtml(html);
     });
     return marker;
   }

 

I tried a variation of the above, but my code doesnt need current.name, or maybe it does but I havent coded it correctly.

 

Source of above snippet (under Putting Markers on Map With JavaScript):

 

Google Maps Without JavaScript

 

I almost got it working. I got it to put the markers where they were supposed to be, but I cant get the text box info working.

 

Here the working page from above link. My popup window is not producing the correct data. Each one just says loc.

 

Google Maps With JavaScript Enabled

Thanks for any help.

[alexander]

wait no, i got your problem

 

first of all with php, single quotes have more priority then the double quotes, so that echo should look more like this:

 

echo 'var marker = createMarker(point, "' . addslashes($row['loc']) . '");n';

 

here are some more thoughts:

 

firstly, you dont want to add slashes, if you need to make sure that the string is html compatible, use htmlspecialchars, like this

echo 'var marker = createMarker(point, "' . htmlspecialchars($row['loc']) . '");n';

 

also even though we can easily make this all work, think about using php to output xml and then javascript with xml to generate the map, like google shows here: Google Code FAQ - Using PHP/MySQL with Google Maps

 

but let me know if the fixed code works better for you, if not, can you post the code for the page that is generated by it (since i commonly code php/mysql/js, and i wrote a similar program back in 2004, when google only released their first version of maps API :umno: ...)

[Cedars]

wait no, i got your problem

 

first of all with php, single quotes have more priority then the double quotes, so that echo should look more like this:

 

echo 'var marker = createMarker(point, "' . addslashes($row['loc']) . '");n';

I tried the above and it throws

Expecting a , or a ; error.

Tried it with both addslashes and htmlspecialchars moving/x-out various things like the ' and the " and the . It still puts up a google map, centered on the right location, but no markers (or throws the error if I change the quotes in any manner).

 

here are some more thoughts:

 

 

also even though we can easily make this all work, think about using php to output xml and then javascript with xml to generate the map, like google shows here: Google Code FAQ - Using PHP/MySQL with Google Maps

 

I have used xml to create a static map with a fixed query. It does not work with a user input query.

 

Sample that works with fixed search/query input:

 

<?php
include("connectionStuff.file");

$dom = new DOMDocument("1.0");
$node = $dom->createElement("markers");
$parnode = $dom->appendChild($node);  

//More connection stuff to find DB, establish connection
//Stuff below selects info from mysql DB and creates a google map with infowindows 
//that work, pulling info window data from mySql DB
$query = "SELECT * FROM myTable WHERE `bfID` like '%bf38%'";
$result = mysql_query($query);
if (!$result) {
 die('Invalid query: ' . mysql_error());
}

while ($row = @mysql_fetch_assoc($result)){
 // ADD TO XML DOCUMENT NODE
$node = $dom->createElement("marker");  
 $newnode = $parnode->appendChild($node);   
 $newnode->setAttribute("name",$row['name']);
 $newnode->setAttribute("date", $row['date']);  
 $newnode->setAttribute("lat", $row['lat']);  
 $newnode->setAttribute("lng", $row['lng']);  
 $newnode->setAttribute("loc", $row['loc']);
 $newnode->setAttribute("loc2", $row['loc2']);
} 

echo $dom->saveXML();

?>

Code below is from the html page that displays the above xml info to create the google map:

 

//<![CDATA[
function initialize() {
     if (GBrowserIsCompatible()) {
       var map = new GMap2(document.getElementById("map_canvas"));
       map.addControl(new GSmallMapControl());
       map.setCenter(new GLatLng(45.8598, -92.6010), 11);

       GDownloadUrl("myMap/myXML.php", function(data) {
         var xml = GXml.parse(data);
         var markers = xml.documentElement.getElementsByTagName("marker");
         for (var i = 0; i < markers.length; i++) {
           var name = markers[i].getAttribute("name");
           var date = markers[i].getAttribute("date");
           var loc = markers[i].getAttribute("loc");
var loc2 = markers[i].getAttribute("loc2");
           var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
                                   parseFloat(markers[i].getAttribute("lng")));
           var marker = createMarker(point, name, date, loc, loc2);
           map.addOverlay(marker);
         }
       });
     }
   }

   function createMarker(point, name, date, loc, loc2) {
     var marker = new GMarker(point);
     var html = "<b>" + name + "</b> <br/>" + date + "<br/>" + loc + "<br/>" + loc2;
     GEvent.addListener(marker, 'click', function() {
       marker.openInfoWindowHtml(html);
     });
     return marker;
   }
   //]]>
   </script>
</head>

<body onload="initialize()" onunload="GUnload()"> 
//Map Position place:
<div id="map_canvas" style="width: 500px; height: 300px"></div>

 

The above works (and is fine for their respective locations/pages, but each google map on each page connects to a different xml file to create the map. I tried to figure out a way to use the above to create a seachable input for this current attempt with an action = self in the search form itself (maybe thats the problem, I should be action = pagename.php in the form, but that doesnt make sense) .

 

$query = "SELECT * FROM myTable WHERE `bfID` like '%bf38%'";

but was unable to figure it out for dynamic data ie WHERE `something LIKE a $ anything.

 

Google does recommend using the xml method, but I cant figure out how to do it dynamically so people can search for a specific bird, (in this case swan).

 

I really think I am close. I have spent about 6 weekends (varied hours) trying to get this thing working. And I am clueless on xml (well all of it really). Thank [insert whatever] for copy paste snippets and the generosity of hundreds of google map/php/javascript helper people (which includes you alex) or I wouldnt have what I do have working.

[alexander]

ofcourse it will throw an "expecting , instead of ; " create marker function expects 5 values, and you are only giving it two...

 

function createMarker(point, name, date, loc, loc2)

 

you need to pass it all 5 values, point, name, date, and 2 locations

[Cedars]

ofcourse it will throw an "expecting , instead of ; " create marker function expects 5 values, and you are only giving it two...

 

you need to pass it all 5 values, point, name, date, and 2 locations

 

Hi alex

 

There seems to be a bit of confusion. The example above (post #5) is from a different working Google maps script using xml, that I cannot get to work with this search form (in post one). The issue is one variable, loc, which is not being passed correctly, which I did adjust for (the lat/long/data) when trying to adapt the static xml version for the new method of searching).

 

Hope this makes sense

[alexander]

why dont you pass lattitude, longtitude and data, all different fields in your database, versus trying to compile it all in one variable and have this kind of trouble...?

[Cedars]

why dont you pass lattitude, longtitude and data, all different fields in your database, versus trying to compile it all in one variable and have this kind of trouble...?

 

Alex, if you read the first post, the lat / long are in one comma seperated variable, which is needed that way, to create the marker (as I understand it).

 

The info window is the html variable and is one field from the database and is the trouble spot. As I said, if I change that one variable to html = "loc" it produces the markers, it just doesnt pass the correct variable from the echo var html portion of PHP, or the javascript portion is not reading it correctly.

 

When I read the html source (view source) from the page, the php query is echoing the correct data and is reading the echo var marker = new GLatLng correctly, but doesnt produce markers until I surround html = loc with quotes.

 

The working script is the one that passes several variables, but I cannot get it to work using the form passed variable, ID, which is one field. It works fine as a static file, I cant get it to work as a user entered search field.

[alexander]

ok, i am running this script to emulate what you have going on:

<?php
$var='123.4568,40.3478123847';
echo 'var marker = createMarker(point, "' .$var. '");'."n";
?>

 

which returns

 

var marker = createMarker(point, "123.4568,40.3478123847");

 

[alexander]

unless you need quotes around each individual coordinate, in which case

 

<?php
$var='"123.4568","40.3478123847"';
echo 'var marker = createMarker(point, ' .$var. ');'."n";
?> 

which in turn returns

var marker = createMarker(point, "123.4568","40.3478123847");