We Keep Coding

PHP - Parse SDK query on ParseGeoPoint doesn't work properly

I've got an issue that I can't fix, it's been weeks I'm trying to do so but I just can't figure out what I'm doing wrong, or if there's something wrong in the Parse PHP SDK.
I have built a website with Parse Server as the backend, it's a listing website with location detection, and I'm working on Chrome (I've tried Firefox and Safari as well, I get the same issue).
My steps:
When you got to the home page, the browser asks you to allow location detection, I allow it.
If you click on the location button, you can open a Google map into a modal and place the pin on click to the desired location, you can also set the distance range by moving a slider. I select London, UK
I get the right console messages in Chrome:
DISTANCE: 87 Km
MARKER LAT: 51.522497992110246 - MARKER LNG: -0.12863733794108612
The issue comes here, the website shows only some of the posted Ads, those ones that I have posted through a mobile app (my own source code too, with Parse iOS and Android SDKs), it doesn't display those ads I've submitted through the website. Weird thing, if I post ads from the website and I open my mobile app, I can see them!
And if I check my database, the GeoPoint coordinates of my ads are correctly stored, whether I submitted ads through the website or the mobile apps.
Lastly, If I perform a search by keywords with the search bar on the top of the page, I can find those ads I've posted through the website. So, basically, no keywords, no ads posted through the website...
Here's my PHP code to query ads (NOTE; the variables that start with $ADS_ are simple strings declared in another file, ex. $ADS_LOCATION = "ads_location", etc):
/*--- variables ---*/
$isFollowing = $_GET['isFollowing'];
$option = $_GET['option'];
$upObjID = $_GET['upObjID'];
$latitude = $_GET['lat']; // 51.522497992110246
$longitude = $_GET['lng']; // -0.12863733794108612
$dist = $_GET['distance'];
$distance = (int)$dist; // 50
$category = $_GET['category'];
$sortBy = str_replace(' ', '', $_GET['sortBy']);
$keywords = preg_split('/\s+/', $_GET['keywords']);
// query Ads
try {
$query = new ParseQuery($ADS_CLASS_NAME);
$query->equalTo($ADS_IS_REPORTED, false);
// it's following.php
if ($isFollowing == true) {
$currentUser = ParseUser::getCurrentUser();
$cuObjIdArr = array();
array_push($cuObjIdArr, $currentUser->getObjectId());
$query->containedIn($ADS_FOLLOWED_BY, $cuObjIdArr);
// it's User profile page
} else if ($upObjID != null) {
$userPointer = new ParseUser($USER_CLASS_NAME, $upObjID);
$userPointer->fetch();
$query->equalTo($ADS_SELLER_POINTER, $userPointer);
if ($option == 'selling'){ $query->equalTo($ADS_IS_SOLD, false);
} else if ($option == 'sold'){ $query->equalTo($ADS_IS_SOLD, true);
} else if ($option == 'liked'){ $query->containedIn($ADS_LIKED_BY, array($userPointer->getObjectId())); }
// it's index.php
} else {
// nearby Ads
if ($latitude != null && $longitude != null) {
$currentLocation = new ParseGeoPoint($latitude, $longitude);
$query->withinKilometers("location", $currentLocation, $distance);
// nearby DEFAULT LOCATION COORDINATES
} else {
$defaultLocation = new ParseGeoPoint($DEFAULT_LOCATION_LATITUDE, $DEFAULT_LOCATION_LONGITUDE);
$query->withinKilometers($ADS_LOCATION, $defaultLocation, $DISTANCE_IN_KM);
}
// keywords
if (count($keywords) != 0) { $query->containedIn($ADS_KEYWORDS, $keywords); }
// category
if ($category != "All") { $query->equalTo($ADS_CATEGORY, $category); }
// sort by
switch ($sortBy) {
case 'Newest': $query->descending("createdAt");
break;
case 'Price:lowtohigh': $query->ascending($ADS_PRICE);
break;
case 'Price:hightolow': $query->descending($ADS_PRICE);
break;
case 'MostLiked': $query->descending($ADS_LIKES);
break;
default: break;
}// ./ sort by
}// ./ If
// perform query
$adsArray = $query->find();
if (count($adsArray) != 0) {
for ($i = 0; $i < count($adsArray); $i++) {
// Parse Obj
$adObj = $adsArray[$i];
// image 1
$adImg = $adObj->get($ADS_IMAGE1);
// title
$adTitle = substr ($adObj->get($ADS_TITLE), 0, 24).'...';
// currency
$adCurrency = $adObj->get($ADS_CURRENCY);
// price
$adPrice = $adObj->get($ADS_PRICE);
echo '
<!-- Ad card -->
<div class="col-lg-3 col-md-5 portfolio-item">
<div class="card">
';
// Sold badge
$isSold = $adObj->get($ADS_IS_SOLD);
if ($isSold) { echo '<div class="card-sold-badge"><img src="assets/images/sold-badge.png"></div>'; }
echo '
<img src="'.$adImg->getURL().'">
<div class="card-body">
<p class="card-title">'.$adTitle.'</p>
<p class="card-price">'.$adCurrency.' '.$adPrice.'</p>
</div>
</div>
</div>
';
}// ./ For
// no ads
} else {
echo '
<div class="col-lg-12 col-md-12">
<div class="text-center" style="margin-top: 40px; font-weight: 600">No Ads found.</div>
</div>
';
}
// error
} catch (ParseException $e){ echo $e->getMessage(); }
The above code comes from a separate file called query-ads.php and it gets displayed in a div:
<div class="row" id="adsGrid"></div>
I perform an AJAX function to call query-ads.php:
function queryAds(catName, keywords) {
// category
if (catName == null) { catName = "All"; }
document.getElementById("categoryName").innerHTML = '<h5 id="categoryName"><strong>' + catName + '</strong></h5>';
// keywords
if (keywords == null) { keywords = ''; }
// console.log('KEYWORDS: ' + keywords);
// console.log('LAT: ' + latitude + ' -- LNG: ' + longitude);
console.log('DISTANCE: ' + distance + ' Km');
// console.log('SORT BY: ' + sortBy);
$.ajax({
url:'query-ads.php',
data: 'lat=' + latitude + '&lng=' + longitude + '&distance=' + distance + '&category=' + catName + '&keywords=' + keywords + '&sortBy=' + sortBy,
type: 'GET',
success:function(data) {
document.getElementById("adsGrid").innerHTML = data;
},
// error
error: function(xhr, status, error) {
var err = eval("(" + xhr.responseText + ")");
swal(err.Message);
}});
}
And here's my JavaScript code as well:
var cityStateButton = document.getElementById("cityState");
/*--- variables --*/
// localStorage.clear();
var latitude = localStorage.getItem('latitude');
var longitude = localStorage.getItem('longitude');
var distance = localStorage.getItem('distance');
if (distance == null) { distance = 50; }
var map;
var markers = [];
var geocoder;
var sortBy = document.getElementById('sortByBtn').innerHTML;
console.log("1st LATITUDE: " + latitude + " -- 1st LONGITUDE: " + longitude + ' -- 1st DISTANCE: ' + distance + ' -- 1st SORT BY: ' + sortBy);
// Call functions
if (latitude == null) { getCurrentLocation();
} else { getAddress(); }
// ------------------------------------------------
// MARK: - GET CURRENT LOCATION
// ------------------------------------------------
function getCurrentLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(getPosition, showError);
} else {
swal("Geolocation is not supported by this browser.");
// set default location coordinates
latitude = <?php echo $DEFAULT_LOCATION_LATITUDE ?>;
longitude = <?php echo $DEFAULT_LOCATION_LONGITUDE ?>;
getAddress();
}
}
function getPosition(position) {
latitude = position.coords.latitude;
longitude = position.coords.longitude;
getAddress();
}
function showError(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
swal("You have denied your current Location detection.");
break;
case error.POSITION_UNAVAILABLE:
swal("Location information is unavailable.");
break;
case error.TIMEOUT:
swal("The request to get your current location timed out.");
break;
case error.UNKNOWN_ERROR:
swal("An unknown error occurred.");
break;
}
// set default location
latitude = <?php echo $DEFAULT_LOCATION_LATITUDE ?>;
longitude = <?php echo $DEFAULT_LOCATION_LONGITUDE ?>;
getAddress();
}
function getAddress () {
// geocoding API
var geocodingAPI = "https://maps.googleapis.com/maps/api/geocode/json?latlng=" + latitude + "," + longitude + "&key=<?php echo $GOOGLE_MAP_API_KEY ?>";
$.getJSON(geocodingAPI, function (json) {
if (json.status == "OK") {
var result = json.results[0];
var city = "";
var state = "";
for (var i = 0, len = result.address_components.length; i < len; i++) {
var ac = result.address_components[i];
if (ac.types.indexOf("locality") >= 0) { city = ac.short_name; }
if (ac.types.indexOf("country") >= 0) { state = ac.short_name; }
}// ./ For
// show city, state
cityStateButton.innerHTML = '<i class="fas fa-location-arrow"></i> ' + city + ', ' + state;
// call query
queryAds();
// save gps coordinates
localStorage.setItem('latitude', latitude);
localStorage.setItem('longitude', longitude);
// console.log("LAT (getAddress): " + latitude + " -- LNG (getAddress): " + longitude);
// call function
initMap();
}// ./ If
});
}
//---------------------------------
// MARK - INIT GOOGLE MAP
//---------------------------------
var mapZoom = 12;
function initMap() {
var location = new google.maps.LatLng(latitude, longitude);
map = new google.maps.Map(document.getElementById('map'), {
zoom: mapZoom,
center: location,
mapTypeId: 'roadmap',
disableDefaultUI: true,
mapTypeControl: false,
scaleControl: false,
zoomControl: false
});
// call addMarker() when the map is clicked.
map.addListener('click', function(event) {
addMarker(event.latLng);
});
// Add a marker in the center of the map.
addMarker(location);
}
function addMarker(location) {
clearMarkers();
var marker = new google.maps.Marker({
position: location,
map: map
});
markers.push(marker);
// set lat & lng based on marker's coordinates
latitude = marker.getPosition().lat();
longitude = marker.getPosition().lng();
console.log("MARKER LAT: " + latitude + " - MARKER LNG: " + longitude);
// zoom & center map based on pin
metersPerPx = 156543.03392 * Math.cos(latitude * Math.PI / 180) / Math.pow(2, mapZoom)
map.setZoom(metersPerPx/2.6);
map.setCenter(marker.getPosition());
}
function setMapOnAll(map) {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(map);
}// ./ For
}
// Removes the markers from the map, but keeps them in the array.
function clearMarkers() {
setMapOnAll(null);
markers = [];
}
//---------------------------------
// MARK - GET GPS COORDS FROM ADDRESS
//---------------------------------
function getCoordsFromAddress(address) {
geocoder = new google.maps.Geocoder();
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == 'OK') {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
markers.push(marker);
// set coordinates
latitude = results[0].geometry.location.lat();
longitude = results[0].geometry.location.lng();
// save gps coordinates
localStorage.setItem('latitude', latitude);
localStorage.setItem('longitude', longitude);
// console.log("SEARCH LOCATION LAT: " + latitude + " - SEARCH LOCATION LNG: " + longitude);
initMap();
// error
} else { swal('Geocode was not successful for the following reason: ' + status);
}});
}
I thought it was an issue with ParseGeoPoint, but it's not, because if I make a text search for keywords, I can find Ads.

Found the solution, I'm posting it just in case someone else will encounter such issue on the Parse PHP SDK, because it's there since early 2018.
In my script that saves Ads in my database, I was storing lowercase keywords based on the description and title of submitted items:
$kStr = $description. " " .$title. " " .$currentUser->getUsername();
$keywords = explode( " ", strtolower($kStr) );
Which was working fine, but since the PHP ParseQuery with a keywords filter needs at least an empty item in the array of keywords, I had to add this simple line below the above code:
array_push($keywords, "");
In this way, the database stores all proper keywords + an empty one: "", here's an example of how the keywords Arrat-type field looks like in the database:
[
"lorem",
"ad",
"ipsum",
"johndoe",
"" <-- this is the empty item that the SDK needs to properly perform a query in case of additional filters (in my case, a ParseGeopoint one)
]
This may be just a temporary trick until Parse Server's developers will fix this issue. It works, so why not ;)

Creating check boxes for each markers generated by xml GOOGLE MAPS

I already have a working map where it generates a valid xml and can generate a marker on my map. Now what I want to do is to upon generating of maps for each loop in the xml I can create asynchronously a check box for each name. here is the code that generates the xml
function searchNearLocations(radius){
clearLocations();
var searchUrl = './designIncludes/phpLogicIncludes/searchMarkers.php?lat=' + userLat +'&lng=' + userLng + '&radius=' + radius;
downloadUrl(searchUrl, function(data) {
var xml = parseXml(data);
var markerNodes = xml.documentElement.getElementsByTagName("marker");
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < markerNodes.length; i++) {
var name = markerNodes[i].getAttribute("name");
var address = markerNodes[i].getAttribute("address");
var info = markerNodes[i].getAttribute("info");
var tts = markerNodes[i].getAttribute("tts");
var latlng = new google.maps.LatLng(
parseFloat(markerNodes[i].getAttribute("lat")),
parseFloat(markerNodes[i].getAttribute("lng")));
createMarker(latlng, name, address,info,tts);
createCheckboxes(name);
bounds.extend(latlng);
}
map.fitBounds(bounds);
});
}
My createMarker()
function createMarker(latlng, name, address,info,tts) {
var html = "<b>" + name + "</b></br><u>" + address + "</u></br>" + info + "</br>" + "Time allowance to spend: " + tts;
var marker = new google.maps.Marker({
map: map,
position: latlng
});
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
markers.push(marker);
}
I'm not that good in javascript but I have a marker=[] array global variable. Can I use that variable to generate a checkbox with it?by the way I also have a pre made marker before invoking the searchNearLocations function and I want to add it on the latlng bounds. Is it possible to insert it on the loop?

Okay
Everything not having to do with the checkboxes, I ignored. You'll have to put it back in your code.
I wrote a functioning example, you can copy/paste this as is.
<script src="http://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script type="text/javascript">
var markers = [];
var map;
/* I don't have that XML. I'll just insert a few locations hard coded. You can ignore this; it doesn't affect your question */
var markerNodes = [
{latlng: new google.maps.LatLng(50.896328544032805,4.4825010816688), name: 'Brussels Airport', address: 'A201, 1930 Zaventem', info: 'National airport of Brussels', tts: 'foo'},
{latlng: new google.maps.LatLng(50.8957080950929,4.334064952575659), name: 'Football stadion', address: 'Marathonlaan', info: 'Football stadion of the Red Devils', tts: 'foo'},
{latlng: new google.maps.LatLng(50.82302545625156,4.39255052014533), name: 'VUB campus', address: 'Pleinlaan 2', info: 'University of Brussels', tts: 'foo'}
];
function initialize() {
var position = new google.maps.LatLng(50.84499325563654,4.349978498661017);
var myOptions = {
zoom: 11,
center: position
};
map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
searchNearLocations(null); // I ignore the radius part. I presume this searches for locations in a DB, or something...
}
/* never mind most of the changes I made here, it's just to ignore the xml part of the code */
function searchNearLocations(radius) {
clearLocations();
var bounds = new google.maps.LatLngBounds();
for (var i=0; i<markerNodes.length; i++) {
var latlng = markerNodes[i].latlng,
name = markerNodes[i].name,
address = markerNodes[i].address,
info = markerNodes[i].info,
tts = markerNodes[i].tts;
createMarker(latlng, name, address, info, tts);
createCheckbox(name, i); // the most important thing is to pass the i; then markers[i] corresponds with checkboxes[i]
bounds.extend(latlng);
}
map.fitBounds(bounds);
}
function createMarker(latlng, name, address, info, tts) {
// var html = "<b>" + name + "</b></br><u>" + address + "</u></br>" + info + "</br>" + "Time allowance to spend: " + tts;
var marker = new google.maps.Marker({
map: map,
title: name, // You should add this
position: latlng
});
google.maps.event.addListener(marker, 'click', function() {
/* I'll ignore the infoWindow */
});
markers.push(marker);
}
function clearLocations() {
for (var i=0; i<markers.length; i++) {
markers[i].setMap(null);
}
markers=[];
}
function checkboxChanged(i, checked) {
if(checked) {
markers[i].setMap(map);
}
else {
markers[i].setMap(null);
}
}
function createCheckbox(name, i) {
document.getElementById('checkboxes').innerHTML +=
'<input type="checkbox" checked="checked" onclick="checkboxChanged(' + i + ', this.checked);"> ' + name + '<br>';
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<style>
#map-canvas {
width: 500px;
height: 400px;
}
</style>
<div id="map-canvas"></div>
<div id="checkboxes"></div>
Can you manage to include this in your code?
EDIT:
Here is an example of locations in a DB; I bypass xml and communicate through JSON.
It gives you (kind of) a combination of your questions;
I have a different table on my DB, but that shouldn't be a problem.
I add jQuery, just for ajax.
CREATE TABLE IF NOT EXISTS stations (
id bigint(15) NOT NULL AUTO_INCREMENT,
lat decimal(12,10) DEFAULT NULL,
lng decimal(12,10) DEFAULT NULL,
name varchar(255) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL,
PRIMARY KEY (id)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 COLLATE=latin1_general_ci;
INSERT INTO stations (id, lat, lng, name) VALUES
(1, '50.8456035000', '4.3568658000', 'Brussel-Centraal'),
(2, '50.8413140000', '4.3490830000', 'Brussel-Kapellekerk'),
(3, '50.8517507000', '4.3623635000', 'Brussel-Congres'),
(4, '50.8604931000', '4.3607035000', 'Brussel-Noord'),
(5, '50.8348278000', '4.3365303000', 'Brussel-Zuid');
index.php
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script type="text/javascript">
var markers = [];
var map;
// settings, to pass to the DB
var lat = 50.84499325563654;
var lng = 4.349978498661017;
var radius = 1.5; /* set this to more than 1.5 to see more locations */
function initialize() {
var position = new google.maps.LatLng(50.84499325563654, 4.349978498661017);
var myOptions = {
zoom: 11,
center: position
};
map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
searchNearLocations(lat, lng, radius);
}
function searchNearLocations(lat, lng, radius) {
document.getElementById('checkboxes').innerHTML = '';
// we start an Ajax call.
$.ajax({
url: 'ajax.php',
data: {lat: lat, lng: lng, radius: radius},
dataType: 'json',
success: function(data) {
// the request has returned data. Now we can proceed
clearLocations();
var bounds = new google.maps.LatLngBounds();
for (var i=0; i<data.length; i++) {
var latlng = new google.maps.LatLng(data[i].lat, data[i].lng),
name = data[i].name;
/* add what ever extra data you need */
createMarker(latlng, name, null, null, null);
createCheckbox(name, i); // the most important thing is to pass the i; then markers[i] corresponds with checkboxes[i]
bounds.extend(latlng);
}
map.fitBounds(bounds);
}
});
}
function createMarker(latlng, name, address, info, tts) {
/* var html = "<b>" + name + "</b></br><u>" + address + "</u></br>" + info + "</br>" + "Time allowance to spend: " + tts; */
var marker = new google.maps.Marker({
map: map,
title: name, // You should add this
position: latlng
});
google.maps.event.addListener(marker, 'click', function() {
/* I'll ignore the infoWindow */
});
markers.push(marker);
}
function clearLocations() {
for (var i=0; i<markers.length; i++) {
markers[i].setMap(null);
}
markers=[];
}
function checkboxChanged(i, checked) {
if(checked) {
markers[i].setMap(map);
}
else {
markers[i].setMap(null);
}
}
function createCheckbox(name, i) {
document.getElementById('checkboxes').innerHTML +=
'<input type="checkbox" checked="checked" onclick="checkboxChanged(' + i + ', this.checked);"> ' + name + '<br>';
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<style>
#map-canvas {
width: 500px;
height: 400px;
}
</style>
<div id="map-canvas"></div>
<div id="checkboxes"></div>
ajax.php
<?php
$link = mysqli_connect('localhost', 'root', '', 'stackoverflow'); /* put your settings back */
if(!$link) {
die ('unable to connect to the database' . mysqli_connect_error());
}
//Get parameters from URL
$myLat = (isset ($_GET['lat']) ? $_GET['lat'] : 0.0); // give it some default
$myLng = (isset ($_GET['lng']) ? $_GET['lng'] : 0.0);
$calcDistance = (isset ($_GET['radius']) ? $_GET['radius'] : 1.0);
//Search the rows in the markers table
/* I have a slightly different table; I'll continue with mine; it's easy to put everything back */
// $query = sprintf("SELECT siteName,address,lat,lng,info,tts, (6371 * acos(cos(radians('%s')) * cos(radians(lat)) * cos(radians(lng) - radians ('%s')) + sin(radians('%s')) * sin(radians(lat))))AS distance FROM mapTable HAVING distance < '%s' ORDER BY distance LIMIT 0, 50",
$query = sprintf("SELECT id, lat, lng, name, (6371 * acos(cos(radians('%s')) * cos(radians(lat)) * cos(radians(lng) - radians ('%s')) + sin(radians('%s')) * sin(radians(lat)))) AS distance FROM stations HAVING distance < '%s' ORDER BY distance LIMIT 0, 50",
mysqli_real_escape_string($link, $myLat),
mysqli_real_escape_string($link, $myLng),
mysqli_real_escape_string($link,$myLat),
mysqli_real_escape_string($link, $calcDistance));
$result = mysqli_query($link, $query);
$row_cnt = mysqli_num_rows($result);
if(!$result) {
die("Invalid query: " . mysqli_error());
}
header("content-type: application/json; charset=utf-8");
$items = array();
//iterate through the rows,
while($row = mysqli_fetch_assoc($result)) {
$items[] = $row;
}
echo json_encode($items); // this can immediatly be read by javascript
exit;
?>
You can add links/buttons, whith something like
<div onclick="searchNearLocations(50.80, 4.35, 20)">click: 20 km radius from (50.80, 4.35)</div>
To add the position of the client, check out my answer here
google getLocation function not work in my script

How to refresh only a div, not the complete page

I have this code that selects the type of a restaurant. After selecting any type the page is refreshed and after some SQL processing I get all restaurants corresponding to the selected type and show it in Google Maps.
How can I do that without refreshing the complete page, like only refreshing the <div> containing Google Maps?
<select class="mapleftS" name="type" id="type" onchange="changeType(this.value)">
<option value="0">كل الانواع</option>
<?$type = mysql_query("select * from rest_type ");
while($rod = mysql_fetch_array( $type )) {
if($rod[id] == $_REQUEST['type'])
$selll = 'selected';
else {$selll = '';
?>
<option value="<?=$rod[id]?>" <?=$selll?> ><?=$rod[name]?></option>
<? } ?>
</select>
<script>
function changeType( id ) {
parent.location = '?type=' + id;
}
$(function() {
var text_menu = $("#type option:selected").text();
$("#ddddd_").html(text_menu);
});
</script>
After selection this code is run:
if($_REQUEST['type']) {
// do some thing and refrsh map div
} else {
// do some thing and refrsh map div
}
And the following element contains Google Maps:
<div id="mppp" class="map"></div>
JS for Google Maps:
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=SOMEAPIKEY&sensor=true"></script>
<script type="text/javascript">
var address_index = 0, map, infowindow, geocoder, bounds, mapinfo, intTimer;
$(function (){
mm();
});
mm = function() {
// Creating an object literal containing the properties you want to pass to the map
var options = {
zoom: 15,
center: new google.maps.LatLng(24.701564296830245, 46.76211117183027),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// Creating the map
map = new google.maps.Map(document.getElementById('mppp'), options);
infowindow = new google.maps.InfoWindow();
geocoder = new google.maps.Geocoder();
bounds = new google.maps.LatLngBounds();
//******* ARRAY BROUGHT OVER FROM SEARCHRESULTS.PHP **********
mapinfo = [ <?=$da?> ];
intTimer = setInterval("call_geocode();", 300);
}
function call_geocode() {
if( address_index >= mapinfo.length ) {
clearInterval(intTimer);
return;
}
geocoder.geocode({
location: new google.maps.LatLng(mapinfo[address_index][6], mapinfo[address_index][7])
}, (function(index) {
return function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
// Scale our bounds
bounds.extend(results[0].geometry.location);
var $id = mapinfo[index][0];
var $tell = mapinfo[index][3];
var $title = mapinfo[index][2];
var $img_src = mapinfo[index][3];
var img_src = mapinfo[index][1];
var $logo = mapinfo[index][4];
var $status = mapinfo[index][5];
var $sell = mapinfo[index][6];
var $city = mapinfo[index][8];
var marker = new google.maps.Marker({
position: new google.maps.LatLng(mapinfo[index][6], mapinfo[index][7]),
icon: {
url : '<? bloginfo('url'); ?>' + img_src + '',
scaledSize : new google.maps.Size(50,50)
},
map: map,
scrollwheel: false,
streetViewControl: true,
title: $title
});
google.maps.event.addListener(marker, 'click', function() {
// Setting the content of the InfoWindow
if (img_src) {
var imdd = '<img src="<? bloginfo('url'); ?>' + img_src + '" width="60" height="60" style="margin-left:4px;float:right;" />';
}
else {
var imdd = '';
}
if ($tell) {
var tell = 'رقم الهاتف : '+$tell+'<br>';
}
else {
var tell = '';
}
if ($status) {
var status = 'الحي : '+$status+'<br>';
}
else {
var status = '';
}
if ($city) {
var city = 'المدينة : '+$city+'<br>';
}
else {
var city = '';
}
var content = '<div id="info" style="direction:rtl;font:15px time new roman;font-weight:bolder;position:relative;width:210px;"><div style=" font-size:13px;font-family:Tahoma;font-weight:bolder;text-align:center;font-weight:bold">' + $title + '</div><br><div style="float:right">' + imdd + '</div><div style="float:right;text-align:right;font-family:Tahoma">' + tell + city + status + '</div><br /><a style="float:left;color:#d22f00;font-size:12px;font-family:Tahoma" href="<? bloginfo('url'); ?>/rest-det/?id=' + $id + '">المزيد+</a></div>';
infowindow.setContent(content);
infowindow.open(map, marker);
});
map.fitBounds(bounds);
if (mapinfo.length == 1) {
map.setZoom(12);
}
}
else {
// error!! alert (status);
}
}
}
)(address_index)
);
address_index++;
}
</script>
<div id="mppp" class="map"></div>

You can use an AJAX pattern to refresh part of your page.
move your SQL code into another script - e.g. query.php
return a list of results in a JSON format
when the list changes call runQuery
use the function to parse the returned data and update your map
<script>
function runQuery() {
$.ajax({
url: "query.php?type="+ $("#type").val(),
cache: false,
success: function(data){
// code to process your results list;
}
});
}
</script>

This is an AJAX concept where you are able to change only a portion of your page without having to do a full page refresh or Postback.
You will find a ton of examples on what you are trying to do but the main concept is that you will:
-Take user input
-call back to your server with values
-have the server return you information that you then use to append or overwrite a portion of the page

Convert geocode results into php variables to post to mysql database

I have used the tutorial here http://tech.cibul.net/geocode-with-google-maps-api-v3/ to create a page with map and draggable marker to display address and lat/long.
Demo - http://www.calcunation.com/testgeo.php
How do I captured those results and put them into a php variable so I can insert into a mysql database?
I'm relatively new to Java, and fairly comfortable with PHP.

AJAX would be the cleanest from a user perspective. I'd use jquery $.post to do it http://api.jquery.com/jQuery.post/.

Are you trying to split out the address components?
Like street, city, state, zip....
If so...you'll want to look at the geocoded result, and parse through the array of address types that it returns.
Here is some quick sample code you can use...
//Startup a new geocode instance
var geocoder = new google.maps.Geocoder();
//event.latLng is a latLng object passed into the geocode function to get
your addy results
geocoder.geocode({'location': event.latLng}, function(results, status) {
//Show the results here
console.log(results);
if (status == google.maps.GeocoderStatus.OK) {
var addressResults = results[0].address_components;
var address1 = "";
var address2 = "";
var city = "";
var state = "";
var zipCode = "";
for(var i = 0; i < addressResults.length; i++){
for(var j = 0; j < addressResults[i].types.length; j++){
if(addressResults[i].types[j] == 'street_number'){
address1 = addressResults[i].long_name;
break;
}
if(addressResults[i].types[j] == 'route'){
address1 += " " + addressResults[i].long_name;
break;
}
if(addressResults[i].types[j] == 'subpremise'){
address2 = addressResults[i].long_name;
break;
}
if(addressResults[i].types[j] == 'locality'){
city = addressResults[i].long_name;
break;
}
if(addressResults[i].types[j] == 'administrative_area_level_1'){
state = addressResults[i].short_name;
break;
}
if(addressResults[i].types[j] == 'postal_code'){
zipCode = addressResults[i].long_name;
break;
}
}
}
//Do ajax post to your form here with the data you just parsed out
}
});

How to open Info Window when clicking a row of an Ajax sortable table

I have asked something similar but not the same at here (and it's already answered). Now I have some follow up question and I think it's better to ask anew (I've read the rules and I hope I don't break any. But if I do please kindly remind me).
I'm loading several cities' id, name, and positions from a MySQL table and then populate it into an HTML table. There's also a Google Maps with markers pointing to those cities.
I want an info window to pop up on the city marker when user click one of the HTML row (tr tag). I'm using PHP, Javascript, and XML without any jQuery. I have achieved this far.
Now I'm trying to make the HTML table to be sortable. So when user clicked the th, the data will be sorted according to the th being clicked (for this sample however, it's only sortable by ID).
The problem is after it's sorted at least once, the Info Window won't pop up anymore when the tr is clicked.
My HTML:
<?php
$query = "SELECT id, name, lat, lng FROM city ORDER BY id";
$arrCities = mysql_query ($query);
?>
<div id="gmap" style="width: 550px; height: 450px"></div>
<table id="tblData">
<tr>
<th>/* when the th clicked it'll call js function */
ID
</th>
<th>City</th>
</tr>
<?php while ($row = mysql_fetch_assoc($arrCities)) { ?>
<tr id="<?php echo $row['id']; ?>">
<td><?php echo $row['id']; ?></td>
<td><?php echo $row['name']; ?></td>
</tr>
<?php } ?>
</table>
My PHP for creating an XML to populate the markers (my-xml-generator.php):
<?php
$query = "SELECT id, name, lat, lng FROM city ORDER BY id";
$arrCities = mysql_query ($query);
$dom = new DOMDocument('1.0', 'utf-8');
$node = $dom->createElement ('markers');
$parNode = $dom->appendChild ($node);
header('Content-type: text/xml');
while ($row = mysql_fetch_assoc($arrCities))
{
$node = $dom->createElement ('marker');
$newNode = $parNode->appendChild ($node);
$newNode->setAttribute ('id', $row['id']);
$newNode->setAttribute ('name', $row['name']);
$newNode->setAttribute ('lat', $row['lat']);
$newNode->setAttribute ('lng', $row['lng']);
}
echo $dom->saveXML();
?>
My Google Maps Javascript:
var gmap = new google.maps.Map (mapDiv, options);
var arrMarkers = [];
var infoWindow = new google.maps.InfoWindow;
// add markers to the map
DownloadUrl ("my-xml-generator.php", function(data)
{
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName ("marker");
for (var i = 0; i < markers.length; i++)
{
var id = markers[i].getAttribute("id");
var lat = parseFloat (markers[i].getAttribute("lat"));
var lng = parseFloat (markers[i].getAttribute("lng"));
var pos = new google.maps.LatLng (lat, lng);
var markerOptions =
{
position : pos,
map : gmap,
draggable : false
};
// add the marker
var marker = new google.maps.Marker (markerOptions);
arrMarkers.push(marker);
// assign onclick event for each tr
// this is the part that I have to somehow re-run after the sorting is done
var tr = document.getElementById(id);
google.maps.event.addDomListener (tr, "click",
(function(i) {
var row = i;
return function() {
RowClick (row);
}
})(i)
);
// add info window
var html = '<div>' + id + '</div>';
BindInfoWindow (marker, gmap, infoWindow, html);
}
});
function BindInfoWindow (marker, map, infoWindow, html)
{
google.maps.event.addListener (marker, "click", function()
{
infoWindow.setContent (html);
infoWindow.open (map, marker);
});
}
function RowClick (i)
{
google.maps.event.trigger (arrMarkers[i], "click");
}
function DownloadUrl (url, callback)
{
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function()
{
if (xhr.readyState == 4)
{
xhr.onreadystatechange = DoNothing;
callback(xhr, xhr.status);
}
};
xhr.open ('GET', url, true);
xhr.send (null);
}
function DoNothing() {}
My GetData() function (simple and usual one):
function GetData (dataSource, divID)
{
var xhr = new XMLHttpRequest();
xhr.open ("GET", dataSource);
xhr.onreadystatechange = function()
{
if (xhr.readyState === 4)
{
var targetDiv = document.getElementById (divID);
targetDiv.innerHTML = xhr.responseText;
}
}
xhr.send (null);
}
My sort.php (my way of sorting is by running a query again to retrieve the desired sorted results and output the tr rows to the table's innerHTML):
<?php
$by = $_GET['by'];
$val = $_GET['val'];
$query = "SELECT id, name, lat, lng FROM city ORDER BY $by $val";
$arrCities = mysql_query ($query);
// set the new order value
$val == 'ASC' ? 'DESC' : 'ASC';
?>
<tr>
<th>
ID
</th>
<th>City</th>
</tr>
<?php while ($row = mysql_fetch_assoc($arrCities)) { ?>
<tr id="<?php echo $row['id']; ?>">
<td><?php echo $row['id']; ?></td>
<td><?php echo $row['name']; ?></td>
</tr>
<?php } ?>
</table>
When a tr is clicked, the Info Window of the city contained in that tr will pop up correctly. And the sorting also works
But after it was being sorted once than the click events of the tr are obviously gone. How can I reassign it again after it was sorted?

Store the ID of the markers.
Encapsulate the JS in charge of binding the markers to the rows.
Call the encapsulated JS inside the DownloadUrl callback and the GetData function.
Store ID
Make arrMarkers an object: var arrMarkers = {};
Encapsulate Bindings
function BindMarkerRows() {
for(var id in arrMarkers) {
var tr = document.getElementById(id);
google.maps.event.addDomListener (tr, "click",
(function(marker) {
return function() {
google.maps.event.trigger (marker, "click");
}
})(arrMarkers[id])
);
}
}
Update DownloadUrl
DownloadUrl ("my-xml-generator.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName ("marker");
for (var i = 0; i < markers.length; i++) {
var id = markers[i].getAttribute("id");
var lat = parseFloat (markers[i].getAttribute("lat"));
var lng = parseFloat (markers[i].getAttribute("lng"));
var pos = new google.maps.LatLng (lat, lng);
var markerOptions =
{
position : pos,
map : gmap,
draggable : false
};
// add the marker
var marker = new google.maps.Marker (markerOptions);
arrMarkers[id] = marker; //Here we access the object as an associative array
}
BindMarkerRows();
}
Update GetData
function GetData (dataSource, divID)
{
var xhr = new XMLHttpRequest();
xhr.open ("GET", dataSource);
xhr.onreadystatechange = function()
{
if (xhr.readyState === 4)
{
var status = xhr.status;
if ((status >= 200 && status < 300) || status === 304)
{
var targetDiv = document.getElementById (divID);
targetDiv.innerHTML = xhr.responseText;
BindMarkerRows();
}
}
}
xhr.send (null);
}