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);
}
Related
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!!
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 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
I am trying to place markers where the cities in a mySQL database are. The page loads but it shows "map div" where the map should load. I am not sure what is wrong. Thank you for taking a look and trying to help!
<script type="text/javascript">
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var mapOptions = {
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
directionsDisplay.setMap(map);
//create an array of latitudes, longitudes, and city names
var markers = [
<?php
//orgnize fans by city
$query = "SELECT city, state, COUNT(*) fans FROM users GROUP BY city ORDER BY fans DESC";
$result = mysql_query($query) or die(mysql_error());
while($row = mysql_fetch_array($result)){
//pulls the city, state code from the database and stores it as a string in $address
$address = urlencode('"' . $row['city'] . ", " . $row['state'] . '"');
$googleApi = 'http://maps.googleapis.com/maps/api/geocode/json?address=%s&sensor=false';
$json = file_get_contents(sprintf($googleApi, $address));
$resultObject = json_decode($json);
$location = $resultObject->results[0]->geometry->location;
$lat = $location->lat;
$lng = $location->lng;
echo "{ lat: ".$lat.", lng: ".$lng.", name: ".'"'.$row['city'].", ".$row['state'].'"'."},";
}
?>
];
// Create the markers ad infowindows.
for (index in markers) addMarker(markers[index]);
function addMarker(data) {
// Create the marker
var marker = new google.maps.Marker({
position: new google.maps.LatLng(data.lat, data.lng),
map: map,
title: data.name
});
// Create the infowindow with two DIV placeholders
// One for a text string, the other for the StreetView panorama.
var content = document.createElement("DIV");
var title = document.createElement("DIV");
title.innerHTML = data.name;
content.appendChild(title);
var streetview = document.createElement("DIV");
streetview.style.width = "200px";
streetview.style.height = "200px";
content.appendChild(streetview);
var infowindow = new google.maps.InfoWindow({
content: content
});
// Open the infowindow on marker click
google.maps.event.addListener(marker, "click", function() {
infowindow.open(map, marker);
});
// Handle the DOM ready event to create the StreetView panorama
// as it can only be created once the DIV inside the infowindow is loaded in the DOM.
google.maps.event.addListenerOnce(infowindow, "domready", function() {
var panorama = new google.maps.StreetViewPanorama(streetview, {
navigationControl: false,
enableCloseButton: false,
addressControl: false,
linksControl: false,
visible: true,
position: marker.getPosition()
});
});
}
// Try HTML5 geolocation
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
var infowindow = new google.maps.InfoWindow({
map: map,
position: pos,
content: 'Your Current City'
});
map.setCenter(pos);
}, function() {
handleNoGeolocation(true);
});
} else {
// Browser doesn't support Geolocation
handleNoGeolocation(false);
}
}
function handleNoGeolocation(errorFlag) {
if (errorFlag) {
var content = 'Error: The Geolocation service failed.';
} else {
var content = 'Error: Your browser doesn\'t support geolocation.';
}
var options = {
map: map,
position: new google.maps.LatLng(60, 105),
content: content
};
var infowindow = new google.maps.InfoWindow(options);
map.setCenter(options.position);
}
function calcRoute() {
var start = document.getElementById('start').value;
var end = document.getElementById('end').value;
var waypts = [];
var checkboxArray = document.getElementById('waypoints');
for (var i = 0; i < checkboxArray.length; i++) {
if (checkboxArray.options[i].selected == true) {
waypts.push({
location:checkboxArray[i].value,
stopover:true});
}
}
var request = {
origin: start,
destination: end,
waypoints: waypts,
optimizeWaypoints: true,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
var route = response.routes[0];
var summaryPanel = document.getElementById('directions_panel');
summaryPanel.innerHTML = '';
// For each route, display summary information.
for (var i = 0; i < route.legs.length; i++) {
var routeSegment = i + 1;
summaryPanel.innerHTML += '<b>Route Segment: ' + routeSegment + '</b><br>';
summaryPanel.innerHTML += route.legs[i].start_address + ' to ';
summaryPanel.innerHTML += route.legs[i].end_address + '<br>';
summaryPanel.innerHTML += route.legs[i].distance.text + '<br><br>';
}
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
When I open the html, I call initialize and make the canvas:
<body onload="initialize()">
<div id="map_canvas" style="width: 1100px; height: 450px;">map div</div>