RSS

Monthly Archives: July 2012

How to Autocomplete world Cities

Demo

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<link href="public/css/jquery.autocomplete.css" rel="stylesheet">
<script src="public/js/jquery.js"></script>
<script type="text/javascript" src="public/js/jquery.autocomplete.pack.js"></script>

<script type="text/javascript">
$(document).ready(function() {
$("#city").autocomplete("http://ws.geonames.org/searchJSON", {
dataType: 'jsonp',
parse: function(data) {
var rows = new Array();
data = data.geonames;
for(var i=0; i<data.length; i++){
rows[i] = { data:data[i], value:data[i].name, result:data[i].name };
}
return rows;
},
formatItem: function(row, i, n) {
return row.name + ', ' + row.adminCode1;
},
extraParams: {
// geonames doesn't support q and limit, which are the autocomplete plugin defaults, so let's blank them out.
q: '',
limit: '',
featureClass: 'P',
style: 'full',
maxRows: 50,
name_startsWith: function () { return $("#city").val() }
},
max: 50
});

});
</script>
</head>

<body>
<form action="search.php" method="get" id="search_form">
What
<input type="text"  name="q" id="q">
Where
<input type="text"   name="city" id="city">
<button type="submit"  name="btnSearch" id="btnSearch">Search</button>
</form>
</body>
</html>


 
Leave a comment

Posted by on July 19, 2012 in Geo Programming, JavaScript, jQuery

 

Tags:

Reverse Geocode with Google Map – PHP


<?php
// Get STATE from Google GeoData
function reverse_geocode($address) {
$address = str_replace(" ", "+", "$address");
$url = "http://maps.google.com/maps/api/geocode/json?

address=$address&sensor=false";
$result = file_get_contents("$url");
$json = json_decode($result);
foreach ($json->results as $result)
{
foreach($result->address_components as $addressPart) {
if((in_array('locality', $addressPart->types)) &&

(in_array('political', $addressPart->types)))
$city = $addressPart->long_name;
else if((in_array('administrative_area_level_1',

$addressPart->types)) && (in_array('political', $addressPart->types)))
$state = $addressPart->long_name;
else if((in_array('country', $addressPart->types)) &&

(in_array('political', $addressPart->types)))
$country = $addressPart->long_name;
}
}

if(($city != '') && ($state != '') && ($country != ''))
$address = $city.', '.$state.', '.$country;
else if(($city != '') && ($state != ''))
$address = $city.', '.$state;
else if(($state != '') && ($country != ''))
$address = $state.', '.$country;
else if($country != '')
$address = $country;


return "$country/$state/$city";
}


$myLocation = reverse_geocode("Arboretum Rd, Stanford, CA 94305, USA");
echo "$myLocation";

?>
 
Leave a comment

Posted by on July 17, 2012 in Geo Programming, PHP

 

Reverse Geocode using Google Map – JavaScript

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function reverse()
{
var lat = parseFloat(7.4706);
var lng = parseFloat( 80.0456);
var latlng = new google.maps.LatLng(lat, lng);
geocoder = geocoder = new google.maps.Geocoder();
geocoder.geocode({'latLng': latlng}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[1]) {
if (results[1]) {
var indice=0;
for (var j=0; j<results.length; j++)
{
if (results[j].types[0]=='locality')
{
indice=j;
break;
}
}

console.log(results[j]);
for (var i=0; i<results[j].address_components.length; i++)
{
if (results[j].address_components[i].types[0] == "locality") {
//this is the object you are looking for
city = results[j].address_components[i];
}
if (results[j].address_components[i].types[0] == "administrative_area_level_1") {
//this is the object you are looking for
region = results[j].address_components[i];
}
if (results[j].address_components[i].types[0] == "country") {
//this is the object you are looking for
country = results[j].address_components[i];
}
}


alert(city.long_name + " || " + region.long_name + " || " + country.short_name)


}


} else {
alert("No results found");
}
} else {
alert("Geocoder failed due to: " + status);
}
});
}
</script>
</head>

<body onLoad="reverse()">

</body>
</html>

 

 
Leave a comment

Posted by on July 17, 2012 in Geo Programming, JavaScript

 

Display Information Window in Google Map

Demo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>codezone4 - Google Maps Simple Example</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">

function initialize()
{
var latlng = new google.maps.LatLng(9.931544168615512,76.27632894178791);
var opt =
{
center:latlng,
zoom:10,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableAutoPan:false,
navigationControl:true,
navigationControlOptions: {style:google.maps.NavigationControlStyle.SMALL },
mapTypeControl:true,
mapTypeControlOptions: {style:google.maps.MapTypeControlStyle.DROPDOWN_MENU}
};
var map = new google.maps.Map(document.getElementById("map"),opt);
var marker= new google.maps.Marker({
position: new google.maps.LatLng(6.9167,79.8333),
title: "codeZone4 Base",
clickable: true,
map: map
});


var infowindow = new google.maps.InfoWindow(
{
content: " We are here! "

});


google.maps.event.addListener(marker,'click',function(){
infowindow.open(map,marker);
});



}

</script>
</head>
<body onload="initialize()">
<div id="map" style="width:400px;height:300px;margin-top:10px;"></div>
</body>
</html>
 
Leave a comment

Posted by on July 9, 2012 in Geo Programming, JavaScript

 

Tags: ,

How to get innerHTML in a DIV with DOM

We need to get the content inside DIV container with the ID of test in get_geo_location.php.
content.php

<html>
<head></head>
<body>
<div id="test"><p>I like blogging</p></div>
</body>
</html>

Output should be :  <p>I like blogging</p>

$content="content.php";
$source=new DOMdocument();
$source->loadHTMLFile($content);
$path=new DOMXpath($source);
$dom=$path->query("*/div[@id='test']");
if (!$dom==0) {
foreach ($dom as $dom2) {

$tmp_doc = new DOMDocument();
$tmp_doc->appendChild($tmp_doc->importNode($dom2,true));
$innerHTML .= $tmp_doc->saveHTML();
echo $innerHTML;
}
}
 
Leave a comment

Posted by on July 5, 2012 in PHP

 

Tags: ,

Geocode IP Address with popular web services

hostip.info

using json API

$pageContent = file_get_contents('http://api.hostip.info/get_json.php?ip=70.85.226.228' );
$parsedJson  = json_decode($pageContent);
echo $parsedJson->country_name;
echo $parsedJson->city;
$ip = '203.153.223.84';
$sturl = 'http://api.hostip.info/get_html.php?ip='.$ip;
$ch = curl_init($sturl);
curl_setopt($ch,CURLOPT_RETURNTRANSFER,true);
curl_setopt($ch,CURLOPT_TIMEOUT,10);
$res = curl_exec($ch);
$resinfo = curl_getinfo($ch);
curl_close($ch);
preg_match('/City: ([a-zA-Z].+[a-zA-Z]+)/', $res, $r);
preg_match('/ \(([A-Z][A-Z])/', $res, $s);
$city = $r[1];
$country = $s[1];

echo $city;
echo $country;

freegeoip.net

$pageContent = file_get_contents('http://freegeoip.net/json/70.85.226.228' );
$parsedJson  = json_decode($pageContent);
echo $parsedJson->city;
echo $parsedJson->region_code;
echo $parsedJson->region_name;
echo $parsedJson->metrocode;
echo $parsedJson->zipcode;
echo $parsedJson->country_name;
echo $parsedJson->country_code;
echo $parsedJson->ip;
echo $parsedJson->latitude;
echo $parsedJson->longitude;

Geoips.com

<?php
function freegeoip_locate($ip) {
$url = "http://api.geoips.com/ip/".$ip."/key/<<your key>>/output/json/timezone/true/hostname/true";
$geo = json_decode(file_get_contents($url), true);
return $geo;
}

$geo = freegeoip_locate($_SERVER['REMOTE_ADDR']);

echo "ip: " . $geo['ip'];
echo "host name: ". $geo['hostname'];
echo "owner: ". $geo['owner'];
echo "continent_name: ". $geo['continent_name'];
echo "continent_code: ". $geo['continent_code'];
echo "country_name: ". $geo['country_name'];
echo "country_code: ". $geo['country_code'];
echo "region_name: ". $geo['region_name'];
echo "region_code: ". $geo['region_code'];
echo "county_name: ". $geo['county_name'];
echo "city_name: ". $geo['city_name'];
echo "latitude: ". $geo['latitude'];
echo "longitude: ". $geo['longitude'];
echo "timezone: ". $geo['timezone'];
?>
 
Leave a comment

Posted by on July 4, 2012 in PHP

 

Tags: ,

Send JSON via AJAX request

This tutorial demonstrates how to make an AJAX request in javaScript and process JSON in PHP. The data sent by the HTTP Post request is used to create a session after JSON decoding finished.

For this, we need following .js file.

https://github.com/douglascrockford/JSON-js/blob/master/json2.js

function abc()
{
var jsonObj = {"lat": 56  ,"long": 78  ,"city": 'Wohiyo' };

// Lets convert our JSON object
var postData = JSON.stringify(jsonObj);

// Lets put our stringified json into a variable for posting
var postArray = {json:postData};

$.ajax({
type: 'POST',
url: "Server.php",
data: postArray,
success: function(data){
alert("success");
}
});
}

Server.php

<?php
 session_start();
 header("Expires: Mon, 26 Jul 2000 05:00:00 GMT");
 header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
 header("Cache-Control: no-cache, must-revalidate");
 header("Pragma: no-cache");

if(isset($_POST["json"])){
 $json = stripslashes($_POST["json"]);
 $output = json_decode($json);

$_SESSION['city'] = $output->{'city'};
 }
 ?>

complete source code

<?php session_start();?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script src="jquery-1.7.js"></script>
<script src="json2.js"></script>

<script type="text/javascript">
function abc()
{
var jsonObj = {"lat": 56  ,"long": 78  ,"city": 'Wohiyo' };

// Lets convert our JSON object
var postData = JSON.stringify(jsonObj);

// Lets put our stringified json into a variable for posting
var postArray = {json:postData};

$.ajax({
type: 'POST',
url: "Server.php",
data: postArray,
success: function(data){
alert("success");
}
});
}
</script>
</head>

<body onLoad="abc()">
<?php echo $_SESSION['city'];?>
</body>
</html>
 
Leave a comment

Posted by on July 4, 2012 in JavaScript, PHP

 

Tags: ,