I am a beginner in php. I have used this google documentation: https://developers.google.com/maps/documentation/javascript/mysql-to-maps
First I created a XML table with markers using a PHP script. The code from google docs did not work for me (could not connect to my database), but with code below could I create an output that at least looks like its in the right format: http://www.desemdelen.nl/XML.php
<?
require ("phpsqlajax_dbinfo.php");
function parseToXML($htmlStr)
{
$xmlStr = str_replace('<', '<', $htmlStr);
$xmlStr = str_replace('>', '>', $xmlStr);
$xmlStr = str_replace('"', '"', $xmlStr);
$xmlStr = str_replace("'", ''', $xmlStr);
$xmlStr = str_replace("&", '&', $xmlStr);
return $xmlStr;
}
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error)
{
die("Connection failed: " . $conn->connect_error);
}
$sql = "SELECT id, name, address, lat, lng, type FROM markers";
$result = $conn->query($sql);
header("Content-type: text/xml");
// Start XML file, echo parent node
echo '<markers>';
$ind = 0;
// Iterate through the rows, printing XML nodes for each
while ($row = $result->fetch_assoc())
{
// Add to XML document node
echo '<marker ';
echo 'id="' . $row['id'] . '" ';
echo 'name="' . parseToXML($row['name']) . '" ';
echo 'address="' . parseToXML($row['address']) . '" ';
echo 'lat="' . $row['lat'] . '" ';
echo 'lng="' . $row['lng'] . '" ';
echo 'type="' . $row['type'] . '" ';
echo '/>';
$ind = $ind + 1;
}
// End XML file
echo '</markers>';
?>
And here is the HTML page to display the map with markers. http://www.desemdelen.nl/mapview.html. I only changed the link to my XLM.php file and added my API code in the bottom. Map is loading, but no markers.
<!DOCTYPE html >
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Using MySQL and PHP with Google Maps</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<html>
<body>
<div id="map"></div>
<script>
var customLabel = {
restaurant: {
label: 'R'
},
bar: {
label: 'B'
}
};
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(-33.863276, 151.207977),
zoom: 12
});
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP or XML file
downloadUrl('http://www.desemdelen.nl/XML.php', function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName('marker');
Array.prototype.forEach.call(markers, function(markerElem) {
var id = markerElem.getAttribute('id');
var name = markerElem.getAttribute('name');
var address = markerElem.getAttribute('address');
var type = markerElem.getAttribute('type');
var point = new google.maps.LatLng(
parseFloat(markerElem.getAttribute('lat')),
parseFloat(markerElem.getAttribute('lng')));
var infowincontent = document.createElement('div');
var strong = document.createElement('strong');
strong.textContent = name
infowincontent.appendChild(strong);
infowincontent.appendChild(document.createElement('br'));
var text = document.createElement('text');
text.textContent = address
infowincontent.appendChild(text);
var icon = customLabel[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
label: icon.label
});
marker.addListener('click', function() {
infoWindow.setContent(infowincontent);
infoWindow.open(map, marker);
});
});
});
}
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 doNothing() {}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&callback=initMap">
</script>
</body>
</html>
Strangly enough I can see the markers on an old laptop I am using, but not on any more recent devise. Where did I go wrong? Am I working with older versions perhaps (V1, V2,V3). Thank you!!
Related
Here is my xml code saved as 'phpsqlajax.php'
<?php
require("db_connect1.php");
function parseToXML($htmlStr)
{
$xmlStr=str_replace('<','<',$htmlStr);
$xmlStr=str_replace('>','>',$xmlStr);
$xmlStr=str_replace('"','"',$xmlStr);
$xmlStr=str_replace("'",''',$xmlStr);
$xmlStr=str_replace("&",'&',$xmlStr);
return $xmlStr;
}
// Opens a connection to a mySQL server
$connection=mysqli_connect ($db_hostname, $db_username, $db_password);
if (!$connection) {
die('Not connected : ' . mysqli_error($connection));
}
// Set the active mySQL database
$db_selected=mysqli_select_db($connection, $db_database);
if (!$db_selected) {
die ('Can\'t use db : ' . mysqli_error($connection));
}
// Select all the rows in the markers table
$query = "SELECT * FROM markers WHERE 1=1";
$result = mysqli_query($connection, $query);
if (!$result) {
die('Invalid query: ' . mysqli_error($connection));
}
header("Content-type: text/xml");
// Start XML file, echo parent node
echo '<markers>';
// Iterate through the rows, printing XML nodes for each
while ($row = #mysqli_fetch_assoc($result)){
// ADD TO XML DOCUMENT NODE
echo '<marker ';
echo 'name="' . parseToXML('&','&', $row['name']) . '" ';
echo 'lat="' . $row['lat'] . '" ';
echo 'lng="' . $row['lng'] . '" ';
echo 'type="' . $row['type'] . '" ';
echo '/>';
}
// End XML file
echo '</markers>';
?>
I am trying to download this and implement it onto my map which is saved as 'mapxml.html', however the map only displays an image of Seattle and not the markers that I have saved in my database. Here is the mapxml.html code
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps AJAX + mySQL/PHP Example</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var customIcons = {
field: {
icon: 'img/marker.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
Park: {
icon: 'img/marker.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
}
};
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(47.6145, -122.3418),
zoom: 13,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP file
downloadUrl("phpsqlajax_genxml.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("markers");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var type = markers[i].getAttribute("type");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<b>" + name + "</b> <br/>" + address;
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow
});
bindInfoWindow(marker, map, infoWindow, html);
}
});
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
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 doNothing() {}
//]]>
</script>
</head>
<body onload="load()">
<div id="map" style="width: 500px; height: 300px"></div>
</body>
</html>
does anybody know the reason my markers are not displayed?
I have been following the Google tutorial and my XML is outputting fine however I cannot seem to finish the instructions https://developers.google.com/maps/articles/phpsqlajax_v3
if anyone could help I would greatly appreciate it!
47.6145, -122.3418 is the coordinates for Seattle. If you want to see all the markers being returned by your AJAX request, you need to adjust your map's bounds to fit the markers.
Here's an amended version of your for loop to include that:
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var type = markers[i].getAttribute("type");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng"))
);
bounds.extend(point);
var html = "<b>" + name + "</b> <br/>" + address;
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow
});
bindInfoWindow(marker, map, infoWindow, html);
}
map.fitBounds(bounds);
i have a problem with showing my XML File in my Google Maps
My Concept : MySQL -> XML -> Show To GMaps
Here's My Code :
Index.php
<!DOCTYPE html >
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>ODP Tracking</title>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>
<script type="text/javascript">
var customIcons = {
FTTH: {
icon:"/images/ico_tag.png"
},
MSAN: {
icon:"/images/ico_tag_ms.png"
},
DSLAM: {
icon:"/images/ico_tag_ds.png"
},
bar: {
icon:'http://labs.google.com/ridefinder/images/mm_20_red.png'
}
};
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(load);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function updateMarkerPosition(latLng) {
document.getElementById('latitude').value = [latLng.lat()]
document.getElementById('longitude').value = [latLng.lng()]
}
function load(position) {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(position.coords.latitude,position.coords.longitude),
zoom: 17,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;
var latLng = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var url = "phpsqlajax_genxml.php";
var marker2 = new google.maps.Marker({
position : latLng,
title : 'Lokasi',
map : map,
draggable : false
});
// Change this depending on the name of your PHP file
downloadUrl(url, function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var kap = markers[i].getAttribute("kap");
var avai = markers[i].getAttribute("avai");
var type = markers[i].getAttribute("type");
var note = markers[i].getAttribute("ket");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lang")));
var html = "<b>" + name + "</b> <br/>ALPRO : " + type + "<br/>KAP : " + kap + "<br/>AVAI : " + avai + "<br/>KETERANGAN : " + ket ;
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon
});
bindInfoWindow(marker, marker2, map, infoWindow, html);
}
});
updateMarkerPosition(latLng);
google.maps.event.addListener(marker2, 'drag', function() {
updateMarkerPosition(marker2.getPosition());
});
}
function bindInfoWindow(marker, marker2, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker, marker2);
});
}
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 doNothing() {}
</script>
</head>
<body onload="getLocation()">
<style>
html, body, #map {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#map {
position: relative;
}
</style>
<div id="map"></div>
</body>
</html>
and here's my XML Parsing Code
phpsqlajax_genxml.php
<?php
require("phpsqlajax_dbinfo.php");
function parseToXML($htmlStr)
{
$xmlStr=str_replace('<','<',$htmlStr);
$xmlStr=str_replace('>','>',$xmlStr);
$xmlStr=str_replace('"','"',$xmlStr);
$xmlStr=str_replace("'",''',$xmlStr);
$xmlStr=str_replace("&",'&',$xmlStr);
$xmlStr=str_replace("-",'-',$xmlStr);
$xmlStr=str_replace("/",'/',$xmlStr);
return $xmlStr;
}
// Create connection
$conn = new mysqli('localhost', $username, $password, $database);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);}
// Select all the rows in the markers table
$sql = "SELECT * FROM koordinat_odp";
$result = $conn->query($sql);
if (!$result) {
die('Invalid query: ' . mysql_error());
}
header("Content-type: text/xml");
// Start XML file, echo parent node
echo '<markers>';
// Iterate through the rows, printing XML nodes for each
while ($row = $result->fetch_assoc()){
// ADD TO XML DOCUMENT NODE
echo '<marker ';
echo 'name="' . parseToXML($row['nama_dp']) . '" ';
echo 'kap="' . $row['kap'] . '" ';
echo 'avai="' . $row['avai'] . '" ';
echo 'lat="' . $row['lat'] . '" ';
echo 'lang="' . $row['lang'] . '" ';
echo 'type="' . $row['jenis_alpro'] . '" ';
echo 'ket="' . $row['note'] . '" ';
echo '/>';
}
// End XML file
echo '</markers>';
?>
My Problem : It not showing marker on the maps, i generate xml file myself in browser, it work, but not showing in gmaps
Thank you in advance for all you helps .
I think your answer can be found here.
function parseXML(xml){
var bounds = new google.maps.LatLngBounds();
$(xml).find("marker").each(function(){
//Read the name, address, latitude and longitude for each Marker
var name = $(this).find('name').text();
var kap = $(this).find('kap').text();
var avai = $(this).find('avai').text();
var note = $(this).find('ket').text();
var type = $(this).find('type').text();
var lat = $(this).find('lat').text();
var lng = $(this).find('lng').text();
var markerCoords = new google.maps.LatLng(parseFloat(lat),
parseFloat(lng));
bounds.extend(markerCoords);
var marker = new google.maps.Marker({position: markerCoords, map:map});
});
map.fitBounds(bounds);
}
I’m working on the example: “Using PHP/MySQL with Google Maps”
https://developers.google.com/maps/articles/phpsqlajax_v3
I know this tutorial has been covered a lot before but I can’t find the answer I’m looking for, and hope someone can help.
I’m trying to show a Google Map with markers. Each marker is a book icon. Books are organised by category (I’ve called it “type” in my database). The idea is that users can select which category of book they want, and then only these books will be shown on the map.
My problem is I can’t get the FORM select to work, the “type” variable needs to be passed from the index.php to the page phpsqlajax_genxml2.php, in order for the database to be interrogated.
My question is - how do i get the php variable $type to the phpsqlajax_genxml2.php page?
The phpsqlajax_genxml2.php page is not included in the index.php page, but there is a downloadUrl function:
downloadUrl("phpsqlajax_genxml2.php", function(data)
Here are my files in full. Thanks in advance
index.php
<?php
// Get parameters from URL
$type = $_GET["type"];
?>
<!DOCTYPE html >
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>PHP/MySQL & Google Maps Example</title>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>
<script type="text/javascript">
//<![CDATA[
var customIcons = {
'Murder Mystery': {
icon: 'http://labs.google.com/ridefinder/images/mm_20_black.png'
},
'Travel Guide': {
icon: 'http://labs.google.com/ridefinder/images/mm_20_gray.png'
},
'Romance': {
icon: 'http://labs.google.com/ridefinder/images/mm_20_purple.png'
},
'Short Story': {
icon: 'http://labs.google.com/ridefinder/images/mm_20_green.png'
},
'Thriller': {
icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png'
},
'Comedy': {
icon: 'http://labs.google.com/ridefinder/images/mm_20_yellow.png'
},
'Graphic Novel': {
icon: 'http://labs.google.com/ridefinder/images/mm_20_white.png'
},
'Satire': {
icon: 'http://labs.google.com/ridefinder/images/mm_20_brown.png'
}
};
</script>
<script type="text/javascript">
//Check if browser supports W3C Geolocation API
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(successFunction, errorFunction);
} else {
alert('Geolocation is required for this page, but your browser doesn't support it. Try it with a browser that does, such as Opera 10.60.');
}
function errorFunction(position) {
alert('Error!');
}
//If successful geolocation then draw the map, show my coords on the map, and pull in the icons
function successFunction(position) {
var lat = position.coords.latitude;
var lng = position.coords.longitude;
var map = new google.maps.Map(document.getElementById("map"),
{
center: new google.maps.LatLng(lat, lng),
zoom: 13,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;
// SQL to XML file
//downloadUrl("phpsqlajax_genxml2.php?type=" + type, function(data) {
downloadUrl("phpsqlajax_genxml2.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var type = markers[i].getAttribute("type");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<b>" + name + "</b> <br/>" + address + "<br/>" + "<i>" + type + "</i>";
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon
});
bindInfoWindow(marker, map, infoWindow, html);
}
});
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
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 doNothing() {}
//]]>
</script>
</head>
<body onload="successFunction(position)">
<div id="map" style="width: 500px; height: 400px"></div>
<form action="<?php $_PHP_SELF ?>" method="GET">
<select name="type">
<option value="Murder Mystery">Murder Mystery</option>
<option value="Travel Guide">Travel Guide</option>
<option value="Romance">Romance</option>
<option value="Short Story">Short Story</option>
<option value="Thriller">Thriller</option>
<option value="Comedy">Comedy</option>
<option value="Graphic Novel">Graphic Novel</option>
<option value="Satire">Satire</option>
</select>
<input type="submit" value="Submit" />
</form>
</body>
</html>
phpsqlajax_genxml2.php
<?php
// Get parameters from URL
$type = $_GET["type"];
include ("inc/DB_connect.php");
//Using PHP's echo to Output XML
function parseToXML($htmlStr)
{
$xmlStr=str_replace('<','<',$htmlStr);
$xmlStr=str_replace('>','>',$xmlStr);
$xmlStr=str_replace('"','"',$xmlStr);
$xmlStr=str_replace("'",''',$xmlStr);
$xmlStr=str_replace("&",'&',$xmlStr);
return $xmlStr;
}
// Opens a connection to a MySQL server
$connection=mysql_connect (localhost, $username, $password);
if (!$connection) {
die('Not connected : ' . mysql_error());
}
// Set the active MySQL database
$db_selected = mysql_select_db($database, $connection);
if (!$db_selected)
{
die ('Can\'t use db : ' . mysql_error());
}
// Select all the rows in the markers table
//$query = "SELECT * FROM `markers` WHERE 1";
$query = "SELECT * FROM `markers` WHERE `type` = '$type'";
$result = mysql_query($query) or die(mysql_error());
header("Content-type: text/xml");
// Start XML file, echo parent node
echo '<markers>';
// Iterate through the rows, printing XML nodes for each
while ($row = #mysql_fetch_assoc($result))
{
// ADD TO XML DOCUMENT NODE
echo '<marker ';
echo 'name="' . parseToXML($row['name']) . '" ';
echo 'address="' . parseToXML($row['address']) . '" ';
echo 'lat="' . $row['lat'] . '" ';
echo 'lng="' . $row['lng'] . '" ';
echo 'type="' . $row['type'] . '" ';
echo '/>';
}
// End XML file
echo '</markers>';
?>
So if you want to pass data from one PHP file to another, You have two options in this case, Cookies and Sessions:
Cookie:
//One page 1
$_COOKIE['varname'] = $var_value;
//On page 2
$var_value = $_COOKIE['varname'];
Session:
//On page 1
$_SESSION['varname'] = $var_value;
//On page 2
$var_value = $_SESSION['varname'];
The big difference between sessions and cookies are that the value of the variable will be stored on the server if you're using sessions, and on the client if you're using cookies. I can't think of any good reason to use cookies instead of sessions, except if you want data to persist between sessions, but even then it's perhaps better to store it in a DB, and retrieve it based on a username or id.
EDIT
There is one more method supported where you can pass that variable in your JQuery call like this:
In your first file:
jQuery('#map').load('Firstfile.php?type=<?php echo($type);?>');
In your second file
$type = $_GET['type'];
Give this one a shot!!
Referred from Passing php variable from one file to another?
I have written a XML file with Javascript and PHP... and I'm having an error where it said XML Parsing Error: not well-formed. Can anyone help me please. I'm uploading the 2 files...
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps AJAX + mySQL/PHP Example</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
<script type="text/javascript">
var customIcons = {
criminal: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
offender: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
}
};
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(-20.1666591, 57.503457),
zoom: 13,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;
downloadUrl("showsubject-script1.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var subid = markers[i].getAttribute("subid");
var subaddress = markers[i].getAttribute("subaddress");
var subremarks = markers[i].getAttribute("subremarks");
var subtype = markers[i].getAttribute("subtype");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("sublat")),
parseFloat(markers[i].getAttribute("sublng")));
var html = "<b>" + subid + "</b> <br/>" + subaddress + "</b> <br/>" + subremarks ;
var icon = customIcons[subtype] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
});
bindInfoWindow(marker, map, infoWindow, html);
}
});
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
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 doNothing() {}
</script>
</head>
<body onLoad="load()">
<div id="map" style="width: 900px; height: 1000px"></div>
</body>
</html>
And the second file is:
<?php
require("db.php");
function parseToXML($htmlStr)
{
$xmlStr=str_replace('<','<',$htmlStr);
$xmlStr=str_replace('>','>',$xmlStr);
$xmlStr=str_replace('"','"',$xmlStr);
$xmlStr=str_replace("'",''',$xmlStr);
$xmlStr=str_replace("&",'&',$xmlStr);
return $xmlStr;
}
$query = mysql_query ("SELECT id,addressfound,remarks, lat, lng,'criminal' FROM criminalrecord");
while ($row = mysql_fetch_array($query))
{
$insert = mysql_query("insert into subjectrecord (subid,subaddress,subremarks,sublat,sublng,subtype) values ('$row[0]','$row[1]','$row[2]','$row[3]','$row[4]','$row[5]') ");
}
$query1 = mysql_query ("SELECT id,addressfound,remarks, lat, lng,'offender' subject FROM offenderrecord");
while ($row1 = mysql_fetch_array($query1))
{
$insert1 = mysql_query("insert into subjectrecord (subid,subaddress,subremarks,sublat,sublng,subtype) values ('$row1[0]','$row1[1]','$row1[2]','$row1[3]','$row1[4]','$row1[5]') ");
}
$query2 = mysql_query ("SELECT subid,subaddress,subremarks,sublat,sublng,subtype FROM subjectrecord");
header("Content-type: text/xml");
echo '</markers>';
while ($row2 = #mysql_fetch_assoc($query2)){
// ADD TO XML DOCUMENT NODE
echo '<marker ';
echo 'subid="' . parseToXML($row2['subid']) . '" ';
echo 'subaddress="' . parseToXML($row2['subaddress']) . '" ';
echo 'subremarks="' . parseToXML($row2['subremarks']) . '" ';
echo 'sublat="' . $row2['sublat'] . '" ';
echo 'sublng="' . $row2['sublng'] . '" ';
echo 'subtype="' . $row2['subtype'] . '" ';
echo '/>';
}
// End XML file
echo '</markers>';
?>
As #CBroe suggested, your XML output is not well-formed. The problem seems to be the first </markers> which it should be an opening tag, i.e. <markers>.
I have 2 tables criminal and offender. i have created another table called subject where a query is executed and it works amazingly: HERE IS THE CODE:
showsubject.php
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps AJAX + mySQL/PHP Example</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
<script type="text/javascript">
var customIcons = {
criminal: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
offender: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
}
};
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(-20.1666591, 57.503457),
zoom: 13,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;
downloadUrl("showsubject-script1.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var subid = markers[i].getAttribute("subid");
var subaddress = markers[i].getAttribute("subaddress");
var subtype = markers[i].getAttribute("subtype");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("sublat")),
parseFloat(markers[i].getAttribute("sublng")));
var html = "<b>" + subid + "</b> <br/>" + subaddress;
var icon = customIcons[subtype] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
});
bindInfoWindow(marker, map, infoWindow, html);
}
});
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
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 doNothing() {}
</script>
</head>
<body onLoad="load()">
<div id="map" style="width: 900px; height: 1000px"></div>
</body>
</html>
SHOWSUBJECTSCRIPT.PHP
<?php
require("db.php");
function parseToXML($htmlStr)
{
$xmlStr=str_replace('<','<',$htmlStr);
$xmlStr=str_replace('>','>',$xmlStr);
$xmlStr=str_replace('"','"',$xmlStr);
$xmlStr=str_replace("'",''',$xmlStr);
$xmlStr=str_replace("&",'&',$xmlStr);
return $xmlStr;
}
$query1 = mysql_query ("SELECT id,address,lat,lng 'criminal' FROM criminal");
while ($row1 = mysql_fetch_array($query1) )
{
$insert1= mysql_query("insert into subject (subid,subaddress,sublet,sublng,subtype)
values( '$row[0]', '$row[1]', '$row[2]', '$row[3]','$row[4]') ");
}
$query2 = mysql_query ("SELECT id,address,lat,lng 'offender' FROM offender");
while ($row2 = mysql_fetch_array($query2) )
{
$insert2= mysql_query("insert into subject (subid,subaddress,sublat,sublng,subtype)
values( '$row[0]', '$row[1]', '$row[2]', '$row[3]','$row[4]') ");
}
$query3 = mysql_query ("SELECT * FROM subject");
header("Content-type: text/xml");
echo '<markers>';
while ($row3 = #mysql_fetch_assoc($query3)){
// ADD TO XML DOCUMENT NODE
echo '<marker ';
echo 'subid="' . parseToXML($row3['subid']) . '" ';
echo 'subaddress="' . parseToXML($row3['subaddress']) . '" ';
echo 'sublat="' . $row3['sublat'] . '" ';
echo 'sublng="' . $row3['sublng'] . '" ';
echo 'subtype="' . $row3['subtype'] . '" ';
echo '/>';
}
// End XML file
echo '</markers>';
?>
Now i have to delete the field values of the table offender once the session is closed. Anyone can help me please..??
The best way to do this is to use cron. Code the php script that will do the clean up and set up cron to run it every x minutes, hours to run it for you.
http://net.tutsplus.com/tutorials/php/managing-cron-jobs-with-php-2/
Another option could be using ignore_user_abort() depending on how exactly you want to remove the data from the offender table
http://php.net/manual/en/function.ignore-user-abort.php